La Vague du Web #8

6 novembre 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 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.

tridiv

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.

unicode_character

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.

fullpage_js

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.

ratio_css

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.

animation_thumbnail_css

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.

css3_animation

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.

border_corner_shape

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.

ladda

» Voir toutes les Vagues du Web

Commentaires

  • Philippe Lemaire

    J’aime beaucoup le coup du bouton d’envoi animé dans les formulaires,
    c’est vrai que parfois on se demande si le formulaire a bien été
    posté.