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:

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;

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;

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.

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;

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;

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:

8

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

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.

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:

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:

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):

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

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.

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;