106
Maîtrise des CSS
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;
-webkit-box-reflect: below 2px -webkit-gradient (linear, left top, left bottom,
„ from(transparent), color-stop(0.52, transparent), to(white));
}
Figure 5.14
Ce bouton à bords
arrondis a été réalisé
avec l’extension CSS
de Safari.
Un.débat.s’est.engagé.pour.savoir.si.ces.types.d’effets.devaient.ou.non.être.réalisés.en.CSS..
Il.n’est.donc.pas.certain.que.ces.propriétés.finissent.par.trouver.place.dans.la.spécification.
officielle..Comme.ces.techniques.sont.en.outre.mal.prises.en.charge.par.les.navigateurs,.il.
n’est.pas.judicieux.de.les.utiliser.dans.un.environnement.de.production..Cela.ne.doit.cependant.pas.vous.empêcher.de.vous.amuser.dans.vos.sites.personnels.si.vous.comprenez.bien.
qu’il.s’agit.de.code.CSS.invalide.qui.pourra.être.supprimé.ou.modifié.dans.les.prochaines.
versions.du.navigateur..
Info-bulles CSS
teurs.lorsque.vous.survolez.des.éléments.qui.possèdent.une.balise.de.titre..Plusieurs.développeurs.ont.créé.leurs.propres.info-bulles.en.combinant.du.JavaScript.et.des.CSS..Il.est.
cependant. possible. de. créer. des. info-bulles. entièrement. en. CSS. à. l’aide. des. techniques.
de.positionnement..Pour.bien.fonctionner,.cette.technique.requiert.un.navigateur.moderne.
compatible.avec.les.standards,.comme.Firefox..Elle.n’est.pas.à.inclure.dans.l’arsenal.des.
outils.quotidiens,.mais.elle.montre.combien.les.CSS.avancées.sont.efficaces.et.fait.imaginer.
ce.qui.sera.possible.quand.la.prise.en.charge.s’améliorera..
Comme.avec.tous.les.exemples.de.ce.livre,.vous.devez.commencer.par.du.code.HTML.bien.
structuré.et.sémantiquement.cohérent :
Maîtrise des CSS
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;
-webkit-box-reflect: below 2px -webkit-gradient (linear, left top, left bottom,
„ from(transparent), color-stop(0.52, transparent), to(white));
}
Figure 5.14
Ce bouton à bords
arrondis a été réalisé
avec l’extension CSS
de Safari.
Un.débat.s’est.engagé.pour.savoir.si.ces.types.d’effets.devaient.ou.non.être.réalisés.en.CSS..
Il.n’est.donc.pas.certain.que.ces.propriétés.finissent.par.trouver.place.dans.la.spécification.
officielle..Comme.ces.techniques.sont.en.outre.mal.prises.en.charge.par.les.navigateurs,.il.
n’est.pas.judicieux.de.les.utiliser.dans.un.environnement.de.production..Cela.ne.doit.cependant.pas.vous.empêcher.de.vous.amuser.dans.vos.sites.personnels.si.vous.comprenez.bien.
qu’il.s’agit.de.code.CSS.invalide.qui.pourra.être.supprimé.ou.modifié.dans.les.prochaines.
versions.du.navigateur..
Info-bulles CSS
teurs.lorsque.vous.survolez.des.éléments.qui.possèdent.une.balise.de.titre..Plusieurs.développeurs.ont.créé.leurs.propres.info-bulles.en.combinant.du.JavaScript.et.des.CSS..Il.est.
cependant. possible. de. créer. des. info-bulles. entièrement. en. CSS. à. l’aide. des. techniques.
de.positionnement..Pour.bien.fonctionner,.cette.technique.requiert.un.navigateur.moderne.
compatible.avec.les.standards,.comme.Firefox..Elle.n’est.pas.à.inclure.dans.l’arsenal.des.
outils.quotidiens,.mais.elle.montre.combien.les.CSS.avancées.sont.efficaces.et.fait.imaginer.
ce.qui.sera.possible.quand.la.prise.en.charge.s’améliorera..
Comme.avec.tous.les.exemples.de.ce.livre,.vous.devez.commencer.par.du.code.HTML.bien.
structuré.et.sémantiquement.cohérent :