A quand la démocratisation du CSS3 ?!

Publié par Gui dans CSS

Boutons créés avec les styles CSS 3

Ça fait quelque temps déjà que l’on voit des bribes de ce que sera la norme CSS 3 mais elle n’a toujours pas été finalisée par le W3C. Cependant, certains des plus innovants navigateurs tels Firefox, Safari ou encore Chrome le gèrent déjà (via l’utilisation de propriétés particulières tout de même). Modifié le 10/05/2010

Pourtant, cette version permettrait de créer des interfaces riches, ergonomiques et plus visuelles. On pourrait se passer des traditionnelles astuces pour créer des bords arrondis avec des images ou ajouter des ombres portées sur Photoshop !

Si le CSS 3 était adopté par tous les navigateurs, nous pourrions par exemple avoir de jolis boutons entièrement stylés en CSS.

Les avantages sont évidents :

  • Nul besoin d’images ou de Javascript
  • Boutons redimensionnables à souhaits (selon la taille du texte)
  • Applicable à tout élément HTML (input, a …)

Mais pour bien comprendre, quelques explications :

Les styles CSS3

Voici le code HTML pour nos boutons :

<p>Button <button class="btn">My Button</button></p>
<p>Input type Button <input type="button" class="btn" value="My Button" /></p>
<p>Blue Button <input type="button" class="btn blue" value="My Button" /></p>
<p>Disabled Blue Button <input type="button" class="btn blue disabled" value="My Button" /></p>
<p>Link <a href="#" class="btn">My link</a></p>

Et voici le code CSS associé :

.btn{
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
	border:1px solid #ccc;
	-moz-border-radius:0.3em; /* Coins arrondis pour Firefox */
	-webkit-border-radius:0.3em; /* Coins arrondis pour Safari / Chrome */
	padding:3px 6px;
	background:#ddd;
	/* Degradé linéaire (Firefox) */
	background:-moz-linear-gradient(center top , #fff 0%, #fff 5%, #ddd) repeat scroll 0 0 #F6F6F6;
	text-decoration:none;
	color:#333;
	cursor:pointer;
	letter-spacing:0.05em;
	text-shadow:1px 1px #f5f5f5; /* Ombre portée sur le texte */
}

Comportement au rollover sur le bouton :

.btn:hover{
	 /* Degradé inversé linéaire (Firefox) */
	background:-moz-linear-gradient(center top , #fff, #ddd) repeat scroll 0 0 #F6F6F6;
 	-moz-box-shadow:0 0 0.4em #aaa; /* Ombre portée du bouton (Firefox) */
 	-webkit-box-shadow:0 0 0.4em #aaa; /* Ombre portée du bouton (Safari / Chrome) */
}

Pour les voir en démo, cliquez ici !

Elle est chouette ta démo, mais si je suis sur Internet Explorer, je fais comment ?

Eh bien, tu peux te renseigner sur Smashing Magazine pour adapter au mieux la feuille de style pour IE avec tout un tas de jolis filters 🙂

Autres exemples et infos

5 commentaires

  1. Florian Brochard

    Alors pour corriger ta première phrase, le W3C n’a pas fini d’écrire les specs de la version 3 des CSS. Donc les navigateurs implémentent actuellement une version « brouillon » des CSS et pas définitive. C’est pour ça qu’ils ne se pressent pas trop.
    Un jour la création de site Web sera simple pour les développeurs…

  2. Gui
  3. Référencement

    Merci pour le petit cour, bonne continuation.

  4. Julien Vernet

    Un choix difficile : continuer à développer des sites internet avec un rendu correct sous IE6 (en passant par des « astuces » longues et fastidieuses) ou d’ores et déjà utiliser CSS3…

Laisser une réponse


Post shadow