Problème d'Animation sous CSS3

par Cass' Dim 27 Avr 2014 - 12:50

Bonjour/Bonsoir!

http://nwthemes-preview.tumblr.com/ // http://morghit1.tumblr.com/

Voilà, ça fait plusieurs jours que j'essaie de comprendre l'effet qu'il y a tout en haut, sur les icons. Lorsqu'on passe la souris dessus, la partie blanchit et un texte apparaît. J'ai regardé les deux codes de ces thèmes et ils me semblent relativement compliqués (je pensais que c'était un peu plus simple). J'ai essayé de le faire par moi-même en me basant sur ce que je savais mais les codes n'ont pas arrêtés de beuguer, de ne pas fonctionner, etc.

Je voulais à la base le faire sur une image en forme de rond, est-ce que ça complique la chose?
Est-ce que quelqu'un pourrait m'explique étape par étape ce genre de réalisations s'il vous plaît?

Merci d'avance!

par Self Mar 29 Avr 2014 - 5:28

Bonjour,

Imaginons que vous avez la class .myclass sur votre image qui fait 50*50 pixels, nous allons y associer ce CSS :
(Panneau d'administration > Affichage > Images et couleurs > Couleurs >Feuille de style CSS)

Code:: .myclass:after{ content:"+"; width:50px; height:50px; line-height:50px; opacity:0; -webkit-transition:opacity .5s ease-in-out; transition:opacity .5s ease-in-out; position:absolute; top:0; left:0; bottom:0; right:0; background-color: #FFF; text-align:center; border-radius:100px; } .myclass:hover.myclass:after{ opacity:.95; -webkit-transition:opacity 1s ease-in-out 0.3s; transition:opacity 1s ease-in-out 0.3s; }

Alors le code n'est pas super simple à comprendre balancé comme cela mais je vais vous l'expliquer ligne par ligne (sous spoiler) :

Explication du code:

Commençons donc par le bloc .myclass:after et déjà ici une chose peut nous interpeller.
Si je connais un peu le CSS, j'ai compris que .myclass est le sélecteur (class) qui me permet de sélectionner mon image.
Mais :after... C'est également un sélecteur qui lui va nous permettre d'ajouter du contenu après notre image.

Code:: content:"+";

Puis voilà ci-dessus la ligne qui on s'en doute défini le contenu que l'on ajoute, ici +.

Code:: width:50px; height:50px;

Ici on lui donne une taille égale à celle de l'image qui est le parent de :after.

Code:: opacity:0;

Une opacité à 0 pour ne pas voir le contenu.

Code:: line-height:50px;

Line-height est ici une façon "détournée" pour nous de centrer verticalement notre contenu.

Code:: -webkit-transition:opacity .5s ease-in-out; transition:opacity .5s ease-in-out;

Ces deux lignes sont la transition "de retour" (lorsque l'on va enlever la souris de l'image), -webkit- sert simplement à faire comprendre cette ligne à Safari.

Code:: position:absolute; top:0; left:0;

Pour celles-ci on place le contenu en position absolute, qui positionne notre fameux contenu par rapport au bord haut et gauche de son parent, ici à 0 pixel de chaque bords (donc collé à eux) ce qui ne se voit pas étant donné que ce contenu à la même taille que sont parent.
Note: Il faut placer le parent en position relative afin de pouvoir placer le contenu en absolute.

Code:: background-color: #FFF;

Ici on défini la couleur de fond (blanche).

Code:: text-align:center;

Cette ligne elle centre le contenu horizontalement.

Code:: border-radius:100px;

Puis pour terminer avec ce bloc .myclass:after on arrondi les bords de 100px, ce qui nous donnera un rond Smile

.

Le bloc .myclass:hover.myclass:after est moins long (Libération cheers

), cette ligne déjà, on la lit : "Au passage de la souris sur l'élément (notre image) .myclass on applique à notre contenu .myclass:after" :

Code:: opacity:.95;

Une opacité de 0.95 (on garde une mini transparence) pour afficher le contenu.

Code:: -webkit-transition:opacity 1s ease-in-out 0.3s; transition:opacity 1s ease-in-out 0.3s;

Puis on retrouve notre transition cette fois pour faire apparaitre progréssivement notre contenu, on y précise que l'on veut la transition sur l'opacité, qu'on la veut d'une durée d'une seconde, avec un effet ease-in-out qui si je ne me trompe pas veut dire rapide au départ et plus lent vers la fin puis un délai de 0.3 seconde avant que commence la transition.

Bonne journée Wink

.

par Cass' Mar 29 Avr 2014 - 11:00

Merci beaucoup, je comprend mieux! (:

Problème d'Animation sous CSS3

Problème d'Animation sous CSS3

Re: Problème d'Animation sous CSS3

Re: Problème d'Animation sous CSS3