The Basics of CSS3

Brief Intro

CSS (Cascading Style Sheets) have been around for awhile now

which allow us to produce better websites. Due to the

advancement of CSS3, we are now able to do things a lot easier.

Things such as drop shadows, rounded corners, text shadows,

multiple background images, and much more. Although the

capabilities of CSS3 have expanded, most of the customizations

will only be noticed in Google Chrome, Firefox, and Safari.

Rounded Corners

Example of Code:

-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

Drop Shadow

Example of Code:

-webkit-box-shadow: 5px 5px 5px #888; -moz-box-shadow: 5px 5px 5px #888; box-shadow: 5px 5px 5px #888;

Multiple Background Images

Example 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;

Text Shadow

Example of Code:

text-shadow: 1px 1px 2px #000;;

Letter Press

Example of Code:

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

Gradients

Example 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);