Cours HTML

CSS 3 : usage avancé

CSS Transitions

Les CSS3 permettent de réaliser des habillages et des transitions. Elles demandent une rédaction plus complexe, de plusieurs lignes afin d'appliquer les css à tous les navigateurs.

Seuls les navigateurs récents reconnaissent les propriétés CSS3,

Voici comment on les rédige :

propriété CSS3 : valeur;

• -moz-propriété : valeur; pour les navigateurs Firefox < 4.
• -o-propriété : valeur; pour opéra
• -ms-propriété : valeur; pour Internet explorer
• -webkit-propriété : valeur; pour Chrome <10, Safari <5.1 et Android ainsi que Safari Mobile <5.0

Les transitions

Les transitions permettent de changer d'état avec la seule aide des CSS. On peut modifier la couleur par exemple, avec un fondu, en utilisant la pseudo class :hover d'un lien, comme dans l'exemple suivant :

test de bouton

Voici le code qui utilise la couleur du fond comme transition avec un délai de 3s :

    a.bt-vert {
	background:#3C0;
	padding:10px;
	color:#000;
	text-decoration:none;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-boder-radius:10px;
	-moz-transition: background 3s; /* Firefox 4 */
	-webkit-transition: background 3s; /* Safari and Chrome */
	-o-transition: background 3s; /* Opera */
}
a.bt-vert:hover{ background:#060;color:#CCC;}

    

Transitions-timing-function

Les feuilles de styles CSS3 proposent de nombreuses transitions.

La propriété transition-timing-function

Elle permet de règler la manière dont se déroulera la transition. Elle a plusieurs valeurs possibles :

• Ease (valeur par défaut) : effet de départ lent, puis action rapide et fin ralentie
• Linear : effet de vitesse constante
• Ease-in: effet de départ len
• Ease-out: effet de fin ralentie
• Ease-in-out: effet avec un départ et une fin lente
• Cubic-bezier(n,n,n,n) : on définit nos valeurs (de 0 à 1)

Pour comprendre la différence entre les différents effets de vitesse de transition :(timing), comme l'accélération cette page montre un excellent exemple :

http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_speed

ou celle-ci :

http://css3.bradshawenterprises.com/transitions/

Exemples

Exemple 01 : changement de taille au survol

div {
    width: 100px;
    height: 100px;
    background: #1CCF6D;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

Exemple 02 : plusieurs changements au survol

div {
    width: 100px;
    height: 100px;
    background:#F39;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: all ease 2s;
}

div:hover {
    width: 300px;
	background:#03C;
}

Exemples 03 : Transition de rotation avec une image

#trans03 {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
}

#trans03:hover {
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg);
}

Pour voir plus de transitions avec des images : http://css3.bradshawenterprises.com/cfimg/