Principaux apports CSS3

Border radius

https://www.cssmatic.com/border-radius

border-radius: 26px solid #000000;

Box shadow

https://www.cssmatic.com/box-shadow

box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

Transform

https://developer.mozilla.org/fr/docs/Web/CSS/transform

La propriété transform modifie l'espace de coordonnées utilisé pour la mise en forme visuelle. Grâce à cette propriété, il est possible de translater les éléments, de les tourner, d'appliquer des homothéties, de les distordre pour en changer la perspective.

Ex :

transform: scale(2, 2); /* multiplie par deux la taille d'une image par exemple */
transform: rotate(0.5turn); /* Rotation de 180° */
transform: translate(120px, 50%); /* Translation de 120px sur l'axe des x et de 50% sur l'axe des y */

Transitions

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Les transitions CSS permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période.

Ex :

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    transition: width 2s ease, height 2s ease, background-color 2s ease, transform 2s ease;
}
.box:hover {
background-color: #FFCCCC; width: 200px; height: 200px; transform: rotate(180deg);
}

Spécifications de la vitesse de la courbe de transition :

ease - Début lent puis rapide puis fin lente
linear - Rapidité constante
ease-in - Début lent
ease-out - Fin lente
ease-in-out - Début et fin lentes
cubic-bezier(n,n,n,n) - Pour définir ses propres valeurs

Combinaison de transition et de transform

Ex :

#wrapper-img img {
  transition: transform 2s ease;
}
#wrapper-img img:hover {
  transform: scale(1.2, 1.2);
  /* transform: translate(-50%, -50%); */
  cursor: pointer;
}

coopernet Réussir son site web et ses applications de la conception à la réalisation