WebKit est un projet open source permettant aux développeurs d’améliorer le rendu de page web. C’est une bibliothèque que chaque navigateur interprète à sa façon.
On notera que pour les principaux navigateurs, on ajoutera un préfixe à nos propriétés CSS, à savoir:
- -moz- pour Firefox (Gecko)
- -o- pour Opera
- -webkit- pour Safari et Chrome
- -ms- pour Internet Explorer
Webkit : Liste de propriété avec exemple
-
Border Radius (Pour arrondir les angles)
Exemple pour ajouter des bords arrondis sur un div, une images, …
img{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
Ici, les angles sont arrondis avec un « radius » de 10px.
-
Transition avec opacité (Jouer sur l’opacité)
Comment faire disparaître ou apparaître une image lors du passage de la souris.
img{
opacity: 1;
-webkit-transition: opacity 1s linear;}
img:hover {
opacity: 0;}
Ici, la transition se fait en jouant sur l’opacité de l’image.
-
Transition avec rotation (Faire tourner une images, div, …)
Faire tourner une image en passant la souris.
img{
webkit-transform: rotate(0deg);
-webkit-transition: all 0.5s ease-in-out;}
img:hover {
-webkit-transform: rotate(180deg);
-webkit-transition: all 0.5s ease-in-out;}
Ici, la transition se fait en jouant sur l’opacité de l’image.
Voici quelques liens pratiques pour voir d’autres propriétés.
- CSS Infos
- Outil pour les ‘border radius’
