La Vague du Web #7

17 juin 2013

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.

lore_pure_css

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.

sly_jquery

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 !

browser

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.

css_modal

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.

hint_css

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.

almost_flat_ui

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.

bourbon_sass

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.

magnific_popup_jquery

» Voir toutes les Vagues du Web

Commentaires

  • Bertrand

    Bonjour, la vague du web nous manque depuis Juin !