5 améliorations de conception CSS3 que vous pouvez utiliser aujourd'hui

Les feuilles de style en cascade (CSS) sont le langage de la conception Web, et la prochaine génération de propriétés de conception CSS ne fait que gruger le bit à libérer.

Êtes-vous impatient de commencer à les utiliser, mais vous ne savez pas par où commencer?

Bien que de nombreuses nouvelles propriétés ne soient pas encore "officielles" , certains navigateurs ont déjà implémenté de nombreuses fonctionnalités des spécifications CSS Level 3 à venir.

Le problème est que beaucoup de navigateurs, notamment Internet Explorer, n’en ont pas.

L'astuce pour utiliser ces nouvelles fonctionnalités CSS3 consiste à les traiter comme des améliorations de conception .

Une amélioration du design (dont je parle dans mon nouveau livre Parler dans les styles: les bases du CSS pour les concepteurs Web ) Tout ce que vous ajoutez aux conceptions de votre site augmente son attrait visuel sans diminuer sa facilité d'utilisation si le style n'est pas rendu.

Cela peut être un appel délicat, car il existe une frontière fine entre l'amélioration et la diminution de la facilité d'utilisation:

• Exemple d'amélioration de la conception : Utiliser le rayon de bordure pour arrondir les coins de la boîte, créant ainsi un design plus attrayant. Cependant, si les coins ne sont pas rendus, le site est toujours aussi utilisable.
• Exemple d'utilisation facile à la conception : utiliser une valeur de couleur RGBA dans l'arrière-plan d'éléments qui se chevauchent et qui doivent tous être visibles, en espérant que les éléments supérieurs soient semi-transparents. Cela empêchera certaines personnes d'utiliser le site, diminuant ainsi la facilité d'utilisation de la page.

Voyons maintenant 5 propriétés CSS3 différentes avec lesquelles vous pouvez commencer à jouer dès maintenant, à condition de toujours garder à l'esprit qu'elles ne doivent être utilisées que pour améliorer votre conception et ne pas être utilisées pour la convivialité du site.

Ceci est la conception originale, avant d'appliquer des améliorations de conception CSS3

1. Couleurs transparentes

Navigateurs compatibles : Apple Safari 4, Firefox 3.0.5, Google Chrome 1

RGBA vous permet de contrôler l'opacité d'un remplissage de couleur particulier, que ce soit pour les couleurs de texte, d'arrière-plan, de bordure ou d'ombre.

Si vous définissez la transparence des couleurs, vous devez spécifier la valeur de couleur à l'aide des valeurs hexadécimales de notation RVB, avec une valeur A supplémentaire comprise entre 0 (transparent) et 1 (opaque).

rgba(0-255,0-255,0-255,0-1)

Vous devez également inclure une simple valeur de couleur RVB ou hexadécimale pour les autres navigateurs:

.topbox {color: rgb(235,235,235);color: rgba(255,255,255,0.75);background-color: rgb(153,153,153);background-color: rgba(0,0,0,0.5);border-color: rgb(235,235,235);border-color: rgba(255,255,255,0.65);}

La bonne nouvelle est qu'il existe également une solution de secours, du moins pour les couleurs d'arrière-plan, dans Internet Explorer, qui prend en charge les couleurs transparentes à l'aide d'un filtre et de styles conditionnels:

Remarque: WordPress ne pouvant pas afficher le code ci-dessus dans le contenu de cet article, il a été inclus en tant qu'image. Par conséquent, vous devrez saisir ce code manuellement.

2. coins arrondis

Navigateurs compatibles : Apple Safari 3, Firefox 1, Google Chrome 1

Le rayon de la bordure définit la courbure de chaque coin de la boîte, comme s'il y avait un cercle imaginaire dans le coin avec un rayon spécifique (r):

border-radius: r;

Bien que border-radius fasse partie de la spécification CSS3 à venir, le projet Mozilla (Firefox) et Webkit (Safari et Chrome) ont tous deux implémenté leurs propres versions, qui doivent être incluses pour une compatibilité optimale entre les navigateurs:

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

Vous pouvez également définir le rayon pour les coins individuellement:

3. Ombres de texte

Navigateurs compatibles : Apple Safari 3, Firefox 3.0.5, Google Chrome 1

Ajoutez une ombre sous un texte, en contrôlant les décalages gauche / droite et haut / bas, ainsi que la couleur:

text-shadow: x y blur color;

Vous pouvez combiner l'ombre du texte avec une couleur transparente pour contrôler l'obscurité de l'ombre:

text-shadow: -2px 2px 10px rgba(0,0,0,.5);

Vous pouvez également inclure plusieurs ombres de texte simplement en répétant les valeurs séparées par une virgule:

text-shadow:   0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75);

4. Ombres Box

Navigateurs compatibles : Apple Safari 4, Firefox 3, Google Chrome 1

L'ajout d'une ombre portée à une case de l'écran suit le même format que l'ajout d'une ombre de texte:

box-shadow: x y blur color;

Tout comme les text-shadows, Mozilla et Webkit ont implémenté leur propre vocabulaire avant le standard CSS final:

-webkit-box-shadow: 0 0 10px rgb(0,0,0);-moz-box-shadow: 0 0 10px rgb(0,0,0);box-shadow: 0 0 10px rgb(0,0,0);

Vous pouvez ajouter plusieurs ombres simplement en incluant plusieurs valeurs séparées par des espaces:

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),15px -20px 20px rgba(255,0,0,.75);box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),15px -20px 20px rgba(255,0,0,.75);

5. Arrière-plans multiples

Navigateurs compatibles : Apple Safari 1.3, Google Chrome 1

L'inclusion de plusieurs images d'arrière-plan dans un seul élément nécessite simplement l'ajout d'ensembles de valeurs supplémentaires aux propriétés d'arrière-plan, séparées par des virgules. Vous devez inclure une seule image d'arrière-plan comme sauvegarde pour les autres navigateurs:

background-image: url(astro-127531.png);background-image: url(astro-127531.png),url(Hubble-112993.png);background-repeat: no-repeat;background-position: bottom left;background-position: bottom left, top right;

BONUS SPÉCIAL

Rotation n'importe quoi!

Navigateurs compatibles : Apple Safari 4, Firefox 3.5, Chrome 1

Bien que cela ne soit pas encore une partie de la spécification CSS3, Webkit a implémenté sa propre propriété de transformation, avec laquelle Mozilla suit. Transform peut inclure un certain nombre de types de valeurs différents, mais l'une des améliorations les plus intéressantes et les plus utiles est la rotation:

-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);

Apparence dans les navigateurs qui ne supportent pas CSS3 (par exemple Opera 9)

Voir l'exemple de travail en direct (nécessite Safari 4+, Firefox 3.5+ ou Chrome 1+)

Jason Cranford Teague est l'auteur de Parler dans les styles: les bases du CSS pour les concepteurs Web . Obtenez-le maintenant de Amazone pour 27% de réduction sur le prix de vente.

Utilisez-vous des améliorations de conception sur vos sites Web? S'il vous plaît partagez vos exemples avec nous!

• ← 250+ ressources pour vous aider à devenir un expert CSS
• 200+ icônes vectorielles gratuites: 'Primo' →