CSS3
Compatibilité
Pour maximiser la portabilité du code on déclare 3 fois: la première fois sans préfixe, puis avec préfixes: -moz- (pour moteur Gecko: FireFox), -webkit- (pour moteur WebKit: Safari et Chrome)
-o- pour Opéra et -ms- pour IE (moteur Trident)
Bords arrondis
border-radius:3px
Sélecteurs avancés
#maTable TR:nth-child(odd) {
background-color:#CCCCCC;
}
| col1 | col2
|
|---|
| 1.1 | 1.2
|
| 2.1 | 2.2
|
| 3.1 | 3.2
|
| 4.1 | 4.2
|
Colonnes
column-count: 2;
column-width: 30%;
column-rule: 1px solid gray;
text-align:justify;
Mon texte pour tester CSS3. Mon texte pour tester CSS3. Mon texte irrégulier pour tester CSS3. Mon texte pour tester CSS3.
Mon texte pour tester CSS3. Mon texte pour tester CSS3. Mon texte pour tester CSS3. Mon texte pour tester CSS3. Mon texte pour tester CSS3.
Mon texte pour tester CSS3. Mon texte pour tester CSS3. Mon texte pour tester CSS3 et HTML5. Mon texte pour tester CSS3.
Mon texte pour tester CSS3. Mon texte pour tester CSS3, pour tester CSS3. Mon texte pour CSS3. Mon texte pour tester CSS3 et aussi HTML5.
Arrières-plans multiples
séparer par une virgule, compatibilité ascendante. La 1ère déclarée est au premier plan. Si couleur: dernier plan.
background-image:url(fond1.jpg),url(fond2.jpg)
idem pour autres sous propriétés de background, position et repeat
Couleurs
transparence
opacity:0.5;
ou via fonction rgba(0,255,0,0.5)
Là encore redondance pour préserver compatibilité: appeler d'abord rgb puis rgba
ombres
box-shadow et text-shadow
Arguments: décalage droite, décalage bas, nb pixels flous, [dilatation], couleur.
Les 3 premières valeurs sont en px ou %
On peut combiner en séparant valeurs par virgule (comme pour background-image)
dégradés
arguments: direction, suivi de la liste des couleurs (on peut inclure des transparences en imbriquant rgba)
to top, to bottom, to left, to right, 45deg
background:-moz-linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
radial-gradient: idem mais en donnant le centre du dégradé: center en général, ou une position X Y.
Transformations
Permet d'appliquer une ou des transformation(s) géométrique(s) sur un élément de type bloc. Si plusieurs, séparer par espace.
transform: translateX(2px);
transform: rotateZ(20deg) scaleX(2);
transform: scale(2);
Animations
On valorise la différence entre l'affichage "standard" et celui au moyen des pseudo-classes :hover,:active,:focus, etc...
On doit définir explicitement sur quelle(s) propriété(s) va se jouer l'animation.
a:hover {
color:yellow; font-size:x-large;
transition-property:color font-size;
transition-duration:1s;
transition-timing-function:ease;
transition-delay:1s;
}
Seuls les 2 premiers paramètres sont obligatoires. "ease" veut dire ici "ralentir". Autres valeurs: ease-in,ease-out,ease-in-out