Invité Invité
| La transition Niveau: Facile | Par: Teal | Validé par: ...| En date du: 20/12/10 Aujourd'hui nous allons apprendre un effet très sympathique et qui donne du style, la transition. Vous voulez un aperçu, en voici un: http://mkprofil.franceserv.com/ (regardez la navigation, il y a un fond qui apparaît en 5 secondes). Allez c'est parti!Dans votre CSS, je veux par exemple un fond qui apparaît en 5 secondes quand mon curseur le survole : - Code:
-
/**MKprofil style CSS **/ header nav a { position: relative; color: white; text-decoration: none; padding: 6px 22px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } header nav a:hover, header nav a:focus { text-decoration: none; background-color: rgba(255,255,255,0.1); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } N'oubliez ce n'est qu'un exemple! « Mais pourquoi as-tu mis all ?» Alors je vous explique, d'après Alsacréation, la valeur "all" est une valeur par défaut qui animera toute les propriétés animables. Non seulement il y a d'autres valeurs comme : property qui animera que ces propriétés parmi cette liste: http://www.w3.org/TR/css3-transitions/#properties-from-css- et none pour qu'aucune propriété soit animée. C'est ok? Ok, beh merci d'avoir lu ce tutoriel. | | |
|
Kaiji
Blanche-Neige
Messages : 5578
| FAQ Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici : http://www.css-actif.com/f17-aide-css-xhtml | | |
|
Lili
{ Membre }
Messages : 24
| super! le titre survolé s'agrandit doucement maintenant... j'ai juste copié ces 4 lignes dans le hover: -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s;
Merciiiiiiiiiiiiiiiiiiiiiiii Bon aprem! | | |
|
spacy59
{ Membre }
Messages : 6
| Bonjour lili . Tu peut tout simplement appliquer cette regle dans ta balise original. Je veut dire par la que tu as forcement 2 état. Un etat d'origine et un état modifier. L'etat modifier est generalement avec un pseudo élément hover active... Donc tu a juste a mettre ton code dans la balise d'etat d'origine et l'effet prendra effet Pour finir meme un transitions : 2s; suffit | | |
|