Class 4 handout w css3 using j fiddle


Published on

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

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Class 4 handout w css3 using j fiddle

  1. 1. Intro to HTML/CSS Class 4 Handout: CSS3 with jsfiddle.net1. Go to Rounded CornersFind 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. 2. Now we have rounded corners on the box labeled “rounded corners”. You can play with theborder radius to see the effect. If we change the border radius to 10px, we see a more subtlerounding:If we change the radius to 50%, our corners look like this:3. Unevenly Rounded CornersYou can specify a different border radius for each corner. Find the #uneven id selector and addthe 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. 3. 4. Drop ShadowsYou 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. 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 thehorizontal 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. 5. Inset ShadowsFind 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. 6. Now you can see how the shadow is inset into the box.6. Text ShadowsFind the class selector .textShadow and add:text-shadow: 0 2px 5px black; 6
  7. 7. 7. Color – rgb and rgbaFind 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. 8. <div id="rgb">Color: RGB</div>Find the id selector #rgba and add:background-color: rgba(155, 155, 155, 0,5); 8
  9. 9. 8. Color – hsl and hslaFind 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 andadd 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. 10. TransformsWe are going to go to a new jsfiddle file: TranslateNotice 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. 11. 10. ScaleFind 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. 12. 11. Scale – Vertical and HorizontalLet’s say we want to double the width of the post-scale box and leave the height. We would addthis 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. 13. 12 – Scale – fractional scalingIf we wanted to keep the box the same width but scale the height to 1/10, we would replace thetransform in the #scale selector with the following:-webkit-transform: scale(1.0, 0.1);-moz-transform: scale(1.0, 0.1); 13
  14. 14. 13. Transform-originYou can change the origin of an element to be somewhere other than the center with thetransform-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 hoveryour mouse over.Comment out the transform-origin in #origin again and look at the difference.14. TransitionsIn 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.0sto other values, like 10s. 14
  15. 15. 15. Transforms – Circle with ShadowGo to the #shadow selector, add the following:position: relative;border-radius: 75px; 15