Utiliser un CMSLe CSS 3 facilite considérablement la vie du développeur et du designer. Il permet de créer des effets très intéressants avec seulement quelques lignes de code. En premier lieu, on a les angles arrondis qui permettent d'améliorer le design. On peut appliquer des coins arrondis à tous les éléments DIV et la syntaxe est d'utiliser le style border-radius. On pourra utiliser un code qui ressemble à :
border-radius:19px;
Et les 4 coins de votre élément seront arrondis. Évidemment, vous devez ajouter une bordure visible ou un arrière-plan pour que vous puissiez voir l'effet. Mais cette syntaxe est la norme du W3C et la compatibilité n'est pas garantie avec tous les navigateurs. De ce fait, on devra utiliser un code tel que :
border-radius:19px;
-webkit-border-radius:19px;
-ms-border-radius:19px;
-moz-border-radius:19px;
-o-border-radius:19px;
Cela paraît un peu confus, mais c'est le même style qu'on répète en utilisant les préfixes de Firefox, de Chrome, d'Opera et d'Internet Explorer. Ce type de répétition est nécessaire pour que tous les visiteurs puissent bénéficier de l'effet.
Les effets de texte avec le CSS 3
Après les angles arrondis, on passe aux ombrages sur le texte. La syntaxe est simplement text-shadow. Ce style accepte 4 valeurs, à savoir, l'emplacement de l'ombre sur les axes X et Y, le niveau du flou et la couleur de l'ombre comme dans cet exemple :
.conteneur {
background: #f5f5f5;
-moz-box-shadow: 4px 4px 8px #000;
-webkit-box-shadow: 4px 8px 5px #000;
box-shadow: 4px 4px 8px #000;
}
Donc, cet exemple propose une ombre de 4 pixels sur les axes X et Y, le flou est à 8 pixels et la couleur est noire. Le flou de 8 pixels indique un niveau assez élevé et vous devrez le baisser un peu pour que l'effet soit plus visible. Comme avec les coins arrondis, nous sommes obligés de répéter ce style avec les préfixes respectifs des différents navigateurs. Le style text-shadow possède aussi deux attributs optionnels avec spread et inset. Ce dernier permet de créer un ombrage interne et spread permet de propager l'ombre sur une dimension indiquée en pixels. Noter que cet effet fonctionne aussi en spécifiant uniquement les coordonnées de X, Y et de la couleur. Le degré de flou est facultatif, mais fortement recommandé.
Les effets d'ombres sur les blocs
Les effets d'ombres sur les blocs sont similaires à ceux du texte sauf qu'on utilisera la syntaxe box-shadow. Les mêmes attributs sont valables et on ne doit pas oublier les préfixes. Quand on veut faire cet effet, il faut faire attention aux marges entre les éléments. Si la marge est trop faible, l'effet risque de se chevaucher ce qui résultera d'un design horrible. Il faut toujours tenir compte de la marge quand on fait cet effet. Un exemple de cet ombrage de bloc pourrait être sur le menu de navigation horizontal juste sous la bannière.
Le CSS 3 permet aussi de configurer des arrières-plan multiples. La syntaxe est similaire au CSS 2, mais on va ajouter plusieurs sources d'images et nous allons exploiter le style background-position. Ainsi, on peut le voir ci-dessous:
.fondmultiple {
background-color: #666;
background-image: url(fond1.png),url(fond2.png), url(fond3.png),url(fond4.png);
background-position: 30% 92%, 105% -140px, 0 -160px, 50% 99%;
background-repeat: no-repeat,no-repeat, no-repeat, repeat-x;
height: 500px;
width: 80%;
}
La première ligne du code indique la couleur d'arrière-plan, ensuite, on configure les différentes images séparées par une virgule et on règle leurs ordres d'affichage avec background-position.
Les dégradés avec le CSS 3
Les dégradés sont les plus difficiles à créer en CSS 3, car les navigateurs se battent pour imposer leurs propres normes. Ainsi, le code suivant est un dégradé en CSS 3 en respectant les consignes du W3C :
background: linear-gradient(to bottom, #000000 0%,#333333 50%,#FFFFFF 100%);
Ce code créera un dégradé de type linéaire avec trois couleurs, à savoir le noir, le gris et le blanc. Chaque couleur est positionnée respectivement à 0, 50 et 100 % de l'élément pour avoir une homogénéité parfaite. Mais ce code ne fonctionnera sur aucun navigateur ! Au lieu, vous devrez le répéter en ajoutant tous les préfixes nécessaires pour assurer une interopérabilité optimale. Mozilla propose un générateur de dégradés CSS 3 sous la forme d'une extension qui pourra vous faire gagner beaucoup de temps.