CSS Techniques Explained

  • 1,920 views
Uploaded on

Presentation given by Robin Poort at the Joomladay 2011 in the Netherlands

Presentation given by Robin Poort at the Joomladay 2011 in the Netherlands

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,920
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
43
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS Technieken toegelicht
      Robin Poort, CEO & Co-founder, FinishJoomla Joomla!dagen Nederland, april 2011
  • 2. Alle bestanden van de voorbeelden in deze presentatie zijn hier te vinden: http://www.finishjoomla.com/media/css-technieken-toegelicht.zip
  • 3.  
  • 4.  
  • 5. CSS technieken toegelicht Een goede basis
  • 6. CSS – Een goede basis
  • 13. Source: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
  • 14. Source: http://meyerweb.com/eric/tools/css/reset/
  • 15. Source: http://960.gs/demo.html
  • 16. div.example { background-color : #FFFFFF; background-image : url(img.png) ; background-position : left top; background-repeat : repeat-x; border-width : 1px; border-style : solid; border-color : #000000; margin-top : 10px; margin-right : 10px; margin-bottom : 10px; margin-left : 10px padding-top : 10px; padding-right : 15px; padding-bottom : 20px; padding-left : 15px; } div.example2 { font-family : Arial, sans-serif; font-size : 12px ; line-height : 1.5em; font-weight : bold; font-style : italic; font-variant : small-caps; list-style-type : disc; list-style-position : inside; list-style-image : url(img.png) ; }
  • 17. div.example { background : #FFFFFF url(example.png) left top repeat-x; border : 1px solid #000000; margin : 10px; padding : 10px 15px 20px; } div.example2 { font : bold italic small-caps 1em/1.5em Arial,sans-serif; list-style : disc inside url(example.png) ; }
  • 18. Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
  • 19. * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up] {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style= "" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ Source: http://www.w3.org/TR/CSS2/cascade.html
  • 20. !important
  • 21. .example { color : red !important } Wint van <div class= ” example ” style= ” color : blue; ” >
  • 22. <div class= ” clear ” ></div> & <div class= ” clearfix ” ></div>
  • 23. HTML markup <div class= ” wrapper ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> </div> Resultaat CSS .wrapper { background : #FFF; border : 5px solid #29BDBD; margin : 10px; padding : 10px; } .floatbox { background : #FFF; border : 5px solid #333; padding : 10px; float : right ; }
  • 24. HTML markup <div class= ” wrapper ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat CSS (in 960 grid system) .clear { clear : both; display : block; overflow : hidden ; visibility : hidden; width : 0; height : 0; }
  • 25. HTML markup <div class= ” wrapper clearfix ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> </div> Resultaat CSS (in 960 grid system) .clearfix:before,.clearfix:after { content : '0020' ; display : block; overflow : hidden; visibility : hidden; width : 0; height : 0; } .clearfix:after { clear : both; } .clearfix { zoom : 1; }
  • 26. Code commenting
    • Voor jezelf later
    • 27. Voor anderen na jou
    • 28. Bij hacks en adjustments
    /* Als kopjes in je CSS file */ h3 { font-size : 1em;} h3 { font-size : 1em;} /* Achter bepaalde styles */
  • 29. CSS technieken toegelicht Goed om te weten
  • 30. CSS – goed om te weten
  • 35. HTML markup <div class= ” container ” > <div class= ” absolute ” > Absolute </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat in IE7 CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }
  • 36. HTML markup <div class= ” container ” > <div> <div class= ” absolute ” > Absolute </div> </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }
  • 37. HTML markup <div class= ” container ” > <div class= ” IE-div ” > <div class= ” absolute ” > Absolute </div> </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }
  • 38. <div class= ” class stacking ” ></div>
  • 39. HTML markup <div class= ” blockBigBoldRed ” > Example </div> <div class= ” blockBigBlue ” > Example </div> Resultaat CSS .blockBigBoldRed { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; font-size : 2em; color : red; font-weight : bold; } .blockBigBlue { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; font-size : 2em; color : blue; }
  • 40. HTML markup <div class= ” block ” > <div class= ” bigFont ” > <div class= ” boldFont ” > <div class= ” redFont ” > Example </div> </div> </div> </div> <div class= ” block ” > <div class= ” bigFont ” > <div class= ” blueFont ” > Example </div> </div> </div> CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .blueFont { color : blue;} .boldFont { font-weight : bold;} Resultaat
  • 41. HTML markup <div class= ” block bigFont boldFont redFont ” > Example </div> <div class= ” block bigFont blueFont ” > Example </div> Resultaat CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .blueFont { color : blue;} .boldFont { font-weight : bold;}
  • 42. .class.class
  • 43. HTML markup <div class= ” block bigFont redFont ” > Example <div class= ” caption redFont ” > Example </div> </div> Resultaat CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .caption { background : #CCC; padding : 10px; }
  • 44. HTML markup <div class= ” block bigFont redFont ” > Example <div class= ” caption redFont ” > Example </div> </div> Resultaat CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .caption { background : #CCC; padding : 10px; } .caption.redFont { color : darkred;}
  • 45. #id.class
  • 46. HTML markup <div id= ” bar1 ” class= ” grid_4 ” > Example </div> <div id= ” bar2 ” class= ” grid_4 ” > Example </div> <div id= ” bar3 ” class= ” grid_4 ” > Example </div> CSS .grid_4 { display : inline; float : left; margin-left : 10px; margin-right : 10px; position : relative; width: 300px; }
  • 47. HTML markup <div id= ” bar1 ” class= ” grid_4 ” > Example </div> <div id= ” bar2 ” class= ” grid_4 ” > Example </div> <div id= ” bar3 ” class= ” grid_4 ” > Example </div> CSS .grid_4 { display : inline; float : left; margin-left : 10px; margin-right : 10px; position : relative; } #bar1.grid_4 { margin-left : 0;} #bar3.grid_4 { margin-right : 0;}
  • 48. Handige CSS selectors E F Matches any F element that is a descendant of an E element. E > F Matches any F element that is a child of an element E. E + F Matches any F element immediately preceded by a sibling element E. E:first-child Matches element E when E is the first child of its parent. E[foo] Matches any E element with the &quot;foo&quot; attribute set (whatever the value). E[foo=&quot;warn&quot;] Matches any E element whose &quot;foo&quot; attribute value is exactly equal to &quot;warn&quot;. E[foo~=&quot;warn&quot;] Matches any E element whose &quot;foo&quot; attribute value is a list of space-separated values, one of which is exactly equal to &quot;warn&quot;. Source: http://www.w3.org/TR/CSS2/selector.html
  • 49. E > F HTML markup <div class= ” blog ” > <p> Introduction </p> <div class= ” story ” > <p> Lorem ipsum dolor </p> <div class= ” date ” > <p> Date </p> </div> </div> </div> CSS .blog p { font-family : Arial, sans-serif; font-size : 1em; color : #555; } .story p { font-size : 1.3em; color : #111; } Resultaat
  • 50. E > F HTML markup <div class= ” blog ” > <p> Introduction </p> <div class= ” story ” > <p> Lorem ipsum dolor </p> <div class= ” date ” > <p> Date </p> </div> </div> </div> CSS .blog p { font-family : Arial, sans-serif; font-size : 1em; color : #555; } .story > p { font-size : 1.3em; color : #111; } Resultaat
  • 51. E + F HTML markup <div class= ” blog ” > <h1> Title </h1> <h2> Subtitle </h2> <h2> Subtitle </h2> <p> Lorem ipsum </p> <h2> Subtitle </h2> <p> Lorem ipsum </p> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; } h2 { margin : 0 0 .5em 0; font-size : 1.4em; color : #000; }
  • 52. E + F HTML markup <div class= ” blog ” > <h1> Title </h1> <h2> Subtitle </h2> <h2> Subtitle </h2> <p> Lorem ipsum </p> <h2> Subtitle </h2> <p> Lorem ipsum </p> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; } h2 { margin : 0 0 .5em 0; font-size : 1.4em; color : #000; } h1 + h2 { margin-top : -1em; font-style : italic; }
  • 53. E:first-child HTML markup <div class= ” blog ” > <h1> Title </h1> <p> Lorem ipsum </p> <p> Lorem ipsum </p> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; color : #222; } p { color : #444; margin-bottom : 1em; } .blog p:first-child { font-family : serif; font-style : italic; color : #000; }
  • 54. E:first-child HTML markup <div class= ” blog ” > <h1> Title </h1> <div class= ” story ” > <p> Lorem ipsum </p> <p> Lorem ipsum </p> </div> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; color : #222; } p { color : #444; margin-bottom : 1em; } .story p:first-child { font-family : serif; font-style : italic; color : #000; }
  • 55. E[foo=&quot;warn&quot;] HTML markup <label> Naam </label><br /> <input type= &quot;text&quot; /> <label> Geslacht </label><br /> <label> <input type= &quot;radio&quot; /> Man </label> <label> <input type= &quot;radio&quot; /> Vrouw </label> CSS input[type=&quot;text&quot;] { width : 200px; border : 1px solid #CCC; background : #F5F5F5; padding : 5px; } input[type=&quot;radio&quot;] { margin-left : 1em; }
  • 56. CSS technieken toegelicht CSS in gebruik
  • 57. CSS – In gebruik
  • 62. Source: http://www.google.com/webfonts?subset=latin&sort=pop
  • 63. HTML markup <!-- Begin plaats in <head> --> <link href= ”http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu” rel= ”stylesheet” type= ”text/css” /> <!-- Eind plaats in </head> --> <h1> Title </h1> <p> The quick brown fox jumps over the lazy dog. </p> CSS h1 { font-family : 'Yanone Kaffeesatz' , arial, serif; } p { font-family : 'Ubuntu' , arial, serif; }
  • 64.  
  • 65.  
  • 66. HTML markup <ul> <li><a class= ” doc-icon ” href= &quot;test.doc&quot; > Lorem ipsum dolor </a></li> <li><a class= ” pdf-icon ” href= &quot;test.pdf&quot; > Sit amet consect </a></li> <li><a class= ” xls-icon ” href= &quot;test.xls&quot; > Lorem ipsum dolor </a></li> <li><a class= ” png-icon ” href= &quot;test.png&quot; > Sit amet consectet </a></li> </ul> CSS li a.doc-icon { background : url(doc.gif) no-repeat; } li a.pdf-icon { background : url(pdf.gif) no-repeat; } li a.xls-icon { background : url(xls.gif) no-repeat; } li a.png-icon { background : url(png.gif) no-repeat; }
  • 67. HTML markup <ul> <li><a href= &quot;test.doc&quot; > Lorem ipsum dolor </a></li> <li><a href= &quot;test.pdf&quot; > Sit amet consectetuer </a></li> <li><a href= &quot;test.xls&quot; > Lorem ipsum dolor </a></li> <li><a href= &quot;test.png&quot; > Sit amet consectetuer </a></li> </ul> <ul> <li><a href= &quot;http://twitter.com/finishjoomla&quot; > Twitter </a></li> <li><a href= &quot;http://www.facebook.com/profile.php&quot; > Facebook </a></li> <li><a href= &quot;http://www.linkedin.com/company/&quot; > Linkedin </a></li> <li><a href= &quot;http://www.youtube.com/user/&quot; > Youtube </a></li> </ul>
  • 68. CSS li a[href$='.doc'] , li a[href$='.pdf'] , li a[href$='.xls'] , li a[href$='.png'] , li a[href*='twitter.com'] , li a[href*='facebook.com'] , li a[href*='linkedin.com'] , li a[href*='youtube.com'] { padding-left :40px; min-height :24px; display :inline-block; line-height :24px; }
  • 69. CSS li a[href$='.doc'] { background : url(doc.gif) no-repeat; } li a[href$='.pdf'] { background : url(pdf.gif) no-repeat; } li a[href$='.xls'] { background : url(xls.gif) no-repeat; } li a[href$='.png'] { background : url(png.gif) no-repeat; } li a[href*='twitter.com'] { background : url(twitter.gif) no-repeat; } li a[href*='facebook.com'] { background : url(facebook.gif) no-repeat; } li a[href*='linkedin.com'] { background : url(linkedin.gif) no-repeat; } li a[href*='youtube.com'] { background : url(youtube.gif) no-repeat; }
  • 70.  
  • 71. HTML markup <p> <span class= ” dropcap ” > L </span> orem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p { font-family : Arial, sans-serif;} span.dropcap { font-size : 3em; color : #29BDBD; float : left; margin : 10px 10px 0 0; display : block; }
  • 72. HTML markup <p class= ” dropcap ” > Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p.dropcap { font-family : Arial, sans-serif;} p.dropcap:first-letter { font-size : 3em; color : #29BDBD; float : left; margin : 10px 10px 0 0; }
  • 73. HTML markup <p class= ” dropcap ” > Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p.dropcap { font-family : 'Old Standard TT' , Times, serif;} p.dropcap:first-letter { font-family : 'UnifrakturMaguntia' , Times, serif; font-size : 3em; color : #29BDBD; float : left; margin : 10px 10px 0 0; }
  • 74.  
  • 75. Source: http://www.flickr.com/photos/shadeofmelon/3584367692/
  • 76. HTML markup <ul> <li><a href= &quot;#&quot; > Item 1 </a></li> <li class= &quot; parent &quot; ><a href= &quot;#&quot; > Item 2 </a> <ul> <li><a href= &quot;#&quot; > Sub item 1 </a></li> <li><a href= &quot;#&quot; > Sub item 2 </a></li> <li class= &quot; parent &quot; ><a href= &quot;#&quot; > Sub item 3 </a> <ul> <li><a href= &quot;#&quot; > Sub sub item 1 </a></li> <li><a href= &quot;#&quot; > Sub sub item 2 </a></li> </ul> </li> <li><a href= &quot;#&quot; > Sub item 4 </a></li> </ul> </li> <li><a href= &quot;#&quot; > Item 3 </a></li> </ul>
  • 77.  
  • 78. ul li { float :left; position :relative; background :#555;} ul li a { color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;}
  • 79.  
  • 80. ul li { float :left; position :relative; background :#555;} ul li a { color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display:none; } ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;}
  • 81.  
  • 82. ul li { float :left; position :relative; background :#555;} ul li a { color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover ul {display:block;} ul li:hover {background:#333;}
  • 83.  
  • 84. ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li:hover { background :#333;}
  • 85.  
  • 86. ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li:hover { background :#333;} ul li:hover {background:#333;} ul li li:hover {background:#111;} ul li li:hover {background:#000;}
  • 87.  
  • 88. ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li.parent:hover { background :#333;} ul li:hover { background :#333;} ul li li:hover { background :#111;} ul li li:hover { background :#000;} ul li.parent a {background:url(arrow_down.png) no-repeat right 20px;}
  • 89.  
  • 90. ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li.parent:hover { background :#333;} ul li:hover { background :#333;} ul li li:hover { background :#111;} ul li li:hover { background :#000;} ul li.parent > a { background : url(arrow_down.png) no-repeat right 20px;}
  • 91.  
  • 92. ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li.parent:hover { background :#333;} ul li:hover { background :#333;} ul li li:hover { background :#111;} ul li li:hover { background :#000;} ul li.parent > a { background : url(arrow_down.png) no-repeat right 20px;} ul li li.parent > a {background:url(arrow_side.png) no-repeat right 15px;}
  • 93.  
  • 94.  
  • 95.  
  • 96. HTML markup <img class= ” img1 ” src= ”image.png” alt= ” image ” /> CSS img.img1 { background : #FFF; padding : 2px; border : 2px solid #AAA; }
  • 97. HTML markup <img class= ” img2 ” src= ”image.png” alt= ” image ” /> CSS img.img2 { background : url(seamless.png) ; padding : 4px; }
  • 98. HTML markup <img class= ” img3 ” src= ”image.png” alt= ” image ” /> CSS img.img3 { background : url(seamless.png) ; padding : 3px; border : 1px solid #000; }
  • 99. HTML markup <img class= ” img4 ” src= ”image.png” alt= ” image ” /> CSS img.img4 { background : #000 ; padding : 1px; border : 2px solid #FFF; outline : 1px solid #AAA; }
  • 100. Vragen?
  • 101.
      Coupon code JD11NL
      – 15% discount on all our products – Valid until 2 weeks from now – 50 coupons available
      Robin Poort
      [email_address]
      Twitter: @finishjoomla