Effets visuels avec les styles CSS

Comme je le dis souvent, je ne suis ni designer, ni graphiste. La conception d’un thème se heurte souvent à de simples considérations techniques comme ne pas savoir faire un dégradé, ou donner l’impression de volume. Lors de la conception du thème actuel, j’ai compensé ce manque de rendu « graphique » en utilisant uniquement les styles CSS.

En plus d’un rendu un peu moins plat, l’autre avantage non négligeable est la légèreté, puisque nous évitons le chargement de fichiers images plus ou moins lourds.

Pour ce thème, j’ai utilisé deux techniques:

  • Les coins arrondis: malheureusement non visibles avec Internet Explorer,
  • L’ajout de ligne foncées et claires entre deux zones de couleurs différentes.

En CSS, les coins arrondis n’étaient, jusqu’à présent, accessibles qu’aux utilisateurs de Firefox, et des navigateurs utilisant le même moteur de rendu).

Coins arrondis
Coins arrondis

La norme CSS 3 devrait changer les choses:

div#header-menu {
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
}

Pour résumer la première ligne est utilisée par le moteur de rendu de FireFox, et la seconde, par les navigateurs déjà compatibles CSS 3. D’autres effets sont ou seront disponibles, comme l’ajout de zones d’ombre par exemple.

L’autre technique utilisée est bien connue des dessinateurs. Il consiste à accentuer le contraste aux bordures des zones de couleurs.

Prenons l’exemple de ce site: l’entête est globalement constituée de trois blocs de couleurs différentes.

Ajout de bordures
Ajout de bordures

A gauche, j’ai pris des couleurs assez proches du thème Titan. Au milieu, j’ai changé les couleurs pour obtenir quelque chose de plus neutre. A droite, j’ai ajouté deux lignes, une foncée en bordure du bloc supérieur, et une plus claire juste en dessous.

Détail de l'ajout des bordures
Détail de l'ajout des bordures

L’effet d’optique n’est pas énorme, mais il est suffisant pour changer l’allure du bandeau.

Conclusion

Il est parfaitement possible d’obtenir quelques effets visuels, en ayant uniquement recours aux styles CSS. Cette technique permet, en plus, d’alléger le poids des pages.

L’arrivée de CSS 3 devrait généraliser cette pratique, et réduire le nombre d’images utilisées aujourd’hui dans la conception des thèmes.

Quelques références

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *