Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Basics of CSS3
Brief IntroCSS (Cascading Style Sheets) have been around for awhile nowwhich allow us to produce better websites. Due to t...
Rounded CornersExample of Code:-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
Drop ShadowExample of Code:-webkit-box-shadow: 5px 5px 5px #888; -moz-box-shadow: 5px 5px 5px #888; box-shadow: 5px 5px 5p...
Multiple Background ImagesExample of Code:background:url(images/staple.png) top left no-repeat,url(images/staple.png) top ...
Text ShadowExample of Code:text-shadow: 1px 1px 2px #000;;
Letter PressExample of Code:text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
GradientsExample of Code:background-image: -webkit-gradient(linear, 0% 0%, 0%100%, from(#eee), to(#999));background-image:...
Upcoming SlideShare
Loading in …5
×

The Basics of CSS3

579 views

Published on

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

Published in: Technology, Education
  • Be the first to comment

The Basics of CSS3

  1. 1. The Basics of CSS3
  2. 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. 3. Rounded CornersExample of Code:-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
  4. 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. 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. 6. Text ShadowExample of Code:text-shadow: 1px 1px 2px #000;;
  7. 7. Letter PressExample of Code:text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
  8. 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);

×