Je vous propose cette semaine des effets d’hover en CSS en tout genre, une critique sur bootstrap très réussie, de l’inspiration mais aussi des tutoriaux : un pour styliser des liens d’images inexistantes et un pour réaliser une batterie en SVG et JavaScript.
Surligner un texte en CSS au passage de la souris
Un bel effet bien réalisé pour souligner des liens ou mettre en valeur des mots dans un texte. Et ce tout en CSS.
See the Pen yepexZ by Wes Bos (@wesbos) on CodePen.
Librairie CSS de 40 effets d’hover différents pour vos images
Si vous êtes en manque d’inspiration pour vos hover d’images, ce site est fait pour vous. Vous pouvez y télécharger une librairie CSS avec pas moins de 40 effets.
A télécharger ici : http://imagehover.io/
Une critique de Bootstrap avec du Bootstrap
Comme on le voit de plus en plus, énormément de sites se ressemblent. Il est très facile aujourd’hui de trouver des templates de toutes sortes, que ce soit pour WordPress, Bootstrap…. Cela part d’une bonne intention, mais effectivement ça tue peut être un peu la créativité dans certains cas. L’auteur de ce site a voulu a sa manière critiquer les templates bootstrap … avec un template bootstrap. C’est fun, je vous laisse voir ça ici: http://adventurega.me/bootstrap/
Inspiration avec ce concept de site
Pour votre inspiration, voilà un concept de site avec une UI réussie et une animation travaillée.
A voir ici : https://dribbble.com/shots/2565362-Iceland-Travel-home-page
Tutorial : styliser des images manquantes sur un site
Combien de fois nous avons vu des sites avec des liens d’images qui n’existaient plus, ou qui ne se sont peut être pas chargés. Voici donc un tutorial pour styliser tout ça et les rendre un peu plus joli.
Le tutorial est disponible ici : http://bitsofco.de/styling-broken-images/
Tutorial : créer une batterie interactive en SVG et JavaScript
Je ne sais pas si vous vous en souvenez, mais j’avais mis en avant dans la semaine au poil #7 le superbe travail sur cette batterie. Son auteur explique sur codrops comment la créer.
Vous pouvez trouver son tutorial et télécharger les sources ici: http://tympanus.net/codrops/…/interactive-animated-svg-drum-kit/
Si vous en voulez plus, n’hésitez pas à me suivre sur Facebook et sur Twitter !
