Le langage CSS/Le modèle de boîte

Un livre de Wikilivres.
Sauter à la navigation Sauter à la recherche


Ombrage des boites[modifier | modifier le wikicode]

La propriété box-shadow existe depuis CSS3. Elle crée un effet d'ombrage qui suit le contour de la boite, avec quatre arguments possibles : abscisse, ordonnée, diffusion, couleur.

CSS3 WebKit Gecko
box-shadow -webkit-box-shadow -moz-box-shadow

Exemples[modifier | modifier le wikicode]

Cette boite affiche une ombre rectangulaire en bas à droite.

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
}



Cette boite affiche une ombre arrondie en bas à droite.

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



Cette boite affiche une ombre diffuse en rouge en haut à gauche.

div {
	border: 1px solid;
	box-shadow: -10px -10px 5px red;
	-webkit-box-shadow: -10px -10px 5px red;
	-moz-box-shadow: -10px -10px 5px red;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



Cette boite affiche une ombre diffuse en rouge, vert et bleu, en bas à droite.

div {
	border: 1px solid;
	box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-webkit-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-moz-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}


Taille des boites[modifier | modifier le wikicode]

La propriété box-sizing est apparue en CSS3[1] pour simplifier les couches.

W3C WebKit Gecko
box-sizing -webkit-box-sizing -moz-box-sizing

Elle prend un seul argument, parmi les valeurs suivantes :

  • content-box
    boites intérieures normales.
  • border-box
    boites intérieures autour de la bordure.
  • inherit
    comportement hérité du parent.

Exemple[modifier | modifier le wikicode]

div.bigbox {
	width: 40em;
	border: 1em solid red;
	min-height: 5em;
}

div.littlebox {
	width: 50%;
	border: 1em solid;
	box-sizing: border-box; /* cela définit les boites contre la bordure du conteneur */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	float: left;
}
<div class="bigbox">
	<div class="littlebox" style="border-color: green;">Boite de gauche.</div>
	<div class="littlebox" style="border-color: blue;">Boite de droite.</div>
</div>

Rendu :

Boite de gauche.
Boite de droite.

Les deux boites sont côte-à-côte au-dessus du texte.

Références[modifier | modifier le wikicode]

  1. http://www.w3.org/TR/css3-ui/#box-sizing