More Complex CSS
-
Explain how CSS3 is new and sometimes needs multiple lines to assure it will work in all
browsers. For each item, have students listen and watch; then give them time to attempt each
thing on their own.
-
Create rounded borders.
border-radius: 10px;
-moz-border-radius: 10px;
Explain how to get more specific:
border-radius: 10px 0px 10px 0px / 0px 10px 0px 10px;
-
Create background-gradients using the Gradient Helper (
http://www.colorzilla.com/gradient-editor). Look into the code that the helper spits out and explain how it works. Encourage students
to add this link to their webpage.
-
Creating box shadows. Use a sample image in the content div to demonstrate.
box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
Vertical and horizontal displacement, blur, and color
-
Creating text shadows.
text-shadow: 10px 10px 5px #888888;
Vertical and horizontal displacement, blur, and color
-
Rotate items. Use the sample image from before, but do mention that it can be applied to
divs and other items.
transform: rotate(-5deg(;
-moz-transform: rotate(-5deg(;
-webkit-transform: rotate(-5deg(;
-o-transform: rotate(-5deg(;
-
Demonstrate the use of the hover property on images. Create, for instance, an image the
rotates when you hover over it.