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’