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.

scoco

Auteur et principal acteur de ce blog.
Entre le Roller Derby, le longboard, les geekeries et d'autres trucs, je parle un peu de tout.

3 commentaires

Leave a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *