Souscrire
Blog iamvdo.meSuite à un test de Xavier Zalawa (@7studio sur twitter) sur un menu Lavalamp en CSS, j’ai voulu le tenter aussi mais sans utilisation d’élements supplémentaires. Je suis donc passé par les pseudo-éléments, mêmes si ceux-ci ne peuvent êtres animés qu’avec Firefox.
Principe
Lors du hover sur un li du menu, le pseudo-élément ::after du dernier li est modifié.
Pour cela, j’utilise le sélecteur (tilde) qui permet de sélectionner le dernier li frère, comme ceci :
li:hover ~ li:last-child::after{
/* modification de la taille et de la position */
}De plus, les tailles sont fixées en em, ce qui permet un redimensionnement de la taille du texte.
Dommage...
L’état :focus est géré, mais pas identique au :hover, puisque le :focus s’applique sur les a et non sur les li. Il est donc impossible de sélectionner le dernier frère d’un parent d’un lien...
Les transitions CSS appliquées aux pseudo-éléments sont compatibles avec Firefox uniquement.
Code complet utilisé
<ul>
<li><a href="#">✿</a></li><!--
--><li><a href="#">Lorem</a></li><!--
--><li><a href="#">Ipsum</a></li><!--
--><li><a href="#">Consectetur adipisicing</a></li><!--
--><li><a href="#">Sit amet</a></li>
</ul>PS : les commentaires entre les li permettent d’éviter le problème de white-space bien connu.
ul{
position:relative;
height:2em;
margin:30px 100px;
padding:0;
white-space:nowrap;
}
ul li{
display:inline;
text-align:center;
}
ul li:nth-child(1) a{width:2em;}
ul li:nth-child(2) a{width:4em;}
ul li:nth-child(3) a{width:4em;}
ul li:nth-child(4) a{width:12em;}
ul li:nth-child(5) a{width:5em;}
ul li a{
display:inline-block;
box-sizing:border-box;
padding:.4em .2em;
color:#51C3FA;
text-decoration:none;
text-shadow:0 1px 0 white;
background-color:transparent;
transition:background-color .3s ease;
}
ul li a:hover,ul li a:focus{
color:#c351fa;
background-color:rgba(255,255,255,.4);
transition:background-color .3s ease .4s;
}
ul li a:focus{
border-bottom:3px solid #c351fa;
}
ul li:last-child::after{
content:"";
position:absolute;
left:0px;
bottom:-3px;
display:block;
width:2em;
height:3px;
background:#ccc;
border-bottom:1px solid rgba(255,255,255,.8);
transition: all .5s ease;
}
ul li:hover ~ li:last-child::after,
ul li:lastchild:hover::after{background:#C351FA;}
ul li:nth-child(1):hover ~ li:last-child::after{left:0;width:2em;}
ul li:nth-child(2):hover ~ li:last-child::after{left:2em;width:4em;}
ul li:nth-child(3):hover ~ li:last-child::after{left:6em;width:4em;}
ul li:nth-child(4):hover ~ li:last-child::after{left:10em;width:12em;}
ul li:last-child:hover::after{left:22em;width:5em;}PS : attention, le code CSS n’est pas préfixé.
Tous vos retours sont appréciés !
#1par Geoffrey, le 19 janvier
Génial !
Je m’étais penché sur la chose en essayant de trouver une méthode "automatique" pour ne pas avoir à donner manuellement la dimension du pseudo-élément, mais, ce fut un désastre.
Pour la gestion du focus il va falloir attendre les sélecteurs de CSS4, mais là c’est déjà bien :D
Bravo !
PS : ta méthode de sélection au cas par cas avec nth-child me rappelle qu’il existe une méthode CSS2, pour les curieux : http://blog.goetter.fr/post/1330959...
#2par Kikimagik, le 26 janvier
Une petite question me turlupine... Cela n’a rien à voir avec ton test ci-dessus désolé : comment sur ton "textarea", celui par lequel j’écris actuellement ce message, bloque tu son étirement sur l’horizontal ?? Une question à laquelle je ne trouve pas de réponse, sauf ici ou je remarque qu’il est impossible d’étirer le "textarea" sur sa largeur !
#3par css3create, le 26 janvier
@Kikimagik : Tu as 2 solutions :
Utiliser les
Utiliser la règle CSS prévue pour ça :
min-width,max-widthetwidthsurtextarea.resize: both, vertical, horizontal ou none#4par moioli888, le 29 janvier
Encore un super example... Et un grand merci d’avoir mit le code source ! :)
#5par Kikimagik, le 1er février
Je te remercie pour toutes tes infos, tous tes tutos, et toutes cette bonne volonté que tu nous fais partager à travers chaque démos. Cela fais plaisir d’avoir des développeurs comme toi. Continue ainsi !
#6par G11, le 1er février
Pas trop dur avec les dc ?
#7par Beben Koben, le 22 février
Awesome web, glad can be here ♥
Nice to meet you master ☻
Beben Koben si bloglang anu ganteng kalem tea \m/
#8par meetic, le 12 mars
merci
#9par TUF, le 18 mars
Merci pour ce post, ça m’as bien aidé ! J’ai réussi a un faire un menu du même style mais compatible gecko, webkit et firefox. J’ai en faite ajouté un li vide en dernière position que je déplace et agrandis en fonction du qui est survolé. Je le séléctionne de cette manière :nav ul #id du li:hover #border (#border étant le li vide).
Je ne sais pas si vraiment très diffèrent de ton menu mais ça permet d’éviter l’utilisation de pseudo-élément.
#10par css3create, le 18 mars
@TUF : Oui c’est très bien ! C’est exactement le principe du menu de Xavier que j’ai cité en introduction. Ici, je voulais justement me passer de cet élément supplémentaire.
#11par TUF, le 18 mars
Ha oui exacte, je n’avais pas vu ce lien ! Merci, bonne continuation :)
#12par Manumanu, le 26 mars
Je me demandais, pourquoi utilises-tu ::after / ::before au lieu de simplement :after / :before ?
#13par Manumanu, le 26 mars
Après quelques recherches, je viens de trouver qu’il s’agissait de la dénomination de pseudo-éléments pour la différencier des pseudo-classes :after et :before. Sauf que je ne comprend pas leur but, sachant que l’association de plusieurs pseudo-classes fonctionne très bien, et que rien n’y oppose de contre-indication...
Du coup, ma question se porte sur les exemples du site (page "after-before"), ou cette fois tu emploies donc ces pseudo-éléments sur des éléments réels, sur lesquels sont applicables des pseudo-classes directement (ainsi que d’autres fois dans les tutoriels) : Pourquoi ?
#14par gcyrillus, le 29 avril
Bonjour,
Pour le focus sur les item de liste "LI" , c’est faisable avec l’attribut "tabindex" qui fait parti des attributs "globaux" en html5.
#15par H3, le 6 mai
Magnifique !
#16par Mow. , le 13 mai
Super ! comme tout le reste du site d’ailleurs... ( ;
Un grand merci !