• Like
  • Save
CSS Techniques Explained
Upcoming SlideShare
Loading in...5
×
 

CSS Techniques Explained

on

  • 2,036 views

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

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

Statistics

Views

Total Views
2,036
Views on SlideShare
1,965
Embed Views
71

Actions

Likes
1
Downloads
32
Comments
0

1 Embed 71

http://www.joomladagen.nl 71

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS Techniques Explained CSS Techniques Explained Presentation Transcript

    • CSS Technieken toegelicht
        Robin Poort, CEO & Co-founder, FinishJoomla Joomla!dagen Nederland, april 2011
    • Alle bestanden van de voorbeelden in deze presentatie zijn hier te vinden: http://www.finishjoomla.com/media/css-technieken-toegelicht.zip
    •  
    •  
    • CSS technieken toegelicht Een goede basis
    • CSS – Een goede basis
      • Cheatsheets
      • Resets
      • Frameworks
      • Shorthand CSS
      • Specificity + !important
      • Clear & clearfix
      • Code-commenting
    • 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-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) ; }
    • 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) ; }
    • 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 {} /* 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
    • !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 .wrapper { background : #FFF; border : 5px solid #29BDBD; margin : 10px; padding : 10px; } .floatbox { background : #FFF; border : 5px solid #333; padding : 10px; float : right ; }
    • 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; }
    • 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; }
    • Code commenting
      • Voor jezelf later
      • Voor anderen na jou
      • Bij hacks en adjustments
      /* Als kopjes in je CSS file */ h3 { font-size : 1em;} h3 { font-size : 1em;} /* Achter bepaalde styles */
    • CSS technieken toegelicht Goed om te weten
    • CSS – goed om te weten
      • Floating & position: absolute
      • Class stacking
      • .class.class
      • #id.class
      • CSS selectors
    • 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; }
    • 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; }
    • 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; }
    • <div class= ” class stacking ” ></div>
    • 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; }
    • 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
    • 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;}
    • .class.class
    • 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; }
    • 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;}
    • #id.class
    • 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; }
    • 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;}
    • 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
    • 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
    • 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
    • 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; }
    • 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; }
    • 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; }
    • 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; }
    • 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; }
    • CSS technieken toegelicht CSS in gebruik
    • CSS – In gebruik
      • Google Fonts
      • Attribute styling
      • DropCaps
      • Suckerfish menu
      • Styling images
    • 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” 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; }
    •  
    •  
    • 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; }
    • 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>
    • 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; }
    • 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; }
    •  
    • 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; }
    • 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; }
    • 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; }
    •  
    • 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; > 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>
    •  
    • 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;}
    •  
    • 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 { 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;}
    •  
    • 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 { 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;}
    •  
    • 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 { 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 { 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;}
    •  
    •  
    •  
    • HTML markup <img class= ” img1 ” src= ”image.png” alt= ” image ” /> CSS img.img1 { background : #FFF; padding : 2px; border : 2px solid #AAA; }
    • HTML markup <img class= ” img2 ” src= ”image.png” alt= ” image ” /> CSS img.img2 { background : url(seamless.png) ; padding : 4px; }
    • HTML markup <img class= ” img3 ” src= ”image.png” alt= ” image ” /> CSS img.img3 { background : url(seamless.png) ; padding : 3px; border : 1px solid #000; }
    • 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; }
    • Vragen?
      • Coupon code JD11NL
        – 15% discount on all our products – Valid until 2 weeks from now – 50 coupons available
        Robin Poort
        [email_address]
        Twitter: @finishjoomla