CSS3, partie 1 : Découverte par l’exemple, construire un bouton en CSS3.

J’entame par cet article une série complète qui sera développé autour du CSS3.

En effet, sont implémentation dans les différents moteurs de recherches devenant plus satisfaisant, je me lance à l'assault de cette nouvelle version!

Déjà commençons par le plus intéressant : l’ensemble du codes css3 téléchargeable sur le site de Veign.

Sur lequel d’ailleurs nous pouvons aussi retrouver un guide du css2.

Alors pour découvrir autant se jeter dedans, c’est un peu rapide mais c’est un bon exemple pour en découvrir la richesse et se faire une première idée.

Cas pratique: un bouton en css3

Lien web

Donner une class ou un id à votre lien web et direction la feuilles de style css, où nous allons lui donner un fond, une taille, une couleur pour la typo et une bordure.

.cssbouton{

background-color: #2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 10px;
padding-right: 10px; border: 1px thin solid;border: 1px thin solid;
color:#fff
}

Ce qui nous donne:

Lien web

Voila une base de travail pour travailler le design maintenant.
Continuons notre cheminement, et ajoutons une bordure arrondi avec le code suivant.

-moz-border-radius
Au niveau du code, et avec une valeur de 10px :
.cssbouton{
background-color: #2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
border: 1px thin solid;
-moz-border-radius: 5px
}
Ce qui nous donne:

Lien web

Histoire de s'amuser un peu nous allons choisir notre typo:
@font-face {
font-family: Bebas;src: url(../fonts/Bebas.eot);
}

@font-face {
font-family: "Bebas";src:local("Bebas"), url(../fonts/Bebas.ttf) format("truetype");
}
Pour cela, il faut donc upload votre typo sur votre ftp dans un fichier et en indiqué le chemin dans le css.
Ici nous avons donc chargé la typo par css pour le navigateur.
Pour l’appeler pour le bouton rien de plus simple !

font-family:'Bebas',Helvetica,Sans-Serif;
Au niveau du code nous en arrivons à
.cssbouton{

background-color: #2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
border: 1px thin solid;
-moz-border-radius: 5px;
font-family:'Bebas',Helvetica,Sans-Serif;

}
Ce qui nous donne visuellement:

Lien web

Nous allons maintenant ajouter une ombre portée au bouton avec la propriété:
-moz-box-shadow
Ce qui nous donne implementé dans le code:
.cssbouton{

background-color: #2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
border: 1px thin solid;
-moz-border-radius: 5px;
font-family:'Bebas',Helvetica,Sans-Serif;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);

}

Lien web

Nous allons maintenant ajouté l'effet de roll over en changeant les couleurs entre les deux:
.cssbouton{

background-color: #2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
border: 1px thin solid;
-moz-border-radius: 5px;
font-family:'Bebas',Helvetica,Sans-Serif;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);

}
.cssbouton:hover{

background-color: #fff;
color:#2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
border: 1px thin solid;
-moz-border-radius: 5px;
font-family:'Bebas',Helvetica,Sans-Serif;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);

}

Lien web

Vous pouvez maintenant vous faire plaisir, changer les paramètres, couleur and co :p
Par contre attention, ne marche pas sur l'ensemble des navigateurs, mais cela sera étudié dans un autre article que l'on retrouvera bientôt en lien ici.