Comme, nous l’avons vu précédemment CSS3 est un outil qui contient des propriétés bien utiles pour réaliser des pages web. Nous allons voir maintenant un exemple pratique CSS3 (tutoriel) en construisant un bouton complètement en CSS3.
Pour réaliser ce bouton nous allons utiliser quelques propriétés vu précédemment, mais aussi en introduire de nouvelles :
- Les gradients : permet de faire des dégradés de couleurs
- Les ombres sur textes : permet d’ajouter des ombres à un texte
- Les arrondis : permet d’arrondir les angles
En plus de cela, nous allons jouer sur la transparence à l’aide de RGBA. Vous verrez tout ceci est très simple.
Le bouton en HTML
On va commencer par construire le bouton en HTML. Il s’agit d’un lien tout simple pour commencer :
<a href="http://www.artenet.fr" class="">Voici un bouton CSS3</a>
A ce lien il faudra ajouter les propriétés CSS qui correspondent à ce qu’on souhaite réaliser, c’est à dire : un ombre sur le texte, des coins arrondis, une couleur de fond et un dégradé (avec gestion du hover, etc.).
Débuter avec le style du texte
Rien de mieux pour débuter que d’ajouter le style du texte du bouton. Nous allons simplement définir les propriété de la balise a :
a {
padding: 6px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
text-shadow: 1px 1px 2px #000;
text-decoration: none;
font-weight: bold;
}
Comme vous le voyez le propriété text-shadow ajoutera une ombre sur votre texte.
Ajouter les gradient CSS3
Nous allons ajouter les gradients en CSS3. Pour se faire nous allons créer une classe CSS et lui ajouter les bonnes propriétés :
.gradient {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.3));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
20 background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: no-repeat;
}
.gradient:hover {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: no-repeat;
}
.gradient:active {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0,2)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: no-repeat;
}
Il faut ajouter au bouton la classe .gradient qui vient d’être créée :
<a href="http://www.artenet.fr" class="gradient">Voici un bouton CSS3</a>
Ajouter un arrondi en CSS3
Pour ajouter un arrondi, Nous allons simplement rajouter la classe CSS suivante :
.arrondi {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px 6px;
}
Ensuite, nous allons ajouter la classe nouvellement créée sur notre bouton :
<a href="http://www.artenet.fr" class="gradient arrondi">Voici un bouton CSS3</a>
Ajouter une couleur de fond
Nous sommes maintenant arrivés à la fin de ce petit tutoriel qui vous explique comment réaliser un bouton CSS3.
Il ne nous reste plus qu’à ajouter une couleur de fond à votre bouton. Une fois de plus on va créer une classe pour cela :
.bleu {
background-color: #4169e1;
}
La classe .bleu est naturellement à ajouter au paramétrage de notre bouton de cette façon :
<a href="http://www.artenet.fr" class="gradient bleu arrondi">Voici un bouton CSS3</a>
Résultat et conclusion
Si tout c’est bien passé vous pouvez maintenant admirer le résultat :
Bouton réalisé en CSS3
Comme vous l’avez vu, les propriétés CSS3 permettent de réaliser beaucoup de choses intéressantes. Nous avons aussi choisi de réaliser des classes séparées pour chaque élément ce qui nous permet de la réutiliser par la suite.