Démonstration de -prefix-free

Cette page de démonstration comporte 6 situations de stylisation CSS3 avec indication du code source standard de chacune d'elle. La deuxième partie de cette page permet de se rendre compte du travail réalisé par -prefix-free pour votre navigateur.

Les différentes propriétés testées

transform » scale

#zoom .img1{transform: scale(0.5);}
#zoom .img2{transform: scale(0.75);}
#zoom .img3{transform: scale(1);}

transition » background

Transition au survol…

#transition p{
  background: #F0F0F0;
  border-radius: 30px 0 30px 0;
  transition: all 3s;
}
#transition p:hover{
  background: #BB2222;
  border-radius: 0 30px 0 30px;
  color: #FFF
}

animation » rotate

@keyframes rotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
#rotate img{
  animation: rotate 3s infinite;
}

animation » translate + scale + opacity

@keyframes multianim{
  from{transform:translate(0) scale(0.5); opacity: 0;}
  to{transform:translate(100px) scale(1.5); opacity: 1;}
}
#multianim img{
  animation: multianim 2s infinite alternate;
}

background » linear-gradient

Un dégradé linéaire…

#gradient p{
  background: linear-gradient(#96C7CC, #FFF);
}

background » radial-gradient

Un dégradé radial complexe…

#radial-gradient p{
  background-color:white;
  background-image:
  radial-gradient(#BB2222 9px, transparent 10px),        
  repeating-radial-gradient(#BB2222 0, #BB2222 4px, transparent 5px, transparent 20px, #BB2222 21px, #BB2222 25px, transparent 26px, transparent 50px);    
  background-size: 30px 30px, 90px 90px; 
  background-position: -30px 30px;
}

Code CSS modifié par -prefix-free

Ci-dessous, la feuille de style modifiée par -prefix-free et adaptée à votre navigateur.