C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

La transition

Voir le sujet précédent Voir le sujet suivant Aller en bas 
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. Bravo !
MessageSujet: La transition   Lun 20 Déc 2010, 10:09
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: La transition   Jeu 04 Aoû 2011, 05:27
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://casa-images.bb-fr.com
avatar
{ Membre }
{ Membre }

Féminin 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!
MessageSujet: Re: La transition   Jeu 13 Sep 2012, 09:30
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.mavectragts.fr
avatar
{ Membre }
{ Membre }

Masculin 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 Smile

Pour finir meme un transitions : 2s; suffit Smile
MessageSujet: Re: La transition   Lun 22 Oct 2012, 07:08
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: La transition   
Revenir en haut Aller en bas
 

La transition

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Transition Logo CSS
» Ajouter un effet de transition sur les liens
» Effet de transition qui décale l'icône vers le bas
» Effet de transition fondue dans des onglets.
» Transition Image --> texte

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Bases de CSS-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit