Tutoriel CSS3 – Chapitre 1

Le CSS3, cela fait un moment qu’on en parle, mais qu’est-ce que ça apporte concrètement? A vrai dire, il est surtout puissant couplé au HTML 5 dont je parlerais bientôt. Surtout qu’actuellement, tous les navigateurs (suivez mon regard) ne sont pas encore complètement compatibles (là encore, un futur billet est prévu pour proposer des alternatives). D’ores et déjà nous pouvons regarder de plus près les nouveautés, mais le sujet étant particulièrement vaste nous feront cela en plusieurs chapitres… Voici donc le premier chapitre : ombres, arrondis, dégradés et effets de texte.

Les attributs de ce chapitre

Brut de fonderie, cela donne :

• Border-radius
• Box-shadow
• Gradient
• Text-shadow

Ce sont là les spécifications du W3C. Malheureusement, il faut pour s’assurer une interopérabilité certaine utiliser en plus les préfixes -moz- et -webkit-. En gros, pour border radius, nous aurons trois lignes. Regardons dans le détail :

Border-radius

Non compatible IE. Cet attribut permet de créer des bords arrondis avec une syntaxe relativement simple :

Pour la position du coin arrondi :

• on spécifie dans l’attribut top, bottom, left et right
• un top/bottom doit être couplé avec un left/right

exemple avec le cadre de gauche :

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; 

Pour le diamètre de l’arrondi :

• on indique la valeur qui va bien (20px par exemple), à l’attribut qui va bien
• on peut découper le diamètre en deux parties, abcisse et ordonné (par exemple 30px 20px)

exemple avec le cadre de droite :

border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
border-bottom-right-radius: 30px 20px;
-moz-border-radius-bottomright: 30px 20px;
-webkit-border-bottom-right-radius: 30px 20px;

Box-shadow

Idem, non compatible IE. Celui là va nous permettre de rajouter une ombre à n’importe quel cadre à l’aide de quatre valeurs. Dans l’ordre : décalage X de l’ombre, décalage Y de l’ombre, propagation du flou et couleur de l’ombre. On peut également ne pas spécifier de décalage voire coupler l’effet d’ombre avec l’arrondi. En pratique :

Voici le code utilisé pour les trois cadres respectifs, de gauche à droite:

box-shadow: 5px 5px 10px #777;
-moz-box-shadow: 5px 5px 10px #777;
-webkit-box-shadow: 5px 5px 10px #777;

box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;

box-shadow: 0px 0px 7px #000;
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; 

Gradient

Il y a donc la méthode simple : on définit un point de départ (haut gauche, bas, droite…) et une couleur, puis un point d’arrivée et une seconde couleur. Par exemple :

Code utilisé:

background: #FF8000; /*pour les navigateurs ne supportant pas les dégradés*/
background: -webkit-gradient(linear, left bottom, left top, from(#D16700), to(#FFA041));
background: -moz-linear-gradient(top,  #D16700,  #FFA041);

Après, on peut jouer sur des dégradé radiaux en définissant :

• pour les moteur mozilla le point de départ (top, left…) ainsi que les deux couleurs du dégradé
• pour les webkits, dans l’ordre : position de départ en deux morceaux (abcisse et ordonnée), rayon de départ, position d’arrivée (abcisse et ordonnée) et rayon du gradient.

Code utilisé :

background: #FF8000;
background: -webkit-gradient(radial, center bottom, 10, center bottom, 100, from(#D16700), to(#FFA041));
background: -moz-radial-gradient(bottom, #D16700,  #FFA041);

On peut dès lors imaginer facilement les possibilités de survol :

Code utilisé :

.bouton{
 box-shadow: 0px 0px 7px #333;
 -moz-box-shadow: 0px 0px 7px #333;
 -webkit-box-shadow: 0px 0px 7px #333;
 border-radius: 10px; -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 width: 200px; height: 100px;
 background: #FF8000; background:
 -webkit-gradient(linear, left bottom, left top, from(#D16700), to(#FFA041));
 background: -moz-linear-gradient(bottom,  #D16700,  #FFA041);
 }
 .bouton:hover{
 box-shadow: 0px 0px 10px #333;
 -moz-box-shadow: 0px 0px 10px #333;
 -webkit-box-shadow: 0px 0px 10px #333;
 width: 198px;
 height: 98px;
 margin: 1px;
 background: #FF8000;
 background: -webkit-gradient(linear, left top, left bottom, from(#D16700), to(#FFA041));
 background: -moz-linear-gradient(top,  #D16700,  #FFA041);
 }

Text-Shadow

On va terminer ce chapitre par les ombres sur texte. Le procédé est simple : [décalage X ] [décalage Y] [rayon du flou] [couleur]. ce qui peut donner pour un décalage en haut à gauche de 1px avec un ombre de 2px ayant pour couleur  #333 :

Kicoe's Blog

Code utilisé :

<style type='text/css'>
.textedemo1{
color: #6C4F3C;
font-size: 50px;
font-weight: bold;
text-align: center;
text-shadow: -1px -1px 2px #333;
}
</script>
<span class="txtdemo">>Kicoe's Blog</span>

On peut définir un « multiple ombrage » en modifiant la ligne du text-shadow pour rajouter autant d’ombres que l’on veut. Par exemple :


Kicoe's Blog


Code utilisé :

text-shadow: -2px -2px 5px #555, 2px 2px 5px #555;

Enfin, il est possible de définir que l’ombre soir projetée à l’intérieur de l’élément en rajoutant « inset » :

-moz-box-shadow:inset 0px 0px 10px #555;

On peut aller loin avec ceci, pour imaginer des effets 3D :

Kicoe's Blog

Code utilisé :

<style type='text/css'>
	.bouton{
		text-align: center;
		box-shadow: 0px 0px 7px #333;
		-moz-box-shadow: 0px 0px 7px #333;
		-webkit-box-shadow: 0px 0px 7px #333;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		width: 200px; height: 100px;
		background: #FF8000;
		background:-webkit-gradient(linear, left bottom, left top, from(#D16700), to(#FFA041));
		background: -moz-linear-gradient(bottom, #D16700, #FFA041);
		color: #FD8521;
		font-size: 25px;
		font-weight: bold;
		text-shadow: -1px -1px 1px #555, 1px 1px 1px #eee;
	}
	.bouton:hover{
		box-shadow: 0px 0px 10px #333;
		-moz-box-shadow: 0px 0px 10px #333;
		-webkit-box-shadow: 0px 0px 10px #333;
		width: 198px;
		height: 98px;
		margin: 1px;
		background: #FF8000;
		background: -webkit-gradient(linear, left top, left bottom, from(#D16700), to(#FFA041));
		background: -moz-linear-gradient(top, #D16700, #FFA041);
		text-shadow: -1px -1px 1px #555, 1px 1px 1px #eee;
	}
</style>
<div class="bouton">Kicoe's Blog</div>

C’est la fin de ce chapitre. Si vous lisez ceci, merci de ne pas vous être pendu avant la fin. A très bientôt pour le chapitre 2, j’y attaquerai les multiples backgrounds, colonnes…