Termes CSS clés employés : radial-gradient, border-radius.
Compatibilité navigateurs : IE9+, Firefox4+, Chrome5+, Safari5+, Opera10.5+.
Créer en pur CSS des boutons inhabituels : ici, des boutons d’ascenseur ronds.
Créer des boutons n’a rien de compliqué. Des boutons ronds, plus… Heureusement, la propriété border-radius permet d’obtenir une boîte avec des coins arrondis. Si l’angle (le rayon) de l’arrondi est égal à la moitié de la largeur d’un élément carré, celui-ci devient rond…
En HTML, un simple DIV conteneur, renfermant ici cinq éléments DIV :
<DIV class=cadre>
<DIV class="bouton">1</DIV>
…
<DIV class="bouton">5</DIV>
</DIV>
En CSS, rien de bien complexe non plus. D’abord la définition de l’élément conteneur :
DIV.cadre {width:500px;
margin: 5px auto 10px;
height:100px;
border: 10px double black;
}
Puis celle des éléments DIV de classe bouton. Ils sont définis comme flottants, leur taille étant ajustées pour que les cinq boutons tiennent dans le conteneur.
DIV.bouton {
float:left;
width:90px;
height:90px;
margin: 2px;
}
Ajoutez les propriétés de bordure, ainsi qu’un dégradé radial comme image de fond :
div.bouton {
…
border: 3px solid grey;
border-radius:45px;
background-image: radial-gradient(white, grey);
}
Puis définissez les propriétés de texte nécessaires pour obtenir de gros chiffres centrés.
DIV.bouton {
…
font-color:black;
font-weight : bolder;
font-size :58pt;
text-align: center;
vertical-align:middle;
}
Et enfin un petit effet, grâce à la pseudo-classe :hover, lorsque le pointeur est au-dessus d’un bouton…
DIV.bouton:hover {background-image: radial-gradient(yellow, orange);}
|
---|