Commençons donc par le plus simple, c'est-à-dire la transition. Nous allons manipuler ici les 4 propriétés CSS liées aux transitions mentionner précédemment.
Nous appliquerons des modifications sur un simple paragraphe qui contient un texte dans le but de créer ne sorte de bouton interactif. Nous garderons le code au plus simple pour l'instant de manière à nous concentrer que l'essentiel mais libre à vous de l'enrichir si vous souhaitez.Le principe de la transition repose sur :
Créons donc d'abord notre code de base. Côté HTML, contentons nous de :
<p>Accueil</p> et côté CSS, donnons lui une couleur de fond :
p { background:orange } Passons maintenant à en définir l'état de destination. Demandons simplement à ce que cette transition s'effectue au survol de la souris :hover
p:hover { background:green } Nous avons maintenant l'effet classique de changement de couleur au survol. Jusque là, rien d'exceptionnel. Ajoutons alors la transition.
Commençons par préparer la transition en spécifiant dans notre style initial que nous souhaitons animer une propriété et sa durée.
p {
background: orange;
transition-property:background;
transition-duration:1s;
}
Cet ajout devrait alors permettre de tester la transition.
Voici donc notre exemple complet :
<span id="p1">Bienvenue</span> et enfin le CSS.
#p1 {
padding:0.5em 1em;
border-radius : 0.4em;
background: #1e5799;
transition-property:background;
transition-duration:1s;
}
#p1:hover{
background: #ff8c00;
}
L'utilisation de pseudo-classes permet d'agir des divers états du contenu. En particulier :target, :focus ou :checked permettent de rendre actif un élément selon son état. dans notre cas, utilisons un petit lien pour cibler un élément de la page qui permettra de le faire apparaître progressivement.
Imaginons ce simple code HTML dont le lien associé à la balise a pointe vers l'identifiant du premier paragraphe :
<p id="p1">test</p>
<p id="click">
<a href="#p1">Click</a>
</p>Imaginons un code CSS de base pour notre premier paragraphe :
#p1 {
width:100px;
height:100px;
background-color:yellow;
}En y ajoutant une transition sur la couleur, nous pouvons obtenir ceci :
#p1 {
width:100px;
height:100px;
background-color:yellow;
transition-property:background-color;
transition-duration:2s;
}Ajoutons maintenant une nouvelle définition de la couleur associée à un :target
#p1:target{
background-color:red;
}Affichez la page dans le navigateur et cliquez sur le lien. Le paragraphe changera de couleur. Vous pouvons alors animer n'importe quelle propriété sur le même principe.
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.