Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

card flip


Published on

Published in: Education, Technology, Business
  • Be the first to comment

  • Be the first to like this

card flip

  1. 1. More CSS! Dave KanterAcademy of Art University Inside Programming May 1, 2012
  2. 2. Length UnitsCan be absolute or relative. Relative: em: relative to base font ex: relative to the height of “x” px: relative to resolution of device
  3. 3. Absolute UnitsAbsolute Units: in: inches cm: centimeters mm: millimeters pt: points pc: picas
  4. 4. Absolute Size Keywords xx-small x-small small medium large x-large xx-large
  5. 5. Relative Size Keywords smaller larger
  6. 6. Sizing Set the base font:body { font-size: small;} Then scale:h1 { font-size : 150%; }
  7. 7. Sizing For instance:body { font-size: small; }h1 { font-size: 150%; }h2 { font-size: 130%; }h3 { font-size: 120%; }ul li { font-size: 90%; }.note { font-size: 85%; }
  8. 8. Try it!Create a page using the stylesheet shown onthe last page.Create each type of text described in thestylesheet.Try changing things around and see whathappens!What happens when you nest percentages?
  9. 9. Float and ClearsYou can only float block level elements div, ol, ul, p, img, etc...Inline elements don’t float <i>, <strong>, <span>, <br />, etc...Float determines how item is positionedrelative to container it’s in.Can float left or right. Other items willaccommodate themselves to the float.
  10. 10. Floats and ClearsFloats float: left; float: right;Clears clear floats: clear: left; clear: right; clear: both;
  11. 11. Classes and ID’sClass:.myclass { something }ID:#myid {something}
  12. 12. Other Effects Let’s round some corners! .boxbg { background-color:#ccc; } .all-round { border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; }<div class=”boxbg all-round”>
  13. 13. Fun With Hover.block{ border:5px solid #ccc; padding:10px; -webkit-border-radius:5px;}#fade{ opacity: 1; -webkit-transition: opacity 1s linear;}#fade:hover{opacity: 0;}