CSS3

odd/even

Waarschijnlijk de meest gebruikte en verwachte mogelijkheid

 /*elke 1ste - 3de - 5de - 7de etc ... */
li:nth-child(2n+1) { color: #333; }
li:nth-child(odd) { color: #333; }
 /*elke 2de - 4de - 6de - 8de etc ... */
li:nth-child(2n) { color: #333; }
li:nth-child(even) { color: #333; }

Enkel de eerste

li:nth-child(0n+1) { color: #333; }
li:nth-child(1) { color: #333; }

Enkel de eerste 3 bijvoorbeeld

li:nth-child(-n+3) { color: #333; }

Nog meer verwarrende voorbeelden

 /*de 4de - 8ste - 12de - 16de etc ... */
li:nth-child(4n) { color: #333; }

 /*de 4de - 8ste - 12de - 16de etc ... */
li:nth-child(4n+4) { color: #333; }

 /*de 1ste - 5de - 9de - 13de etc ... */
li:nth-child(4n+1) { color: #333; }

 /*de 3de - 8ste - 13de - 18de etc ... */
li:nth-child(5n-2) { color: #333; }

Browser compatibility

De meeste moderne browsers ondersteunen deze eigenschap reeds, en om IE te laten gehoorzamen naar deze regel, gebruik Jquery, deze ondersteund de regel in zijn selectors lijst, en het zal werken in IE.

HTML

<h2 class="trigger"><a href="#">Open & Toe</a></h2>
<div class="toggle_container">
	<div class="block">
		<h3>Inhoud titel</h3>
		<!--Content-->
	</div>
</div>

Afbeeldingen

1. h2_trigger_a.gif (67)
2. toggle_block_stretch.gif (49)
3. toggle_block_btm.gif (47)

CSS

h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px;
background: url(toggle_block_btm.gif) no-repeat left bottom;
}

Jquery/Javascript

<![CDATA[
$(document).ready(function(){
	//verstop de container
	$(".toggle_container").hide(); 

	//Verwissel 'open' en 'sluit' status
	$("h2.trigger").toggle(function(){
		$(this).addClass("active");
		}, function () {
		$(this).removeClass("active");
	});

	//Schuif op en neer als geklikt wordt
	$("h2.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow");
	});
});
]]>

Download

1. Preview/Voorbeeld (.jpg) (173)
2. PSD + (X)HTML/CSS (.zip) (63)

Jquery

<![CDATA[
$(document).ready(function(){
    $('html').addClass($.browser);
});
]]>

CSS specificiteit is het grootste hindernis nadat je denkt CSS te beheersen, deze spiekbrief (cheat sheet) kan je helpen bij het dag dagelijkse uitdokteren welke CSS regel nu wel, en als niet, waarom niet, uitgevoerd wordt. Je kan het ook proberen te begrijpen met dit Nederlandstalig artikel op Gigadesign

Download naar believen en behoefte

• CSS-Specificity-cheat sheet PNG (62)
• CSS-Specificity-cheat sheet XLS (35)
• CSS-Specificity-cheat sheet PDF (73)

HTML

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Foute volgorde

HTML

<!--[if ie]>
<link rel="stylesheet" type="text/css" href="internet_explorer.css" />
<![endif]-->
<style type="text/css" rel="stylesheet">
<!--
@import url(moderne_browsers.css);
-->
</style>

HTML

<style type="text/css" rel="stylesheet">
<!--
@import url(moderne_browsers.css);
-->
</style>
<!--[if ie]>
<link rel="stylesheet" type="text/css" href="internet_explorer.css" />
<![endif]-->

HTML

<!--[if ie]>
<link rel="stylesheet" type="text/css" href="internet_explorer.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="moderne_browsers.css" />

Juiste volgorde

HTML

<link rel="stylesheet" type="text/css" href="moderne_browsers.css" />
<!--[if ie]>
<link rel="stylesheet" type="text/css" href="internet_explorer.css" />
<![endif]-->

HTML

<div class="dropShadow dropBR">
<div class="drop1">
	<div>
		<div></div>
	</div>
</div>
<div class="drop2">
	<div>
		<div></div>
	</div>
</div>
<div class="drop3">
	<div>
		<div></div>
	</div>
</div>
<div class="drop4">
	<div>
		<div></div>
	</div>
</div>
<div class="drop5">
	<div>
		<div></div>
	</div>
</div>
<div class="dropContent">
<img src="images/zeldman.jpg">
</div>
</div>

CSS

.dropShadow {
position:relative;
z-index:1;
float:left;
}
/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }
.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2,
.dropShadow.dropBR .drop3, .dropShadow.dropBR .drop4,
.dropShadow.dropBR .drop5 {
top:0; left:0;/*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2,
.dropShadow.dropBL .drop3, .dropShadow.dropBL .drop4,
.dropShadow.dropBL .drop5 {
top:0; left:-16px;/*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2,
.dropShadow.dropTR .drop3, .dropShadow.dropTR .drop4,
.dropShadow.dropTR .drop5 {
top:-16px; left:0;/*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2,
.dropShadow.dropTL .drop3, .dropShadow.dropTL .drop4,
.dropShadow.dropTL .drop5 {
top:-16px; left:-16px;/*shadow positioned top-left*/
}
/*top & bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div,
.dropShadow .drop3 div, .dropShadow .drop4 div,
.dropShadow .drop5 div {
position:absolute;
top:8px;
right:0;
bottom:0;
left:8px;
border-style:solid;
border-color:#999;
}
.dropShadow .drop1 div {
margin:7px -1px -1px 7px;
border-width:1px 0 1px 0;
background-color:#999;
}
.dropShadow .drop2 div {
margin:6px -2px -2px 6px;
border-width:1px 0 1px 0;
}
.dropShadow .drop3 div {
margin:4px -4px -4px 4px;
border-width:2px 0 2px 0;
}
.dropShadow .drop4 div {
margin:2px -6px -6px 2px;
border-width:2px 0 2px 0;
}
.dropShadow .drop5 div {
margin:0 -8px -8px 0;
border-width:2px 0 2px 0;
}
/*left & right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div,
.dropShadow .drop3 div div, .dropShadow .drop4 div div,
.dropShadow .drop5 div div {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }
/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
border:1px solid black;
padding:2px;
background-color:#fff;
}

CSS

/* --------------------------------------------------------------
   Reset
-------------------------------------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, code, del,
dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1.5;
background: #fff;
margin: 1.5em 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight:400;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a img {
border: none;
}
input,textarea {
margin: 0;
}
/* Removes Firefox imposed outline */
a { outline: none; }
/* Clearing floats without extra markup  */
.wrapper {
display: inline-block;
}
.wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .wrapper { height: 1%; }
.wrapper { display: block; }
/* --------------------------------------------------------------
   Typography
-------------------------------------------------------------- */
/* This is where you set your desired font size. The line-heights
and vertical margins are automatically calculated from this.
The percentage is of 16px (0.75 * 16px = 12px). */
body { font-size: 75%; }
/* Default fonts and colors. */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea {
font-family: Helvetica, Arial, sans-serif;
}
/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; margin-bottom: 1.5em; }
h6 { font-size: 1em; }
/* Text elements
-------------------------------------------------------------- */
p { margin: 0 0 1.5em; }
ul, ol { margin: 0 1.5em 1.5em 1.5em; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dl dd { margin-left: 1.5em; }
abbr, acronym { border-bottom: 1px dotted #000; }
address { margin-top: 1.5em; font-style: italic; }
del { color: #000; }
a { color: #009; text-decoration: none; }
a:hover { text-decoration: underline; }
blockquote { margin: 1.5em; }
strong { font-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
pre, code { margin: 1.5em 0; white-space: pre; }
pre, code, tt { font: 1em monospace; line-height: 1.5; }
tt { display: block; margin: 1.5em 0; line-height: 1.5; }

CSS

@import "general.css";