104
Maîtrise des CSS
Figure 5.12
Le fichier de sprites
CSS utilisé sur le site
Clearleft.
Cette.technique.permet.de.réduire.le.nombre.de.requêtes.transmises.par.le.navigateur.web.
au.serveur.et.d’accélérer.considérablement.les.temps.de.téléchargement..En.outre,.avec.les.
sprites,.les.boutons,.les.icônes.et.les.diverses.images.sont.conservés.dans.un.même.emplacement,.afin.de.faciliter.la.gestion..On.y.gagne.donc.sur.tous.les.plans.
Survol CSS 3
La.spécification.CSS 3.inclut.un.certain.nombre.de.propriétés.comme.text-shadow,.boxshadow. et. border-radius. pour. créer. des. boutons. sophistiqués. sans. utiliser. la. moindre.
image..Pour.créer.ce.genre.de.bouton,.commencez.par.le.code.de.notre.premier.exemple :.
a {
display: block;
width: 6.6em;
height: 1.4em;
line-height: 1.4;
text-align: center;
text-decoration: none;
border: 1px solid #66a300;
background-color: #8cca12;
color: #fff;
}
Ensuite,.ajoutez.des.bords.arrondis.et.une.ombre.portée..Vous.pouvez.aussi.attribuer.au.texte.
du.bouton.une.légère.ombre.portée.(voir.Figure 5.13).
a {
display: block;
width: 6.6em;
height: 1.4em;
line-height: 1.4;
text-align: center;
text-decoration: none;
border: 1px solid #66a300;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: #8cca12;
color: #fff;
text-shadow: 2px 2px 2px #66a300;