Des ressources à découvrir et explorer pendant les vacances. Les vacances d'avril approchent surement pour certains d'entre vous, et vous vous demandez quoi faire de tout ce futur temps libre ?
Le BlogDuWebdesign a des propositions pour vous ! Au programme, un petit peu de golf avec Dwitter, des soirees TV avec Scrimbra, un peu de dépaysement avec Kakoune et des balades en forêt avec Lumber ! Dwitter Connaissez-vous le golf ? Non, pas ce truc ou on tape dans une pauvre balle sans défenses, mais le VRAI golf, celui qui consiste en la réalisation d'une action avec le minimum de caractères possible.
Si vous suivez ce blog avec assiduité, vous avez sans doute déjà entendu parler de Vim Golf, mais il est évidemment possible d'appliquer ce principe avec tout et dans le cas de Dwitter, il s'agit de Javascript. How Flexbox works — explained with big, colorful, animated gifs. 20 Snippets CSS pour créer des animations sur vos images survolées en quelques secondes. Vous rêvez depuis toujours de créer de sublimes animations au survol de vos images et photographies sur votre site web ?
Ne cherchez pas plus loin car votre vœu se voit exaucé grâce à ces 20 Snippets CSS. Offerts avec des effets d’image très agréables et des animations diverses et captivantes, ils sauront non seulement améliorer l’ergonomie de votre site mais sauront faire la différence en attirant l’œil curieux de vos internautes. Vous pourrez choisir entre plusieurs effets de survol de l’image : ajouter un un titre, un sous-titre, une légende, des icônes et j’en passe !
Regardez, choisissez, et utilisez-les dans vos projets (sites web de photographie, portefolios en ligne, galeries d’images, etc.) Web code. The web's scaffolding tool for modern webapps. Les nouveautés de l'HTML 5.1. Le World Wide Web Consortium (W3C) qui est une communauté internationale qui développe des standards pour l'évolution du Web a officialisé la version 5.1 du langage HTML.
Le développement de cette spécification a débuté en décembre 2012 et a été validée en tant que recommandation par le W3C le 1er novembre 2016. Nous allons voir ensemble les ajouts importants de cette recommandation. picture et srcset Ce nouvellement a pour but d'améliorer le chargement des images en sélectionnant l'image à charger suivant la taille de l'écran de l'utilisateur. On utilise une media query sur l'élément fils "source" via l'attribue "media". Dans le cas où un navigateur n'est pas compatible, alors on affiche une image par défaut via <img>. Details et summary Ces 2 balises permettent de générer un widget permettant d'afficher et de masquer du contenu sans JavaScript.
<details> Ceci est un texte. Menu contextuel.
Inspirations. 9 générateurs gratuits pour développer plus vite. Quand on est en DUT MMI et qu’on doit rendre des projets avant le fameux « dimanche minuit », sachant qu’il est déjà 23h30, il faut pas tortiller des fesses !
On prend des outils rapides et efficaces et on achève la mission ! Les outils qui suivent pourront t’être très utiles quand tu seras en stage ou simplement dans tes projets persos. Fini le blabla pour le SEO Google, place au vrai contenu : 1. Générateur de boutons Le site UI Parade (excellent site de ressources pour interface utilisateur au passage) te met à disposition gratuitement un générateur de boutons en HTML/CSS. Livetools.uiparade.com 2. Si le premier générateur de boutons ne te conviens pas, tu as toujours la solution numéro 2, à peine plus complète en terme de construction de bouton en CSS mais du coup, ça te prendra peut-être plus de temps. Www.cssbuttongenerator.com. Tutoriel pour apprendre SASS et Compass. Salut à toi très cher MMI !
Aujourd’hui, j’ai le plaisir de te présenter cette mini série d’articles, j’ai nommé « Booste ton Workflow ». L’objectif est simple : Te présenter les outils d’aujourd’hui et de demain qui vont faire de toi une bête du front. Ma mission ? Faire de toi un intégrateur d’enfer que tout le monde voudra s’arracher. Tu intègreras les maquettes plus vite que ton ombre, sans relâche tu ne CSSras jamais avant d’être satisfait. Booste ton workflow #2 : Flexbox. Hello mon cher, ma chère, mes chers !
Aujourd’hui, et pour cette deuxième édition de « Booste ton workflow », j’ai l’immense honneur de changer ta vie te présenter Flexbox : La petite beauté qui va résoudre tous tes ennuis de positionnement Je t’explique : On va commencer par une petite introduction sur les manières de faire d’avant, et on passera ensuite sur la nouveauté du jour : Flexbox. Le but de cet article n’est pas de produire un tutoriel aussi long que la première édition de #BTW, mais bien de t’introduire au sujet et de te fournir les ressources nécessaires pour apprendre à t’en servir. Ton body est ready ? PARFAIT. float, clear both, width 48.333335457%, margin-left 1.33347% … Ce titre, aussi indigeste soit-il, représente un peu la galère que c’est de positionner des éléments en CSS à l’heure actuelle. CSS Design Awards - Website Awards & Inspiration - CSS Gallery - CSSDA. HTML-CSS-Javascript.
The W3C Markup Validation Service.