Hop ! J’ai parlé la semaine dernière d’une série d’astuces qui porterait sur tout ce qui touche au web sur mon twitter. Je vous présente donc le premier volume : la propriété counter en css ! Amusez-vous bien !
Utilisation de cette propriété :
- Slider
- Présentation
- Mise en page avec php
- Javascript(effet grâce aux numéros)
- etc …
A bientôt !
Commentaire par le hollandais volant le 26 novembre 2011 à 13 h 20 min
Merci pour le tuto !
Je connaissais le truc depuis un moment, mais tellement peu de sites exploitent ça, alors que ça peut être génial pour des sommaires, numéroter les figures, les tableaux, les titres…
Peut aussi utiliser plusieurs compteurs à la fois, dans le même content.
Par exemple pour faires des titres :
– un compteur qui incrémente à chaque H2
– un compteur qui incrémente à chaque H3
– un compteur qui incrémente à chaque H4
Et ensuite l’affcher, du style :
content: counter(counth2) ‘ – ‘ counter(counth3) ‘ – ‘ counter(counth4);
Exemple là : http://lehollandaisvolant.net/tuto/css/exemple18.html
Et le CSS que j’utilise sur toutes les pages, pour tous les titres : http://lehollandaisvolant.net/index/counter.css
Les possibilités sont assez énormes et pratique. Comme tu vois dans l’exemple, le compteur des H1 est en chiffres romains. On peut utiliser ça, ainsi que des lettres, capitales ou pas, des lettres grecques, arméniennes (suivant les navigateurs après).
La liste : « decimal », « decimal-leading-zero », « georgian », « lower-alpha », « lower-greek », « lower-latin », « lower-roman », « upper-alpha », « upper-latin », « upper-roman », « armenian ».
Commentaire par Xstyle le 26 novembre 2011 à 18 h 11 min
Euh … Wouha O.o, top ton commentaire ! ^^ Merci
Flux RSS des commentaires de cet article.
Laisser un commentaire