105
Mise en forme des liens
-moz-box-shadow: 2px 2px 2px #ccc;
-webkit-box-shadow: 2px 2px 2px #ccc;
box-shadow: 2px 2px 2px #ccc;
}
Figure 5.13
Un bouton à bords
arrondis réalisé
entièrement en CSS.
Pour.recréer.le.dégradé,.Safari 4.bêta.prend.en.charge.une.valeur.propriétaire.appelée.–webkit-gradient.. En. temps. normal,. je. ne. conseille. jamais. d’utiliser. du. code. propriétaire,.
mais.ce.cas.est.révélateur.de.la.direction.que.pourraient.emprunter.les.CSS.à.l’avenir..Cette.
valeur.propriétaire.prend.un.certain.nombre.d’arguments,.dont.le.type.de.dégradé.(linéaire.
ou.radial),.son.orientation.(ici,.du.haut.à.gauche.vers.le.bas.à.droite),.une.couleur.de.départ,.
une.couleur.finale.et.d’éventuelles.étapes.intermédiaires..Évidemment,.si.vous.ne.souhaitez.
pas.utiliser.ce.code.propriétaire,.vous.pouvez.réaliser.votre.propre.image.de.dégradé.à.la.
place.
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-image: -webkit-gradient(linear, left top, left bottom, É
from(#abe142), to(#67a400));
background-color: #8cca12;
color: #fff;
text-shadow: 2px 2px 2px #66a300;
-moz-box-shadow: 2px 2px 2px #ccc;
-webkit-box-shadow: 2px 2px 2px #ccc;
box-shadow: 2px 2px 2px #ccc;
}
Pour.finir,.Safari.inclut.une.autre.propriété.propriétaire,.appelée.box-reflect,.qui.permet.de.
créer.des.reflets.d’objets..Elle.contient.plusieurs.arguments,.dont.la.position.et.la.distance.
du.reflet.ainsi.qu’une.image.de.masque..Détail.intéressant,.vous.pouvez.utiliser.la.valeur.
–webkit-gradient. pour. générer. ce. masque. de. manière. automatique.. Ici,. je. positionne.
le.reflet.à.2 pixels.en.dessous.du.bouton.et.j’utilise.un.masque.de.fondu.vers.le.blanc.(voir.
Figure 5.14).
a {
display: block;
width: 6.6em;