La transition Bouton_activeLa transition Bouton_hoverLa transition Fb-hoverLa transition Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
La transition EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
La transition EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
La transition EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
La transition EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
La transition EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
La transition EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
La transition EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
La transition EmptySam 11 Fév 2023, 06:04 par Krager

Le deal à ne pas rater :
SSD interne Crucial BX500 2,5″ SATA – 500 Go à 29,99€
29.99 €
Voir le deal

Partagez
 

La transition

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Invité
Invité




La transition Empty
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   La transition EmptyLun 20 Déc 2010, 10:09
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



La transition Empty
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
MessageSujet: Re: La transition   La transition EmptyJeu 04 Aoû 2011, 05:27
Revenir en haut Aller en bas
http://casa-images.bb-fr.com
Lili
Lili
{ Membre }
{ Membre }

Féminin Messages : 24



La transition Empty
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   La transition EmptyJeu 13 Sep 2012, 09:30
Revenir en haut Aller en bas
http://www.mavectragts.fr
spacy59
spacy59
{ Membre }
{ Membre }

Masculin Messages : 6



La transition Empty
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   La transition EmptyLun 22 Oct 2012, 07:08
Revenir en haut Aller en bas
Contenu sponsorisé




La transition Empty
MessageSujet: Re: La transition   La transition Empty
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 (q)
» La transition (messages)
» Transition pages web
» Problème de transition [résolu]
» La transition du "retour" ? [Résolu]

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 | Signaler un abus | Cookies | Forum gratuit