La Vague du Web #7
La Vague du Web est un condensé de ressources en tout genre vous permettant de suivre les dernières tendances web… Aujourd’hui dans cette chronique : des ressources full CSS, un guide d’optimisation frond-end et une lightbox jQuery pensée pour le mobile. Bref, place à la Vague du Web numéro #7 !
Logos CSS
Voici une liste de 5 logos réalisés en pure CSS comparés à leurs homologues au format image. Il s’agit de l’oiseau de Twitter, l’octocat de Github, l’éléphant d’Evernote, le carton de Dropbox et la pomme d’Apple. L’idée est de montrer qu’il est possible de créer des éléments graphiques assez sophistiqués avec quelques lignes de CSS3, sans Photoshop.
Sly
Sly est une bibliothèque basée sur jQuery pour gérer du défilement de contenu à la manière d’un « coverflow », aussi bien horizontal que vertical, le tout contrôlé par de nombreux paramètres. On retrouve des fonctionnalités comme le mode « full page », l’infinite scroll ou encore le défilement parallaxe. Idéal pour une galerie d’images ou une présentation de produits.
Browser Diet
Comment perdre du poids… dans le navigateur ? C’est un site one-page qui répond à cette question avec un guide ultime de la performance front-end, illustré et bourré d’humour, co-écrit par des développeurs experts de renom (de chez Google, Opera ou encore Twitter) découpé en 7 grandes thématiques : HTML, CSS, JavaScript, jQuery, Images, Serveur, et une partie bonus. C’est un très bon récapitulatif des meilleures pratiques à adopter !
CSS Modal
CSS Modal est une librairie pour réaliser des fenêtres modales en full CSS sans aucune ligne de JS. Les avantages de passer par une feuille de style sont les suivants : léger, accessible, cross-browser, et optimisé pour toutes les tailes d’écran. La ressource est aussi disponible en tant que plugin Sass.
Hint.css
Hint.css est une librairie CSS combinant attributs data-* HTML5 (contenu), pseudo-éléments CSS (position), propriété CSS content et transitions CSS3 pour réaliser des tooltips / infobulles en full CSS. Compatible avec les navigateurs modernes, l’effet est gracieusement dégradé sur le reste des navigateurs. Disponible en version Sass ou CSS directement prêt à l’emploi.
Almost Flat UI
Almost Flat UI est thème graphique pour Foundation qui a la particularité de reprendre les différents éléments du framework à la sauce Flat design : pagination, boutons, barres de progression, etc. Ce kit vous permettra d’habiller vos templates Foundation avec la grande tendance du moment, une interface-utilisateur épurée et minimaliste.
Bourbon
Bourbon est une librairie qui propose une multitude de « mixins » et de fonctions Sass très utiles pour une intégration encore plus efficace et plus rapide, et avec une syntaxe simplifiée. Facile à installer, la librairie est compatible avec un certain nombre de compilateurs, notamment avec LiveReload.
Magnific Popup
Magnific Popup est une bonne alternative à fancyBox. Il s’agit d’un plugin jQuery particulièrement léger (3KB) qui permet de réaliser une lightbox responsive pensée pour le mobile : chargement progressif, transitions et animations réalisées en CSS3, et éléments graphiques en pure CSS (support Retina). Quant aux dimensions, elles ne requierent aucune spécification de la taille par JavaScript ; tout se fait en CSS avec des unités relatives (em) ou media queries.
