This document provides an introduction to using CSS3 properties like rounded corners, drop shadows, transforms, and transitions. It includes code examples for applying rounded corners, unevenly rounded corners, drop shadows, inset shadows, text shadows, color properties like RGB, HSL, and transitions. Transform properties demonstrated include translate, scale, and transform-origin. The final example shows how to create a circle with shadow.

1. Intro to HTML/CSS
Class 4 Handout: CSS3 with jsfiddle.net
1. Go to http://jsfiddle.net/7JCWN/1/
2. Rounded Corners
Find the id selector for #corners in the CSS. Add the following declarations and click “Run”:
/* firefox */
-moz-border-radius: 20px;
/* safari and chrome*/
-webkit-border-radius: 20px;
border-radius: 20px;
This should result in the following:
1

2. Now we have rounded corners on the box labeled “rounded corners”. You can play with the
border radius to see the effect. If we change the border radius to 10px, we see a more subtle
rounding:
If we change the radius to 50%, our corners look like this:
3. Unevenly Rounded Corners
You can specify a different border radius for each corner. Find the #uneven id selector and add
the following:
border-top-right-radius: 160px 10px;
border-top-left-radius: 160px 20px;
border-bottom-left-radius: 160px 10px;
border-bottom-right-radius: 160px 20px;
2

3. 4. Drop Shadows
You can add drop shadows to your div by finding the #drop id selector and adding the following:
/* firefox */
-moz-box-shadow: black 0px 5px 5px;
/* safari and chrome*/
-webkit-box-shadow: black 0px 5px 5px;
/* fallback */
box-shadow: black 0px 5px 5px;
3

4. Which will give us something looking like this:
You can change the first value to affect the vertical offset, the second value to affect the
horizontal offset and the third value to affect the blur radius. Let’s try changing these to:
/* firefox */
-moz-box-shadow: gray 0px 10px 10px;
/* safari and chrome*/
-webkit-box-shadow: gray 0px 10px 10px;
/* fallback */
box-shadow: gray 0px 10px 10px;
Notice we also changed the color from black to gray.
4

5. 5. Inset Shadows
Find the id selector #inset and add the following:
/* firefox */
-moz-box-shadow: inset black 0px 5px 5px;
/* safari and chrome*/
-webkit-box-shadow: inset black 0px 5px 5px;
box-shadow: inset black 0px 5px 5px;
5

6. Now you can see how the shadow is inset into the box.
6. Text Shadows
Find the class selector .textShadow and add:
text-shadow: 0 2px 5px black;
6

7. 7. Color – rgb and rgba
Find the id selectors #rgb and enter the following:
background-color: rgb(155,155,155);
Add a <div> tag to the HTML above the RGBA div:
7

8. <div id="rgb">Color: RGB</div>
Find the id selector #rgba and add:
background-color: rgba(155, 155, 155, 0,5);
8

9. 8. Color – hsl and hsla
Find the id selector #hsl. You will should see the following declaration:
background-color: hsl(260, 50%, 75%);
We are going to add a background-color to the #hsla selector. Find the id selector #hsla and
add the following:
background-color: hsl(260, 50%, 75%, 0.5);
I added “Color: HSLA” to the div id=”hsla” so that we could see text above.
9

10. Transforms
We are going to go to a new jsfiddle file: http://jsfiddle.net/8etSs/1/
9. Translate
Notice the positions of the rectangles in the preview pane called “pre-translate” an “post-
translate”.
Find the id selector #translate and add the following:
-webkit-transform: translateX(90px);
-moz-transform: translateX(90px);
You can see the post-translate box has moved 90px in the X direction:
10

11. 10. Scale
Find the rectangles in the preview labeled pre-scale and post-scale.
Find the id selector #scale in the CSS file and add:
-webkit-transform: scale(2.0);
-moz-transform: scale(2.0);
You can now see that the post-scale rectangle is scaled up by 2:
11

12. 11. Scale – Vertical and Horizontal
Let’s say we want to double the width of the post-scale box and leave the height. We would add
this to the #scale selector in place of what we had before:
-webkit-transform: scale(2.0, 1.0);
-moz-transform: scale(2.0, 1.0);
We are now scaling by 2 along the x-axis and 1 along the y-axis (original height):
12

13. 12 – Scale – fractional scaling
If we wanted to keep the box the same width but scale the height to 1/10, we would replace the
transform in the #scale selector with the following:
-webkit-transform: scale(1.0, 0.1);
-moz-transform: scale(1.0, 0.1);
13

14. 13. Transform-origin
You can change the origin of an element to be somewhere other than the center with the
transform-origin property.
Find the id selector #origin and uncomment out the following:
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-op-transform-origin: 0 0;
transform-origin: 0 0;
Add to #origin-hover:
-webkit-transform: scale(2.0);
-moz-transform: scale(2.0);
Now look at how the box called “make me SCALE UP on hover!” scales up when you hover
your mouse over.
Comment out the transform-origin in #origin again and look at the difference.
14. Transitions
In the above example, add the following to #origin-hover:
-webkit-transition: all 1.0s;
-moz-transition: all 1.0s;
-o-transition: all 1.0s;
This will cause the scale up in the previous example to occur over 1 second. Try changing 1.0s
to other values, like 10s.
14

15. 15. Transforms – Circle with Shadow
Go to jsfiddle.net: http://jsfiddle.net/fiddlefiddle/patYu/2/
In the #shadow selector, add the following:
position: relative;
border-radius: 75px;
15