25 Awesome CSS Star Rating Examples – Bashooka. Star Ratings With Very Little CSS. Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the UX part of it done with very little code and no JavaScript. The markup uses the unicode entity for a star (☆) right in it. If you have a UTF-8 charset that should be no big deal. Alternatively you could use ☆ (Calculator for that kind of thing). <div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div> Now we need to flop out that “hollow” star with a “solid” star on hover (Gallery for finding those sorts of characters).
Just by virtue of being it being absolutely positioned, the top: 0; left: 0; are implied (in modern browsers, anyway). But what we have so far only works on individual stars. Through CSS, there is no way to select a preceding child element. That’s it! View Demo And here’s a Dabblet if you wanna mess with it. Actual Usage Chances are, JavaScript is going to be involved with rating stars anyway. Others. 15 animations CSS vraiment bluffantes !
Tutoriel - Réaliser un menu responsive avec Flexbox. Le positionnement des éléments à toujours était un vrai problème même s'il y a eu des systèmes de positionnement comme bloc, inline-block, table ... Que ce soit les floats ou les inline-block. Il n'est pas rare de rencontrer des problèmes dans ce domaine. Heureusement, il y a eu des avancées et aujourd'hui, avec l'abandon progressif des anciens navigateurs comme Internet Explorer, nous allons pouvoir commencer à aligner nos éléments avec l'aide du module Flexbox. Dans ce tutoriel, je vais vous démontrer comment il est facile de réaliser un menu en quelques lignes seulement.
Étape 1 - La base Avant de commencer à faire du css, nous allons définir la base de notre menu en html5. <nav class="nav" role="navigation"><ul clas="menu"><li><a href="#">Accueil</a></li><li><a href="#">Catégories</a></li><li><a href="#">À Propos de Moi</a></li><li><a href="#">Contact</a></li></ul></nav> Nous allons appliquer un style de base pour notre menu : Étape 2 - Le menu Étape 3 - Les sous-menu Damien Flandrin.
15 animations CSS vraiment bluffantes ! GreenSockForum. 12 effets Javascript et CSS pour booster vos animations | Webdesigner Trends. Tendance centrale, les animations et micro-interactions sont des éléments à mettre en place obligatoirement lors du déploiement d’un produit interactif. Si vous êtes ici, vous n’avez évidemment pas pu passer à côté : les animations sont présentes partout aujourd’hui. Lors du scroll, sur de la typographie et surtout lors d’interactions, elles donnent du feedback à l’utilisateur pour une meilleure expérience.
Vous l’avez compris, le temps des sites plats et sans vie est désormais révolu. Pour renouveler vos bibliothèques d’animation, je vous propose une petite sélection de 12 ressources avec des dizaines d’effets pour booster vos interfaces Circle Menu Une bonne alternative à un menu burger avec de grosses typographies par exemple. Animate CSS Grid Une bibliothèque pour animer les éléments CSS Grid. Scrolling Gradient Le dégradé de fond change lors du scroll : simple, efficace, comme ici par exemple. Rallax Encore une ressource pour créer simplement un effet de parallaxe sur vos pages. Splitting.