Webkit CSS (Bords arrondis, Opacité, Rotation)

Geek à plein temps !

  • Accueil   /  Dev   /  
  • Webkit CSS (Bords arrondis, Opacité, Rotation)

Webkit CSS (Bords arrondis, Opacité, Rotation)

3 commentaires sur Webkit CSS (Bords arrondis, Opacité, Rotation) , , , , , , ,

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, …

    Bords Arrondis CSS 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.

    Webkit : Image avec opacité

    		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.

    Image avec rotation

    		 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.