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 8ème chronique : un service de modelisation d’objets 3D, une astuce CSS pour conserver le ratio et un « onepage » fullscreen avec jQuery. Bref, place à la Vague du Web numéro #8 !
Il s’agit du 100ème article rédigé sur Megaptery. Je profite donc de ce billet pour remercier tous les lecteurs de la baleine du web qui contribuent à la vie du blog avec leurs visites, commentaires et encouragements.
Tridiv
Tridiv est un service en ligne permettant de modéliser des objets 3D destinés à une intégration HTML/CSS. L’éditeur se décompose en 4 vues distinctes (x, y et z, et la vue générale) sur lesquelles vous pouvez placer des cubes, des cylindres ou encore des pyramides. Reste plus qu’à récupérer le code correspondant. Compatible sur Chrome, Opera et Safari.
Unicode character table
C’est un site web qui regroupe plus d’une centaine de caractères accompagnés de leur numéro Unicode et leur code HTML correspondant. Les caractères peuvent être triés par catégorie (flêches, symboles grecs, plus populaires, etc) et un formulaire de recherche permet de trouver facilement ce que l’on souhaite.
fullPage.js
FullPage.js est un plugin jQuery qui permet de mettre en place un site web « simple-page » et fullscreen avec un système de slides verticales qui prennent chacune automatiquement la hauteur du navigateur. Compatible avec tablette et smartphone, le script est complet et propose plusieurs paramètres de personnalisation.
Ratio CSS
Cet article explique comment fixer et conserver le rapport largeur-hauteur, aussi appelé ratio, d’un élément au redimensionnement de la fenêtre. Aucune ligne de JavaScript n’est nécessaire : tout est géré en CSS avec notamment l’utilisation d’un pseudo-élément. Cette technique peut s’avérer très pratique pour les systèmes de grille avec blocs.
Thumbnail Grid Animations
L’équipe de Codrops nous partage (encore une fois) un travail de grande qualité avec 10 animations d’images pour vos sliders de miniatures (fall, rotate, slide, etc), le tout réalisé en full CSS via les keyframes et les transformations. Compatible uniquement avec les navigateurs modernes.
CSS3 Animation Cheat Sheet
Il s’agit d’une feuille de style qui, comme son nom l’indique, contient une série de superbes animations CSS3. Chaque keyframe (et la classe CSS qui l’utilise) est identifiée par un nom significatif qui détermine son type animation comme slideDown, fadeIn ou encore pulse. Toutes les animations peuvent être testées en live sur le site.
Border corner shape
Voici un superbe travail développé par Lea Verou permettant de tester un effet graphique de bordure actuellement non supporté au sein de CSS4 : il s’agit de la propriété border-corner-shape qui permet de creuser les coins de différentes formes avec les valeurs curve, scoop, bevel, et notch.
Ladda
Ladda est un concept d’interface original qui fusionne l’action de soumission d’un formulaire et l’affichage d’un loader de chargement. L’idée est de montrer à l’utilisateur que les données saisies sont en cours de traitement, au lieu de laisser se demander si son formulaire a bien été soumis pendant que le navigateur fait son travail.
