effets css 3 - David Dufour

EFFETS CSS 3
Arrondir les bords des DIV
Pour arrondir les angles d'un DIV, il suffit d'utiliser la propriété CSS3 border-radius.
Exemple :
#anglesArrondis{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Il est possible également de définir l'arrondi de chacun des angles en procédant de
la manière suivante:
#anglesArrondis{
-moz-border-radius: 5px 10px 0 5px;
-webkit-border-radius: 5px 10px 0 5px;
}
Ajouter un dégradé en background d'un DIV
Pour ajouter un dégradé en background à un DIV, il suffit de paramétrer l'élément de
la manière suivante.
- linéaire ou circulaire
- centré ou non
- la couleur d'origine + la couleur de destination + l'opacité
NB: La couleur peut être définie en RGB+Alpha ou en exadécimal+Alpha
Exemple :
#gradient{
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(255, 255, 255,
0.8)), to(rgba(208, 208, 208, .9)));
}
© www.davidufour.be
1
Ajouter une ombre portée à une image
Pour ajouter une ombre portée à une image (ou à toute autre élément HTML)
il suffit d'utiliser la propriété CSS3 box-shadowde la manière suivante.
- la première valeur indique le décalage horizontal vers la droite
- le deuxième correspond au décalage vertical vers le bas
- le chiffre suivant indique la force du dégradé
- la couleur
Exemple :
#shadow{
-webkit-box-shadow: 4px 4px 12px #aaa;
-moz-box-shadow: 4px 4px 12px #aaa;
}
Modifier l'opacité d'un DIV au survol
Pour modifier l'opacité d'un DIV au survol, il suffit d'utiliser la propriété CSS3
webkit-transitionde la manière suivante.
- indiquer la valeur de l'opacité
- indiquer le mode de transition (dans ce cas:"opacity")
- indiquer la fonction
- indiquer le temps de l'animation
Exemple : (dans ce cas-ci, le DIV s'éclaircit lors d'un survol)
#opacity{
-opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 1s;
}
© www.davidufour.be
2
#opacity:hover{
-opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 1s;
}
Modifier la couleur de texte d'un lien au survol
Pour modifier la couleur de texte d'un lien au survol, il suffit d'utiliser un nouvelle fois
la propriété CSS3 webkit-transition.
- indiquer le mode de transition (dans ce cas:"property:color;")
- indiquer le temps de l'animation
Exemple : (dans ce cas-ci, le DIV s'éclaircit lors d'un survol)
#linkColor{
-webkit-transition-property: color;
-webkit-transition-duration: 1s;
-moz-transition-property: color;
-moz-transition-duration: 1s;
}
© www.davidufour.be
3
Agrandir un DIV à son survol
Pour agrandir un DIV à son survol, il suffit d'utiliser la propriété CSS3 webkittransform.
- indiquer la fonction de transition dans le DIV
- indiquer la ou les fonction(s) de transformation dans le DIV Hover
NB:
- Le chiffre indiqué après scale correspond à la grandeur du DIV.
- On peut appliquer au DIV d'autres transformations (dans ce cas-ci: rotate).
Exemple :
#scale{
--webkit-transition: all 1s ease-in-out;
}
#scale:hover{
-webkit-transform: rotate(360deg) scale(2);
}
© www.davidufour.be
4