La Vague du Web #5

7 avril 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 : quelques ressources JS et jQuery, un nouveau générateur CSS, ou encore une typographie d’icônes vectorielles. Bref, place à la Vague du Web numéro #5 !

Chart.js

Chart.js est une librairie JavaScript permettant de réaliser de superbes graphiques avec l’élément HTML5 canvas, compatibles sur tous les navigateurs modernes ainsi que IE7/IE8 via un fallback JS. Le script propose 6 types de graphique qui sont entièrement personnalisables : linéaire, histogramme, radar, circulaire, polaire et en anneaux. Seul regret, le manque d’interactivité au passage de la souris.

chart_js_demo

Typeahead.js

Typeahead.js est un plugin jQuery développé sous licence MIT par Twitter permettant de mettre en place de l’auto-complétion performante et complète. Les suggestions apparaissent au fur et à mesure que l’utilisateur tape, et la meilleure suggestion vient se placer directement dans l’input avec possibilité de la valider au clavier. Les données peuvent être codées soit en dur, soit à partir d’un fichier type JSON appelant des données locales ou distantes.

typeahead_js

3D CSS iPhone

Il s’agit d’un iPhone dont la perspective 3D et l’animation sont réalisées entièrement en CSS. Vous avez besoin de 4 images PNG, d’une feuille de style et le tour est joué ! Une façon originale d’apprendre à se servir des propriétés CSS3 de transformation (transform), notamment les translations (translate) et les rotations (rotate), ainsi que les keyframes. Le résultat optimal est à voir sur Chrome.

css3_iphone

Superhero.js

Vous souhaitez apprendre ou vous perfectionner en JavaScript ? Devenez un super héros ! Superhero.js est une collection des meilleures ressources JS du moment : articles, vidéos, et tutoriels en tout genre, le tout classé en plusieurs thématiques. Un site à mettre en favori !

superhero_js

CSS Matic

CSS Matic est un générateur CSS s’appuie sur trois propriétés CSS3 : gradient, border-radius, box-shadow. Les interfaces sont sexy et semblables aux outils que l’on retrouve dans Photoshop, notamment celle qui génère les dégradés CSS. Il propose également un outil pour générer des textures de bruit avec appel d’une image motif sur un serveur distant. Bref, un outil de qualité qui vient compléter cette liste de générateurs CSS.

css_matic

Grid-A-Licious

Grid-A-Licious est un plugin jQuery qui permet de créer facilement une grille responsive de blocs flottants ressemblant à l’interface de Pinterest. La grille est fluide : elle s’adapte à n’importe quel écran (desktop, tablette, smartphone) et prend en charge l’ajout dynamique de nouveaux blocs qui viennent parfaitement s’imbriquer. Quelques options sont disponibles pour personnaliser au mieux son affichage (largeur, espace, animation, vitesse, etc).

grid_a_licious

Countable.js

Simple à utiliser et particulièrement léger (3.5 Kb), Countable.js est une librairie JavaScript qui permet de compter et d’afficher le nombre de paragraphes, de mots et de caractères saisis dans une zone de texte. Disponible en licence MIT et ne nécessite aucune dépendance.

countable_js

Genericons

Genericons est une typographie de 60 icônes vectorielles réalisée par Automattic, la société qui est à l’origine de WordPress. Conçue spécialement pour les blogs, la police propose toutes les icônes « classiques » comme le calendrier, les commentaires ou encore les tags, mais aussi des logos de réseaux sociaux comme Facebook et Twitter. Vous pouvez bien sûr personnaliser chaque icône via CSS : taille, couleur ou encore text-shadow.

genericons

» Voir toutes les Vagues du Web

Commentaires

  • Pierre

    Super, merci, j’adore de plus en plus la vague du web ;)

  • avonsdream

    WvTa – Recently i would be down on money and debits were eating me from everywhere. That was Right Until I found out how to earn money on the Internet! I visited surveymoneymaker d-o-t net, and started filling in surveys for cash, and doing so, i’ve been great amounts more able to get around financialy!! i’m so happy i did this!!! slb