Your SlideShare is downloading. ×
0
The Basics of CSS3
The Basics of CSS3
The Basics of CSS3
The Basics of CSS3
The Basics of CSS3
The Basics of CSS3
The Basics of CSS3
The Basics of CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Basics of CSS3

366

Published on

This brief slideshow gives you an idea of what css3 is capable of.

This brief slideshow gives you an idea of what css3 is capable of.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
366
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The Basics of CSS3
  • 2. Brief IntroCSS (Cascading Style Sheets) have been around for awhile nowwhich allow us to produce better websites. Due to theadvancement of CSS3, we are now able to do things a lot easier.Things such as drop shadows, rounded corners, textshadows, multiple background images, and much more. Althoughthe capabilities of CSS3 have expanded, most of thecustomizations will only be noticed in Google Chrome, Firefox, andSafari.
  • 3. Rounded CornersExample of Code:-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
  • 4. Drop ShadowExample of Code:-webkit-box-shadow: 5px 5px 5px #888; -moz-box-shadow: 5px 5px 5px #888; box-shadow: 5px 5px 5px #888;
  • 5. Multiple Background ImagesExample of Code:background:url(images/staple.png) top left no-repeat,url(images/staple.png) top right no-repeat,url(images/staple.png) bottom left no-repeat,url(images/staple.png) bottom right no-repeat;background-color: #eee;
  • 6. Text ShadowExample of Code:text-shadow: 1px 1px 2px #000;;
  • 7. Letter PressExample of Code:text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
  • 8. GradientsExample of Code:background-image: -webkit-gradient(linear, 0% 0%, 0%100%, from(#eee), to(#999));background-image: -moz-linear-gradient(100% 100% 90deg, #999, #eee);

×