CSS Technieken toegelicht <ul>Robin Poort, CEO & Co-founder, FinishJoomla Joomla!dagen Nederland, april 2011 </ul>
Alle bestanden van de voorbeelden in deze presentatie zijn hier te vinden: http://www.finishjoomla.com/media/css-technieke...
 
 
CSS technieken toegelicht Een goede basis
CSS  –   Een goede basis <ul><li>Cheatsheets
Resets
Frameworks
Shorthand CSS
Specificity + !important
Clear & clearfix
Code-commenting </li></ul>
Source: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
Source: http://meyerweb.com/eric/tools/css/reset/
Source: http://960.gs/demo.html
div.example  { background-color : #FFFFFF; background-image :  url(img.png) ; background-position : left top; background-r...
div.example  { background : #FFFFFF  url(example.png)  left top repeat-x; border : 1px solid #000000; margin :   10px; pad...
Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
*  {}  /* 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...
!important
.example   { color :   red  !important } Wint van <div  class= ” example ”  style= ” color : blue; ” >
<div  class= ” clear ” ></div> & <div  class= ” clearfix ” ></div>
HTML markup <div  class= ” wrapper ” > Lorem ipsum <div  class= ” floatbox ” > Floating box </div> </div> Resultaat CSS .w...
HTML markup <div  class= ” wrapper ” > Lorem ipsum <div  class= ” floatbox ” > Floating box </div> <div  class= ” clear ” ...
HTML markup <div  class= ” wrapper clearfix ” > Lorem ipsum <div  class= ” floatbox ” > Floating box </div> </div> Resulta...
Code commenting <ul><li>Voor jezelf later
Voor anderen na jou
Bij hacks en adjustments </li></ul>/* Als kopjes in je CSS file */ h3  { font-size : 1em;} h3  { font-size : 1em;}   /* Ac...
CSS technieken toegelicht Goed om te weten
CSS  –   goed om te weten <ul><li>Floating & position: absolute
Class stacking
.class.class
#id.class
CSS selectors </li></ul>
HTML markup <div  class= ” container ” > <div  class= ” absolute ” > Absolute </div> <div  class= ” floatbox ” > Floating ...
HTML markup <div  class= ” container ” > <div> <div  class= ” absolute ” > Absolute </div> </div> <div  class= ” floatbox ...
HTML markup <div  class= ” container ” > <div  class= ” IE-div ” > <div  class= ” absolute ” > Absolute </div> </div> <div...
<div  class= ” class stacking ” ></div>
HTML markup <div  class= ” blockBigBoldRed ” > Example </div> <div  class= ” blockBigBlue ” > Example </div> Resultaat CSS...
HTML markup <div  class= ” block ” > <div  class= ” bigFont ” > <div  class= ” boldFont ” > <div  class= ” redFont ” > Exa...
HTML markup <div  class= ” block bigFont boldFont redFont ” > Example </div> <div  class= ” block bigFont blueFont ” > Exa...
.class.class
HTML markup <div  class= ” block bigFont redFont ” > Example <div  class= ” caption redFont ” > Example </div> </div> Resu...
HTML markup <div  class= ” block bigFont redFont ” > Example <div  class= ” caption redFont ” > Example </div> </div> Resu...
#id.class
HTML markup <div  id= ” bar1 ”   class= ” grid_4 ” > Example </div> <div  id= ” bar2 ”   class= ” grid_4 ” > Example </div...
HTML markup <div  id= ” bar1 ”   class= ” grid_4 ” > Example </div> <div  id= ” bar2 ”   class= ” grid_4 ” > Example </div...
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...
E > F HTML markup <div  class= ” blog ” > <p> Introduction </p> <div  class= ” story ” > <p> Lorem ipsum dolor </p> <div  ...
E > F HTML markup <div  class= ” blog ” > <p> Introduction </p> <div  class= ” story ” > <p> Lorem ipsum dolor </p> <div  ...
E + F HTML markup <div  class= ” blog ” > <h1> Title </h1> <h2> Subtitle </h2> <h2> Subtitle </h2> <p> Lorem ipsum </p> <h...
E + F HTML markup <div  class= ” blog ” > <h1> Title </h1> <h2> Subtitle </h2> <h2> Subtitle </h2> <p> Lorem ipsum </p> <h...
E:first-child HTML markup <div  class= ” blog ” > <h1> Title </h1> <p> Lorem ipsum </p> <p> Lorem ipsum </p> </div> CSS h1...
E:first-child HTML markup <div  class= ” blog ” > <h1> Title </h1> <div  class= ” story ” > <p> Lorem ipsum </p> <p> Lorem...
E[foo=&quot;warn&quot;] HTML markup <label> Naam </label><br /> <input  type= &quot;text&quot;  /> <label> Geslacht </labe...
CSS technieken toegelicht CSS in gebruik
CSS  –   In gebruik <ul><li>Google Fonts
Attribute styling
DropCaps
Suckerfish menu
Styling images </li></ul>
Source: http://www.google.com/webfonts?subset=latin&sort=pop
HTML markup <!-- Begin plaats in <head> --> <link  href= ”http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu”...
 
 
HTML markup <ul> <li><a  class= ” doc-icon ”   href= &quot;test.doc&quot; > Lorem ipsum dolor </a></li> <li><a  class= ” p...
HTML markup <ul> <li><a  href= &quot;test.doc&quot; > Lorem ipsum dolor </a></li> <li><a  href= &quot;test.pdf&quot; > Sit...
CSS li a[href$='.doc'] , li a[href$='.pdf'] , li a[href$='.xls'] , li a[href$='.png'] , li a[href*='twitter.com'] , li a[h...
CSS li a[href$='.doc']  { background :  url(doc.gif)  no-repeat; } li a[href$='.pdf']  { background :  url(pdf.gif)  no-re...
 
HTML markup <p> <span  class= ” dropcap ” > L </span> orem ipsum dolor sit amet,  consectetur adipiscing elit... </p> CSS ...
HTML markup <p  class= ” dropcap ” > Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p.dropcap  { font...
HTML markup <p  class= ” dropcap ” > Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p.dropcap  { font...
 
Source: http://www.flickr.com/photos/shadeofmelon/3584367692/
HTML markup <ul> <li><a  href= &quot;#&quot; > Item 1 </a></li> <li  class= &quot; parent &quot; ><a  href= &quot;#&quot; ...
 
ul li  { float :left; position :relative; background :#555;} ul li a  { color :#FFF; display :block; padding :5px 20px;} u...
 
ul li  { float :left; position :relative; background :#555;} ul li a  { color :#FFF; display :block; padding :5px 20px;} u...
 
ul li  { float :left; position :relative; background :#555;} ul li a  { color :#FFF; display :block; padding :5px 20px;} u...
 
ul li  { float :left; position :relative;} ul li a  { background :#555; color :#FFF; display :block; padding :5px 20px;} u...
 
Upcoming SlideShare
Loading in...5
×

CSS Techniques Explained

2,104

Published on

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

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

No Downloads
Views
Total Views
2,104
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
48
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS Techniques Explained

  1. 1. CSS Technieken toegelicht <ul>Robin Poort, CEO & Co-founder, FinishJoomla Joomla!dagen Nederland, april 2011 </ul>
  2. 2. Alle bestanden van de voorbeelden in deze presentatie zijn hier te vinden: http://www.finishjoomla.com/media/css-technieken-toegelicht.zip
  3. 5. CSS technieken toegelicht Een goede basis
  4. 6. CSS – Een goede basis <ul><li>Cheatsheets
  5. 7. Resets
  6. 8. Frameworks
  7. 9. Shorthand CSS
  8. 10. Specificity + !important
  9. 11. Clear & clearfix
  10. 12. Code-commenting </li></ul>
  11. 13. Source: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
  12. 14. Source: http://meyerweb.com/eric/tools/css/reset/
  13. 15. Source: http://960.gs/demo.html
  14. 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) ; }
  15. 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) ; }
  16. 18. Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
  17. 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= &quot;&quot; /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ Source: http://www.w3.org/TR/CSS2/cascade.html
  18. 20. !important
  19. 21. .example { color : red !important } Wint van <div class= ” example ” style= ” color : blue; ” >
  20. 22. <div class= ” clear ” ></div> & <div class= ” clearfix ” ></div>
  21. 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 ; }
  22. 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; }
  23. 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; }
  24. 26. Code commenting <ul><li>Voor jezelf later
  25. 27. Voor anderen na jou
  26. 28. Bij hacks en adjustments </li></ul>/* Als kopjes in je CSS file */ h3 { font-size : 1em;} h3 { font-size : 1em;} /* Achter bepaalde styles */
  27. 29. CSS technieken toegelicht Goed om te weten
  28. 30. CSS – goed om te weten <ul><li>Floating & position: absolute
  29. 31. Class stacking
  30. 32. .class.class
  31. 33. #id.class
  32. 34. CSS selectors </li></ul>
  33. 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; }
  34. 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; }
  35. 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; }
  36. 38. <div class= ” class stacking ” ></div>
  37. 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; }
  38. 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
  39. 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;}
  40. 42. .class.class
  41. 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; }
  42. 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;}
  43. 45. #id.class
  44. 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; }
  45. 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;}
  46. 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
  47. 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
  48. 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
  49. 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; }
  50. 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; }
  51. 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; }
  52. 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; }
  53. 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; }
  54. 56. CSS technieken toegelicht CSS in gebruik
  55. 57. CSS – In gebruik <ul><li>Google Fonts
  56. 58. Attribute styling
  57. 59. DropCaps
  58. 60. Suckerfish menu
  59. 61. Styling images </li></ul>
  60. 62. Source: http://www.google.com/webfonts?subset=latin&sort=pop
  61. 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; }
  62. 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; }
  63. 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>
  64. 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; }
  65. 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; }
  66. 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; }
  67. 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; }
  68. 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; }
  69. 75. Source: http://www.flickr.com/photos/shadeofmelon/3584367692/
  70. 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>
  71. 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;}
  72. 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;}
  73. 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;}
  74. 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;}
  75. 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;}
  76. 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;}
  77. 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;}
  78. 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;}
  79. 96. HTML markup <img class= ” img1 ” src= ”image.png” alt= ” image ” /> CSS img.img1 { background : #FFF; padding : 2px; border : 2px solid #AAA; }
  80. 97. HTML markup <img class= ” img2 ” src= ”image.png” alt= ” image ” /> CSS img.img2 { background : url(seamless.png) ; padding : 4px; }
  81. 98. HTML markup <img class= ” img3 ” src= ”image.png” alt= ” image ” /> CSS img.img3 { background : url(seamless.png) ; padding : 3px; border : 1px solid #000; }
  82. 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; }
  83. 100. Vragen?
  84. 101. <ul>Coupon code JD11NL </ul><ul>– 15% discount on all our products – Valid until 2 weeks from now – 50 coupons available </ul><ul>Robin Poort </ul><ul>[email_address] </ul><ul>Twitter: @finishjoomla </ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×