css techniques explained
DESCRIPTION
Presentation given by Robin Poort at the Joomladay 2011 in the NetherlandsTRANSCRIPT
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 "foo"
attribute set (whatever the value).
E[foo="warn"] Matches any E element whose "foo" attribute value
is exactly equal to "warn".
E[foo~="warn"] Matches any E element whose "foo" attribute value
is a list of space-separated values, one of which
is exactly equal to "warn".
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="warn"]
HTML markup
<label>Naam</label><br />
<input type="text" />
<label>Geslacht</label><br />
<label>
<input type="radio" />Man
</label>
<label>
<input type="radio" />Vrouw
</label>
CSS
input[type="text"] {
width: 200px;
border: 1px solid #CCC;
background: #F5F5F5;
padding: 5px;
}
input[type="radio"] {
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="test.doc">Lorem ipsum
dolor</a></li>
<li><a class=”pdf-icon” href="test.pdf">Sit amet
consect</a></li>
<li><a class=”xls-icon” href="test.xls">Lorem ipsum
dolor</a></li>
<li><a class=”png-icon” href="test.png">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="test.doc">Lorem ipsum dolor</a></li>
<li><a href="test.pdf">Sit amet consectetuer</a></li>
<li><a href="test.xls">Lorem ipsum dolor</a></li>
<li><a href="test.png">Sit amet consectetuer</a></li>
</ul>
<ul>
<li><a href="http://twitter.com/finishjoomla">Twitter</a></li>
<li><a
href="http://www.facebook.com/profile.php">Facebook</a></li>
<li><a href="http://www.linkedin.com/company/">Linkedin</a></li>
<li><a href="http://www.youtube.com/user/">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="#">Item 1</a></li>
<li class="parent"><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub item 1</a></li>
<li><a href="#">Sub item 2</a></li>
<li class="parent"><a href="#">Sub item 3</a>
<ul>
<li><a href="#">Sub sub item 1</a></li>
<li><a href="#">Sub sub item 2</a></li>
</ul>
</li>
<li><a href="#">Sub item 4</a></li>
</ul>
</li>
<li><a href="#">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
Twitter: @finishjoomla