card flip

706 views
669 views

Published on

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
706
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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;}

    ×