Sticky footer, de 5 façons
Une brève histoire des sticky footers, par Chris Coyier, depuis les pieds de page collants à l'ancienne jusqu'aux techniques Flexbox et Grid.
Alignement en CSS, un guide complet
Tout sur l'alignement en CSS par Rachel Andrew. Les choses ont beaucoup évolué dernièrement avec Flexbox, CSS Grid et la spécification Box Alignment. Dans la continuité de ses articles de référence déjà traduits dans la Cascade.
Comprendre le virtual DOM
Qu'est-ce exactement que le DOM virtuel, en quoi diffère-t-il du DOM, et comment l'utiliser. Brillante présentation, comme d'habitude, par Ire Aderinokun.
Comment fonctionne calc()
La fonction calc( ) de CSS nous permet de calculer des valeurs de propriétés. Ire Aderinokun passe en revue son fonctionnement, son utilité et quelques cas pratiques.
La propriété CSS visibility et l'accessibilité
Ire Aderinokun analyse le comportement de la propriété CSS "visibility" dans sa relation avec les différentes sortes de "visibilités" — visuelle, spatiale, technologies d'assistance, interactions. Une belle approche pratique de l'accessibilité.
CSS Flexbox et la dimension des boîtes
Dans les deux articles précédents, nous avons vu ce qui se passait lorsque nous créons un conteneur flex et nous avons examiné l'alignement en détail. Cette fois-ci, Rachel Andrew explore le dimensionnement en Flexbox : comment Flexbox décide-t-il de la taille de nos items ?
Le DOM, c'est quoi exactement ?
Quand on a besoin d'une réponse claire et détaillée, on demande à Ire Aderinokun. Tout ce que vous avez besoin de savoir sur le DOM, c'est ici.
CSS Flexbox et l'alignement, guide complet
Rachel Andrew examine les propriétés d'alignement de Flexbox et découvre en chemin quelques règles de base qui nous aideront à nous rappeler comment ces propriétés fonctionnent sur les axes principal et transversal !
Que se passe-t-il quand on crée un Flexbox flex container?
Le premier d'une série de trois articles passionnants de Rachel Andrew décomposant en détail Flexbox, ce pour quoi Flexbox a été conçu, ce qu'il fait vraiment bien, ce pourquoi il ne serait pas le meilleur choix.
Comment fonctionne CSS display: contents
La propriété CSS display: content est relativement récente et peut s'avérer bien pratique. Ire Aderinokun en fait le tour méthodiquement et présente un exemple d'utilisation en association avec CSS Grid.
CSS Grid : comment fonctionne minmax()
La fonction minmax() est l'une des plus utiles parmi les nouveautés introduites par la spécification CSS Grid Layout. Ire Aderinokun la présente à sa façon habituelle: systématique, claire et complète!
CSS Grid pratique : ajouter Grid à un design existant
Le grand Eric Meyer s'amuse avec CSS Grid : il décide de convertir son site personnel, qui doit rester compatible avec les anciens navigateurs, et nous montre la transformation en détail.
JSON pour les débutants
JSON est un format de données facilitant le stockage et l'échange de données entre tous langages de programmation. Louis Lazaris propose une introduction simple, mais détaillée de JSON et JSONP.
Se lancer dans CSS Grid
Robin Rendle a écrit un tutoriel simple pour s'initier à CSS Grid en commençant par les bases. Une excellente introduction au système de layout qui va nous changer la vie.
Grid et Flexbox, le duo gagnant
CSS Grid et Flexbox sont faits pour fonctionner ensemble. Grid pour l'organisation générale, Flexbox pour les ajustements spécifiques. Chen Hui Jing le démontre avec un exemple magistral (et quelques bonus)
Optimiser votre front-end pour le navigateur
L'optimisation des sites web est à l'ordre du jour. Si nous voulons améliorer l'expérience utilisateur, en particulier sur les mobiles, nous devons comprendre le fonctionnement des navigateurs. Par Sanjay Purswani.
Les propriétés CSS background
Méthodique et claire comme on la connaît, Ire Aderinokun fait le tour des propriétés background de CSS pour placer, dimensionner, répéter, etc les images d'arrière-plan. Une excellente introduction ou révision.
CSS @supports va vous changer la vie
L'amélioration progressive est un beau principe nous invitant à utiliser des fonctionnalités CSS avancées dès maintenant, la feature-query @support est notre nouvel outil pour cela. Petite intro par Charlotte Jackson.
SVG, la syntaxe Path
L'élément path de SVG est l'outil de dessin le plus perfectionné qui soit, mais sa syntaxe ne semble pas aisée. Chris Coyier décortique brillamment ce langage, pas si compliqué finalement.
CSS : n'oubliez pas l'impression papier!
Les utilisateurs continuent d'imprimer nos pages web : les optimiser pour l'impression papier est important pour l'accessibilité mais aussi, tout simplement, pour l'expérience utilisateur. Manuel Matuzovic nous fait partager quelques astuces.
Comprendre SVG viewBox
L'attribut viewBox est l'un des premiers qu'on rencontre quand on débute avec SVG, et potentiellement une grande source de confusion. Cet article de Dudley Storey vous épargnera bien des soucis.
Utiliser SVG use
use est l'outil de clonage de SVG, il permet de dupliquer des éléments existants ou prédéfinis et d'alléger votre code. Une introduction claire et concise, comme toujours, de Dudley Storey.
CSS Initial, Inherit, Unset et Revert
Il existe quatre valeurs applicables (en théorie) à n'importe quelle propriété CSS, ce sont les valeurs explicites par défaut. Avec Ire Aderinokun apprenez à les connaître et à les différencier.
Utiliser Grid ou Flexbox ?
Rachel Andrew est certainement le plus ardent des promoteurs de CSS Grid Layout. Elle répond ici à la question de savoir quand et comment utiliser Flexbox ou CSS Grid Layout.
CSS Grid Layout, guide complet
Avec Flexbox, le module CSS Grid Layout représente l'avenir de la mise page CSS. Chris House a conçu un guide complet et plein d'exemples pour enfin comprendre cette spécification complexe.
CSS Grid et le Saint Graal
Un premier article sur la nouvelle spécification CSS Grid Layout. Ire Aderinokun s'attaque au Saint Graal et nous initie aux mystères d'une spécification qui va changer notre façon de travailler!
Comment travailler avec des icônes en SVG
Un bel article de notre frenchie Florens Verschelde qui a fait le buzz et a été repris par l'excellent CSS-Tricks. Explications claires du process et réflexions pour aller plus loin.
Sur :not et la spécifité
Ire Aderinokun va toujours fouiller au fond des choses. Elle revisite ici la pseudo-classe de négation, nous montre l'envers du décor et nous offre un crash course sur la spécificité!
Styler les images non affichées
Aaah, les images qui ne s'affichent pas... une petite icône misérable à la place et notre texte alternatif tout penaud... Mais avec l'incroyable Ire Aderinokun tout cela est du passé!
Jouons avec Flexbox et les Quantity Queries
Ayant lu l’article sur les quantity queries, Aaron Gustafson expérimente leur mise en oeuvre sur son site... avec Flexbox bien sûr, pour aller jusqu’au bout de l’aventure!
Quantity Queries pour CSS
Dans cet article déjà fameux, Heydon Pickering démontre comment on peut créer des queries basées sur les quantités en pur CSS en utilisant ingénieusement pseudo-classes et combinateurs. Absolument génial Heydon!
feColorMatrix en douceur
Les filtres CSS sont formidables mais ils présentent un inconvénient majeur : on ne peut pas manipuler les canaux. C’est ici qu'intervient feColorMatrix, une méthode SVG présentée par Una Kravets.
Backgrounds SVG : hexagones et écailles
Dudley Storey poursuit sa passionnante série sur les backgrounds SVG, ici avec des motifs en tuiles hexagonales et en écailles. On y apprend quelques petites astuces relatives à l'encodage base64.
Créer un cube en CSS
David Walsh s’amuse à créer un cube 3D en CSS. En chemin, on suit la logique de construction, on apprend ou on révise la 3D CSS et les animations.
Techniques Flexbox, 4: conception d'une page produits
Levin Mejia, adepte de l’apprentissage par la pratique, nous propose de créer un layout flexible et responsif avec Flexbox. On s’amuse à apprendre ses concepts et propriétés fondamentales.
Cacher des éléments avec CSS
Encore un article d'Ire Aderinokun, qu'on aime beaucoup ici pour ses analyses en profondeur et la clarté de ses explications. Avez-vous bien tout considéré lorsque vous cachez un élément HTML?
Contrôler le modèle de boîte
Dans cet article simple et complet, Ire Aderinokun rappelle les bases du modèle de boîte CSS et montre pourquoi vous devriez utiliser box-sizing. Super clair comme toujours avec l'étonnante Ire.
Créer un effet Chillwave en SVG
Varun Vachhar recrée en SVG un effet chillwave initialement créé en sprite : enchaînement de courbes de Bézier, chemins en miroir, animation de la vague et touche finale, un beau boulot!
CSS animation : Star Wars
En synchro parfaite avec l'actualité, Donovan Hutchinson propose l'animation CSS de la bande-annonce du Réveil de la Force, mêlant animations, transformations, translations, rotations et 3D. Bel exercice de pédagogie créative.
CSS :root, le retour aux racines
La cascade CSS est la meilleure et la pire des choses. Dans cet article limpide, Simurai donne quelques astuces simples pour réduire les problèmes de spécificité et mieux comprendre CSS.
Les bases de SVG : Propriétés de style
Suite des bases de SVG par Dudley Storey : les styles de SVG sont souvent similaires à ceux de CSS, parfois identiques mais souvent juste assez différents pour créer la confusion.
Comprendre SVG preserveAspectRatio
Après SVG viewport et viewBox, Joni Trythall présente le complément logique, l'attribut preserveAspectRatio. Là aussi, les choses sont d'abord un peu complexes, mais présentées par Joni elles deviennent très claires.
Comprendre SVG viewBox et viewport
SVG viewport et viewBox peuvent sembler compliqués et intimidants lorsqu’on débute avec SVG. Joni Trythall décortique tout cela dans un langage simple et clair, excellente introduction agrémentée d'illustrations fruitées.
Effets d'images CSS, 3 : les vignettes
Suite de notre série d'articles sur les effets d'images CSS. Toujours aussi créative, l'étonnante Una Kravets montre 3 façons de créer des vignettes, l'un des filtres photo les plus populaires.
Effets d'images CSS, 2 : lunettes 3D
Dans cet article, nous allons voir comment recréer l'effet d'une photo 3D en utilisant les blend modes et les transformations de CSS. Par Una Kravets, au top de sa créativité.
Effets d'images CSS, 1 : vintage délavé
On peut réaliser de nombreux effets directement dans le navigateur aujourd'hui, sans passer par Photoshop. Una Kravets combine les fonctionnalités CSS disponibles actuellement, filtres, blend modes, dégradés, textures, transformations. Passionnant!
Introduction aux images responsives 9 : image breakpoints
C'est l'avant-dernière partie de notre série au long cours sur les images responsives, et c'est la plus redoutable. Mais comme toujours avec l'excellent Jason Grigsby, très complète et très claire.
Comment fonctionne z-index
Ça n'est pas évident à première vue, mais les éléments HTML sont générés en 3D. La propriété CSS z-index spécifie le niveau et le contexte d'empilement. Confus? Suivez Ire Aderinokun!
Techniques Flexbox, 3 : layout sur 2 colonnes
Les applications concrètes de Flexbox, suite : encore une solution simple à un problème compliqué de mise en page, présentée par David Walsh. Mais pourquoi diable a-t-il fallu attendre si longtemps?
Techniques Flexbox, 2 : centrer verticalement
Le centrage vertical est depuis toujours un cauchemar pour les développeurs web, et même s'il existe des solutions, aucune n'égale flexbox par sa simplicité. Un article concis de David Walsh.
Animer des éléments sur un chemin avec CSS
Motion Path est la plus excitante des nouveautés d’animation CSS de ces cinq dernières années, elle est présentée par Dudley Storey et son amie Alice (au pays des merveilles)
Techniques Flexbox, 1 : titre aligné et retour à la ligne
Premier article d’une série sur les applications pratiques de Flexbox. Chris Coyier résout un problème d'alignement de titre et de sous-titre avec retour à la ligne, compliqué sans flexbox.
Motifs SVG maoris
En hommage à nos amis néo-zélandais, voici un article de la série sur les backgrounds SVG consacré aux motifs maoris, à la fougère argentée, aux fractales et à l’ethnomathématique.
HTML5 : Comprendre les Polyfills, Shivs et Shims
Les dernières fonctionnalités HTML, CSS ou JavaScript ne sont pas toujours supportées par les navigateurs, ou seulement partiellement. Les shims, shivs et polyfills sont une solution, présentée par Dudley Storey.
Les bases de SVG : Groupes
Suite des bases de SVG par Dudley Storey : les groupes SVG ressemblent aux éléments div des pages web mais il existe des différences qu’il est important de bien comprendre.
Bien utiliser l'attribut alt
Le web est plus fort lorsqu'il est divers : plus il est accessible, meilleur il est. Dudley Storey fait le point sur les règles à connaître concernant l'attribut alt d'alternative textuelle.
Introduction aux images responsives 8 : images CSS
Quand on parle d'images responsives, on ne pense généralement pas aux images CSS. Pourtant il existe des solutions spécifiques, dont les nouvelles media queries résolution et image-set(). Par Jason Grigsby.
Gulp pour les débutants
Avec Grunt, Gulp est l'un des principaux task runners utilisés aujourd'hui. Le formidable Zell Liew présente de manière claire et complète cet outil de développement qui vous facilitera la vie.
Comment fonctionne CSS Float
On n'utilise plus autant les float aujourd'hui, mais parfois c'est encore incontournable. Dans cette excellente intro (ou révision), Ire Aderinokun revisite float en présentant les règles qui régissent son comportement.
Image révélée au grattage avec SVG et Blend Modes
Encore une association de SVG et CSS Blend Modes pour de nouveaux effets créatifs. Dudley Storey anime une ligne multiple SVG et révèle un (joli) contenu en arrière-plan. Très malin!
Diagrammes circulaires flexibles avec CSS et SVG
Lea Verou vient de publier un livre extraordinaire proposant des techniques CSS et SVG originales. Cet article est technique, mais l'approche, la méthode, la créativité sont une sacrée source d'inspiration!
Créer de superbes diagrammes avec SVG et Blend Modes
Une nouvelle association de SVG et CSS Blend Modes pour de nouveaux effets créatifs. De quoi vous faire regretter le bureau, les graphiques et les diagrammes en camembert. Merci Dudley!
Backgrounds Pop-Art avec SVG et Blend Modes
Dudley Storey nous a appris à dessiner avec SVG. Ces lignes peuvent devenir complexes, on peut les mélanger à des images via Blend Modes pour créer des backgrounds “pop art”
Introduction aux images responsives 7 : type
Si vous déplorez la limitation des formats d'images, si vous voulez expérimenter sans abandonner vos utilisateurs, vous allez adorer l’attribut type. Un grand moment de détente avec Jason Grigsby!
Introduction aux images responsives 6 : élément picture
Nous nous sommes concentrés jusqu'à présent sur les questions liées au changement de résolution. Il est temps maintenant de passer à l’autre apport des nouveaux standards, la direction artistique.
Motifs SVG japonais
Pour le plaisir, Dudley Storey a réalisé deux nouveaux backgrounds SVG dérivés des motifs géométriques traditionnels japonais. Un approfondissement de la série sur SVG, mine de rien, ça devient sérieux!
Contraste de texte automatique avec CSS Blend Modes
Les Blend Modes CSS permettent de créer des effets graphiques vraiment passionnants. Une des applications pratiques les plus utiles concerne le contraste automatique entre texte et background. Par Dudley Storey.
Introduction aux images responsives 5 : dimensions
Nous avons bien avancé dans notre feuilleton de l'été. Il est temps maintenant de faire connaissance avec le véritable héros de notre histoire, l’attribut `sizes`. Par Jason "Great" Grigsby.
Introduction aux images responsives, 4 : descripteurs de largeur srcset
Les descripteurs de densité d’affichage sont parfaits pour les images de largeur fixe mais insuffisants pour les images flexibles. C'est ici qu'interviennent les descripteurs de largeur! Par Jason Grisgsby.
Introduction aux images responsives, 3 : densité d'affichage srcset
Depuis qu'Apple a lancé son affichage retina sur l'iPhone4, les designers doivent gérer le traitement de l'affichage en haute résolution. C'est ici que `srcset` et ses descripteurs entrent en scène.
Introduction aux images responsives, 2 : img requise
Suite de notre série de l'été consacrée aux images responsives. L'élément img est insuffisant, mais il est indispensable. Améliorons-le progessivement avec les nouveaux standards des images responsives. Par Jason Grigsby.
Introduction aux images responsives, 1 : définitions
Notre série de l'été 2015 est consacrée aux images responsives, présentées par le grand Jason Grigsby. Pour ne plus rien ignorer sur le pourquoi et le comment, suivez le guide!
Pourquoi height: 100% ne marche pas
Le blog que Maujor consacre à CSS depuis 2006 est bien connu au Brésil pour ses articles spécialisés ou de vulgarisation. Celui-ci fait le point sur le problème height:100%
Backgrounds SVG : les rayures
Dans la continuité des articles sur les bases de SVG, Dudley Storey commence une série sur les motifs et les backgrounds. SVG permet de réaliser des choses impossibles en CSS.
Diagonales et motifs SVG en background
Lorsque nous comprenons les bases des motifs SVG, c'est un monde de créativité qui s'ouvre. Après les bases de SVG, Dudley Storey nous montre comment créer des backgrounds en SVG.
Mécanique des polices de caractères, 2
Deuxième article de la brillante série de Tobias Frere-Jones. Après les questions de dimensions, Tobias aborde celles de l’épaisseur du trait et des graisses. Pour la plage, sujet incontournable.
Guide de Flexbox : space-between, l'oublié
Tout comprendre sur space-between, le héros oublié de Flexbox. Noah Blon propose un cas pratique d'utilisation de cette valeur de justify-content dans Flexbox, super pratique pour vos mises en page.
Guide de Flexbox : n'oubliez pas flex-shrink
Un article sympa de Noah Blon sur l'un des aspects les plus sacrément pénibles de flexbox. Un bon complément de l'excellent article sur les mises en page sur 12 colonnes.
Layout sur 12 colonnes avec Flexbox
La suite de la série de Landon Schropp sur Flexbox. Après avoir découvert les bases avec un simple dé, nous nous lançons dans les mises en page sur 12 colonnes.
Les bases de SVG : Lignes simples et multiples
Nous avons vu les formes de base de SVG, Dudley Storey présente maintenant les lignes, simples et multiples et.. ce n’est pas simple. Mais avec Dudley, tout devient clair.
Astuces CSS avec checkbox
C'est incroyable ce qu'on peut faire avec un élément aussi modeste que les cases à cocher... du moins lorsqu'on s'appelle Will Boyd et qu'on a de la créativité à revendre!
Autocomplétion native en HTML5
Dans ce bref article, nous allons voir comment mettre en oeuvre une zone de saisie avec auto-complétion, sans recourir à jQuery ni à JavaScript, en pur HTML5. Par Steve Pear.
Créer un logo avec Sketch 3
Dans ce tutoriel hyper-précis, Jeremy Osborn présente quelques-unes des fonctionnalités essentielles de Sketch et nous apprend à créer un logo à partir d'un croquis importé puis traduit en formes vectorielles.
Background révélé par des images coulissantes en CSS
Encore un tutoriel sympa de Dudley Storey : créez des images coulissantes révélant un background, en pur CSS, grâce à clip-path et transform / translate. Un effet simple, construit astucieusement comme toujours!
Le $PATH vers la lumière
L'installation de logiciels sur notre machine est souvent un processus pénible et semé d'embûches. Mieux connaître $PATH facilitera notre vie et nous évitera quelques crises, grâce au Frenchie Olivier Lacan.
Les bases de SVG : Polygones
Dudley Storey termine la série d'articles sur les formes de bases SVG avec les polygones : triangles, étoiles et autres formes plus complexes — dans une présentation claire et simple comme toujours.
L'ajustement optique
Luke Jones le dit : les designers ne doivent pas compter sur les seuls logiciels pour faire le travail d'ajustement, mais également sur leurs yeux et leur instinct. Preuves à l'appui.
Sketch 3 : l'outil Scissors
L'application de dessin vectoriel Sketch brille par sa simplicité. Peter Nowell présente l'outil "ciseaux", moins connu que d'autres, et fait un point très intéressant sur les formes et les lignes.
Les bases de SVG : Rectangles et Carrés
Après les cercles, voici les rectangles ! Dudley Storey reconstitue un célèbre tableau de Mondrian et nous montre chemin faisant tout ce qu'il faut savoir pour créer des rectangles en SVG.
Les bases de SVG : Cercles et Ellipses
Même lorsqu’on utilise un logiciel de création graphique pour créer des SVG, la connaissance de la syntaxe permet de créer plus rapidement et efficacement des formes simples. Dudley Storey.
Flexbox, un coup de dés
Ce brillant article est le premier d’une série conçue par Landon Schropp pour expliquer Flexbox. Une méthode originale pour comprendre les fondamentaux de Flexbox et les mettre en pratique.
Scroll avec background révélé en pur CSS
Le défilement faisant apparaître des backgrounds différents est une technique populaire aujourd'hui, souvent réalisée via de fortes doses de JavaScript. Dudley Storey en propose une version moderne en pur CSS.
Brood X : le principe des cigales en CSS
Un texte étrange et poétique dans lequel Dudley Storey l'enchanteur nous entraîne dans l'univers fantastique de Magicicada Septemdecim. Ou comment les nombres premiers peuvent stimuler notre imaginaire et notre créativité.
Comprendre les dégradés linéaires CSS
Patrick Brosset a écrit sur Medium un article super clair pour vraiment comprendre les dégradés linéaires CSS et s'épargner des migraines. Évidemment, La Cascade se devait de traduire notre Frenchie.
Comprendre Clip Path
La propriété Clip-Path de CSS est un super outil pour réaliser des effets de style. Dans cet article clair, Drew Minns présente son utilisation en détail, ainsi qu'un cas pratique.
5 règles pour rendre SVG accessible
SVG est formidable pour le design responsive, la performance et la qualité vectorielle, mais rendre SVG accessible demande encore du travail, simple avec ces 5 règles proposées par Dudley Storey.
3 raisons d'utiliser HSL pour vos couleurs
Maintenant que nous connaissons mieux HSL, Dudley Storey passe en revue quelques situations où HSL peut vraiment vous changer la vie. Designer devient plus simple, plus facile et plus rapide.
Utiliser HSL pour vos couleurs
La méthode HSL de création de couleurs est bien connue des designers mais négligée par les codeurs. Dans cet article en deux parties, Dudley Storey nous montre tout son intérêt.
Effets vidéo HTML5 avec CSS Blend Modes
Les effets vidéos sont habituellement appliqués au montage et ne peuvent être manipulés une fois la vidéo exportée. Dudley Storey montre comment utiliser les nouveaux effets CSS dans vos vidéos.
Un carrousel responsif en pur CSS
De plus en plus les développeurs web ont besoin de solutions responsives et performantes. Dudley Storey propose ici un carrousel responsive en pur CSS qui répond parfaitement à ces objectifs.
Transformer un layout avec Flexbox
Pour comprendre flexbox en profondeur, Zoe Gillenwater transforme un layout préexistant créé avec table. Grâce aux media queries et aux possibilités d'ordonnancement de flexbox, ce layout devient encore plus responsif.
11 Astuces de prototypage avec Sketch
Si vous êtes designer, vous connaissez forcément Sketch, une application Mac idéale pour vos travaux de maquettage. Andy Orsow propose quelques astuces pour vous rendre la vie (encore) plus facile.
Combiner CSS clip-path et Shapes
Comment sortir du modèle de boîte et ouvrir de nouvelles possibilités créatives pour nos mises en page ? Dudley Storey se penche sur clip-path et Shapes et combine les deux modules.
Appropriation culturelle : utiliser les collections des musées
Les musées exposent de plus en plus leurs collections en ligne et en permettent souvent l'utilisation gratuite. Dudley Storey nous invite à une promenade à travers quelques belles collections internationales.
Tout sur les sprites CSS
Les sprites combinent plusieurs images dans un fichier unique, permettant d’améliorer la performance de votre site. Ils sont largement utilisés dans les animations complexes. Belle introduction par Chris Coyier.
Animer avec les sprites SVG
Sarah Drasner montre ici comment utiliser les sprites SVG pour créer des animations complexes et responsives. De superbes exemples illustrent d'étonnantes possibilités d'animation, avec un code qui reste relativement simple.
Typographie du site Advertising Age
Jeremiah Shoaf, responsable de l'indispensable site Typewolf se lance dans une nouvelle série d'articles où il décortique un site du point de vue de sa typographie. Clair, pédagogique et passionnant.
Créer un player audio en HTML5, 3 : microdonnées
Notre prototype de player audio HTML5 est encore assez brut. Nous allons lui donner son look définitif et ajouter quelques microdonnées pour aider les moteurs de recherche. Par Dudley Storey.
Créer un player audio en HTML5, 2 : le prototype
Bon allez, on se lance dans la création de notre player audio personnalisé ! Dudley Storey utilise une approche par petits pas — ou plutôt par petits tests — pour construire un prototype.
Créer un player audio en HTML5, 1 : fonctionnalités et design
Aujourd'hui, nous pouvons créer nos propres player media avec HTML5 et JavaScript, et personnaliser leur apparence avec CSS. Dudley Storey nous entraîne par étapes dans la construction d'un super player.
Mécanique des polices de caractères, 1
Notre esprit veut dessiner une forme, mais nos yeux veulent en voir une autre. Cette série d'articles de Tobias Frere-Jones explore le travail en coulisses permettant aux polices d'être fonctionnelles.
Un surlignage simple en CSS
Surligner les rangées d'un tableau en CSS est très facile, mais les colonnes ? Les pseudo-éléments sont mis à contribution dans ce tutoriel court, facile et astucieux de l'indispensable Chris Coyier.
Animer des pseudo-éléments
Les pseudo-éléments nous permettent d'ajouter à nos pages du contenu supplémentaire, et ils peuvent être animés ! Donovan Hutchinson utilise ici un pseudo-élément pour ajouter une touche d'élégance à un bouton.
L'effet gluant avec SVG
Lucas Bebber, développeur brésilien hyper créatif, propose son effet Gooey, qui a fait le buzz dernièrement. Outre une dose d'inspiration, on y trouvera de bonnes bases sur les filtres SVG.
Shape blobbing en CSS
Le shape blobbing c'est cet effet d'aspiration d'une goutte par une autre, réalisable en CSS à partir de filtres pour le flou et le contraste. Tutoriel clair de Chris Coyier.
Le morphing en SVG
L'animation d'un SVG avec CSS est facile, mais certaines propriétés SVG ne sont pas animables avec CSS. Chris Coyier montre ici comment réaliser simplement un morphing avec SMIL et Javascript.
Twitter et la recherche sémantique
Une présence robuste et construite avec soin sur Twitter peut aider de manière significative votre visibilité dans la recherche sémantique. Explications claires et conseils experts du grand spécialiste David Amerland.
Des sélecteurs virtuels en CSS3
En combinant les sélecteurs CSS3 :nth-child et :nth-last-child, Matt Mastracci invente des sélecteurs virtuels et s'amuse à créer une galerie d'images redimensionnables qui fonctionne sans JavaScript. Très malin, complètement magique.
Amélioration responsive
L'amélioration progressive n'est pas une technologie, c'est une façon de penser. Jeremy Keith montre ici comment cette idée est non seulement respectueuse des utilisateurs mais également incroyablement libératrice de créativité.
Qu'est-ce qu'un élément remplacé ?
Avez-vous déjà entendu parler des éléments HTML remplacés ? Vous les utilisez pourtant tous les jours sans le savoir, et connaître leur nature peut vous éviter quelques soucis. Par Dudley Storey.
Utiliser CSS object-fit
La propriété object-fit de CSS offre des options de redimensionnement et de présentation des images qui faciliteront la vie des designers. Belle présentation pleine de robots par l'ami Dudley Storey.
5 façons d'animer de manière responsable
Nous vivons une époque formidable de l'animation web. Mais tout à notre excitation, nous oublions parfois de nous poser la question du pourquoi ? Quelques rappels salutaires de Rachel "Jurassic" Nabors.
Masquer et détourer en CSS
Il est devenu compliqué de s'y retrouver dans le paysage changeant du clipping et du masking. Évolution des syntaxes, technologies, support... Chris Coyier fait le point, explications et illustrations claires.
Guide des animations SVG (SMIL)
Armez-vous de courage, voi ch'entrate... Voici le fameux guide de Sara Soueidan, pour tout savoir sur les animations SVG avec SMIL. Les animations SMIL permettent des choses impossibles avec CSS.
CSS animation, une introduction
Une présentation claire et vivante des animations CSS par Rachel Cope, avec exemples de code et présentation live sur CodePen. Un bon article pour apprendre ou pour réviser ses classiques.
Stores vénitiens 3D en CSS
Les variations sur cette transition ont longtemps été un pilier de jQuery. Toujours partant pour de nouveaux défis, Dudley Storey a imaginé une superbe solution 3D responsive en pur CSS.
CSS, aider la veuve et l'orphelin
CSS nous permet de contrôler facilement la première ligne d'un texte, mais sa capacité à contrôler la dernière ligne reste limitée. Un rappel sur widows et orphans par Dudley Storey.
Toi seul : utiliser only-child de CSS
On pourrait se demander comment l'utiliser, mais les cas d'utilisation sont nombreux. Comme souvent avec les pseudo-classes, il nous permet d'écrire un code concis et adapté au contenu généré dynamiquement.
Créer un background vidéo fullscreen avec HTML5
Il n'est pas possible d'intégrer une vidéo avec les propriétés CSS background ou background-image, mais Dudley Storey nous montre comment forcer l'apparition d'une vidéo responsive fullscreen derrière les éléments HTML.
Rendre un SVG responsif
Infiniment redimensionnable, le format SVG n'en est pas moins étonnamment difficile à rendre responsif. Dudley Storey montre comment y parvenir, avec un SVG image ou en ligne. Trop fort Dudley.
Un CSS concis avec currentColor
Osvalda Valutis s'est intéressé de près à currentColor et présente ici quelques cas concrets d'utilisation étonnants illustrant la façon dont currentColor nous permet d'écrire un CSS plus concis et cohérent.
La première variable CSS : currentColor
En attendant l'arrivée des variables CSS, Dudley Storey nous rappelle l'existence de currentColor et nous en montre quelques applications qui peuvent nous aider à renforcer la cohérence de notre design.
:empty, une pseudo-classe pas si vide
La pseudo-classe :empty est relativement peu connue. Dudley Storey montre ici comment l'utiliser, depuis l'application d'un style CSS aux tableaux et aux navigations dynamiques jusqu'au nettoyage de votre balisage HTML.
Les raccourcis HTML5
HTML 5 est moins strict que XHTML en ce qui concerne le respect des règles de balisage et autorise un certain nombre de raccourcis que nous présente rapidement Dudley Storey.
Qu'est-ce que la recherche sémantique ?
Spécialiste reconnu du web sémantique, David Amerland répond ici aux dix questions les plus courantes sur la recherche sémantique. Utilisateurs du web ou producteurs de contenu, nous sommes tous concernés.
SVG, style et animation avec CSS
Les articles de Sara Soueidan sont devenus une référence incontournable en matière de SVG. Sara passe ici en revue les étapes de l'application de styles et d'animation CSS aux SVG.
La pseudo-classe de négation
Parmi les pseudo-classes, il en est une qu'on oublie souvent, c'est :not(). La pseudo-classe de négation peut pourtant s'avérer très utile dans bien des situations, comme l'explique ici Shay Howe.
Portal CSS
Vous n'avez pas nécessairement besoin de JavaScript pour créer des projets 3D impressionnants. Ce projet de Donovan Hutchinson est une excellente introduction aux transformations et animations CSS, ludique et claire.
Fixer une div, guide complet
Fixer un bloc div est assez simple, Steve Pear nous en rappelle les bases et nous montre quelques petites choses moins évidentes qu'on peut faire avec les div fixes. Cool.
Dompter son critique intérieur
Vous connaissez le syndrome de l'imposteur n'est-ce pas ? Ce n'est qu'une des nombreuses manifestations de votre critique intérieur. Denise Jacobs nous présente ce vilain petit monstre, parfois utile malgré tout.
Initiation à Sass, 3 : mixins et placeholders
Laura Kalbag conclut son introduction à Sass avec les mixins et les placeholders, et la présentation de bibliothèques de mixins comme Compass et Bourbon. Maintenant, c'est à vous de jouer
Burnout
Le burnout, ou syndrome d'épuisement professionnel, touche beaucoup le secteur du développement web. Scott Boms l'a vécu personnellement, il en décrit les symptômes et surtout comment l'éviter ou s'en sortir.
Initiation à Sass, 2 : rythme vertical
La première partie de cette série présentait les bases de la syntaxe Sass. Passons maintenant aux variables et à l'imbrication des sélecteurs, et créons un rythme vertical dans notre page
Découvrir Susy
Susy vous permet de créer vos layouts à partir de grilles. Fonctionnant avec Sass, Susy est incroyablement flexible et devrait répondre à tous vos besoins. Introduction claire par Zell Liew
Initiation à Sass, 1
Dans cette série de 3 articles, Laura Kalbag présente Sass en nous proposant de la suivre progressivement dans son travail de création d'un site. Sass va vous changer la vie.
Sketch 3 : Maîtriser les courbes de Bézier
L'utilisation des courbes de Bézier est souvent compliquée. Peter Nowell nous introduit au fonctionnement et à la pratique des courbes de Bézier avec Sketch, dans ce tutoriel clair et détaillé.
L'imbrication des sélecteurs dans Sass
L'imbrication de sélecteurs est une fonctionnalité des préprocesseurs CSS d'utilisation courante. Tellement courante qu'elle peut devenir problématique. Hugo Giraudel, notre grand spécialiste de Sass, défend une position originale et radicale.
Auditer votre CSS
Auditer votre CSS vous aide à organiser votre code, à le rendre plus lisible, à éliminer les répétitions, mais aussi à améliorer les performances de votre site. Par Susan Robertson.
Créer une interface de Login avec Sketch
Sketch est une excellente application pour le design d'interface. Armando Sotoca nous conduit pas à pas dans la réalisation du design d'une interface de connexion, une excellente introduction à Sketch3.
Théorie des couleurs, 3 : Créer votre palette
Troisième et dernier article de notre série sur la théorie des couleurs. Nous connaissons la signification et la terminologie des couleurs, passons maintenant à la création des schémas de couleurs.
Centrer en CSS, un guide complet
Le centrage en CSS est souvent un véritable casse-tête, car il existe plusieurs techniques différentes selon les cas d'utilisation. Chris Coyier les a listées et nous donne toutes les solutions.
Images responsives : cas d'utilisation et snippets
Cet article détaillé d'Andreas Boven complète parfaitement l'introduction aux images responsives déjà publiée ici, en présentant des cas concrets d'utilisation et le code HTML correspondant. Très complet, technique mais clair!
Raccourcis et astuces Emmet
Emmet est un plugin pour éditeurs de textes qui vous aide à créer HTML et CSS à la vitesse de l'éclair. Rappel des raccourcis principaux et quelques fonctionnalités moins connues.
Les filtres CSS
En été, il n'y a pas que les filtres solaires, c'est aussi le moment idéal pour se pencher sur une propriété qui peut être utile... ou pas. Par Paula Borowska.
Créer des sphères en CSS
C'est l'été et nous avons de plus en plus l'impression d'être les seuls à travailler... Mais nous aussi nous pouvons faire des bulles, grâce à Donovan Hutchinson, maître des sphères.
CSS Blend Modes, un petit guide
Nous avons déjà découvert CSS Blend Modes avec l'introduction de Chris Coyier, voici un article plus fouillé de Shwetank Dixit pour approfondir notre connaissance de cette nouvelle fonctionnalité de CSS.
Théorie des couleurs, 2 : Concepts et terminologie
Suite de notre mini-feuilleton: pour utiliser efficacement les couleurs, il est utile de connaître quelques concepts et la terminologie des couleurs. L'article de Cameron Chapman est illustré de nombreux exemples.
Sketch et les vecteurs
Sketch3 est un outil merveilleux, il brille tout particulièrement dans le domaine des formes vectorielles. Dans ce tutoriel bien fait, Peter Nowell établit les bases, puis nous apprend quelques astuces.
Sass et interpolation
Tout ce que vous avez toujours voulu savoir sur l'interpolation dans Sass, expliqué par Hugo Giraudel. Une bonne introduction toute simple et les cas d'utilisation principaux, pour interpoler avec plaisir.
Théorie des couleurs, 1 : Signification de la couleur
C'est la saison, voici le feuilleton de l'été. Une série de trois articles sur la théorie des couleurs: signification des couleurs, concepts, application, le tout bien illustré. Par Cameron Chapman.
Créer une icône flat avec Sketch
Le succès du précédent tutoriel Sketch 3 imposait une suite. Dans ce nouveau tutoriel très clair, Abhijeet Wankhade réalise une icône simple, permettant de montrer quelques fonctionnalités essentielles de Sketch.
Continuum
Jeremy Keith, dans la continuité du célèbre Tao du Webdesign, défend l'idée du web comme un continuum - un espace ouvert à l'expérimentation, soucieux d'accessibilité au contenu. Engagé, constructif, définitif.
Animer un dégradé SVG
Dans son article précédent, Joni Trythall décrivait les dégradés SVG. Passons maintenant à l'étape suivante, leur animation ! Une bonne introduction aux notions les plus basiques, à partir d'exemples simples.
Sketch, tutoriel 01
Sketch 3, pour Mac, est une alternative sérieuse à Photoshop et Illustrator. Sébastien Gabriel, Frenchie designer chez Google propose dans ce tutoriel hyper-détaillé de passer en revue ses caractérisques principales.
Les dégradés SVG
Dégradés CSS ou dégradés SVG ? C'est une longue discussion, les deux ont leurs avantages, leurs utilisations particulières. Joni Trythall présente les dégradés SVG, en se concentrant sur leur utilisation pratique.
CSS Blend Modes, une introduction
De superbes effets Photoshop que nous admirons sur certains sites statiques peuvent aujourd'hui être réalisés facilement avec CSS3 Blend Modes. Chris Coyier fait le tour du sujet en amateur créatif.
Ligne animée en SVG
Chris Coyier s'est intéressé aux animations SVG qu'on trouve un peu partout et il a voulu comprendre la base de cette technique. Il nous livre ses observations, c'est évidemment passionnant.
Un composant Sass en 10 minutes
Dans ce bref article, Hugo Giraudel crée un composant Sass très simple et nous donne quelques bons principes de base pour construire nos propres composants. Limpide et passionnant comme toujours.
Subtilités de CSS3 Transitions
On aime bien Louis Lazaris à la Cascade. Dans cet article, Louis montre quelques utilisations inattendues des transitions CSS3 et un piège à éviter. Animez vos pages en pur CSS.
CodeKit 2.0
D'accord, il y a Grunt, mais pour la plupart des projets, les applications comme CodeKit et autres sont souvent plus appropriées, simples et efficaces. Bryan Jones présente Codekit, pour Mac.
Images responsives : picture et srcset
Charger les images en fonction de la résolution d'écran de l'utilisateur, avoir des images responsives, faire de la direction artistique... la révolution est en marche ! Belle présentation par Eric Portis.
Créer un guide de style
Les guides de style sont utilisés par les grandes entreprises pour assurer la cohérence de leur site et gagner en efficacité, mais tout designer exigeant peut s'inspirer de cette démarche.
CSS Shapes, une introduction
L'article de Sara Soueidan paru dans A List Apart a fait le buzz dernièrement. Sara présente ici avec clarté ce qui sera l'avenir des formes et du design dans CSS.
API, communication en temps réel
Le serveur ne peut pas faire de requêtes, mais il existe des moyens de savoir où en est notre pizza ! Brian Cooksey nous dit tout sur l'intégration et les webhooks.
La console, une introduction
Ah, la console ! Terrain de jeu pour certains, écran terrifiant pour d'autres, il devient chaque jour plus indispensable d'en connaître au moins les rudiments. Par John Long, bienfaiteur des designers.
Animer un SVG avec CSS
Chris Coyier s'est amusé à créer une petite animation SVG en CSS, sans passer par des bibliothèques compliquées. C'est fait maison, simple, efficace et expliqué de façon claire comme toujours.
Concevoir une API
On passe aux choses sérieuses… Dans cet article, nous allons parler des composants d'une API en en créant une nous-mêmes. Par l'ami Brian Cooksey, le roi de la pizza pepperoni.
Combinateurs et pseudo-classes CSS
Nous poursuivons notre introduction aux basiques de CSS avec un article de Steven Bradley sur les combinateurs et les pseudo-classes. La maîtrise de cette syntaxe vous aidera à mieux coder.
Termes et définitions CSS
Voici une liste rapide des termes CSS communément employés, un aide-mémoire pratique, une révision utile, et pour ceux qui commencent à apprendre CSS une bonne façon de baliser le chemin
Pseudo-éléments :before & :after
Cet article de Louis Lazaris s'adresse à ceux qui ont découvert avec émerveillement les trucs sympas qu'on peut faire avec les pseudo-éléments et veulent mieux connaître cette technique très utilisée.
API, authentification
Arriver à se parler, c'est bien, il reste à répondre à une question existentielle : comment le serveur sait-il que le client est bien celui qu'il prétend être ? Par Brian Cooksey
Des colonnes de même hauteur
Question récurrente : comment faire pour avoir des colonnes de même hauteur dans notre mise en page multi-colonnes ? Kezz Bracey propose une solution astucieuse pour résoudre ce problème vieux comme CSS.
API, formats de données
Dans cet article, explorons avec Brian Cooksey les données que nous fournissent les API, leurs formats et la façon dont HTTP rend tout cela possible. De plus en plus passionnant.
API, les protocoles
Dans l'article précédent, Brian Cooksey nous a fait connaître les deux côtés impliqués dans une API, le serveur et le client. Regardons maintenant de quelle manière ils communiquent entre eux.
API, une introduction
Vous êtes-vous déjà demandé comment Facebook affiche automatiquement vos photos Instagram ? Brian Cooksey commence ici une série d'articles passionnants sur les API, dans un langage clair, imagé, sans jargon inutile.
Centrer un bloc div, guide complet
Nous avons tous rencontré le problème du centrage de div en CSS. Steve Pear fait le tour de la question et propose des solutions pour tous les cas de figure.
Utiliser Flexbox
Flexbox est une technique simple et puissante, mais elle pose encore quelques problèmes de compatibilité. Sean Fioritto répond ici à la question : quand pourrai-je utiliser Flexbox dans le monde réel?
Les free fonts aujourd'hui
Jeremiah Shoaf, le créateur du formidable site Typewolf, fait le point sur les polices gratuites et nous propose ses préférées. On peut trouver de vraies pépites aujourd'hui en open source!
Introduction aux Custom Elements
Vous avez certainement perçu le vacarme qu'on fait autour des composants web et ce qu'ils vont apporter. Peter Gasston présente ici les éléments personnalisés, un petit guide pour mieux comprendre.
Les dégradés CSS
Chris Coyier a mis à jour ses articles d'introduction aux dégradés CSS, linéaires, radiaux, répétés, une bonne occasion de réviser ses classiques en compagnie d'un guide toujours clair et concis.
Stratégie responsive
On sait assez bien ce qu'est le design responsif, mais comment le mettre en place, surtout lorsque votre site est déjà ancien ? Brad Frost fait le tour des principales stratégies.
Sass : tout sur @extend
Hugo Giraudel, notre grand spécialiste de Sass, est de retour. Il fait le point de façon précise et claire sur ce que personne ne vous avait jamais dit sur @extend.
Sass : Mixin ou Placeholder ?
Hugo Giraudel est un spécialiste internationalement reconnu de Sass. Il explique ici clairement et simplement la différence entre mixin et placeholder, comment utiliser l'un ou l'autre ou... combiner les deux.
Data URI
Saviez-vous que vous n'aviez pas besoin d'utiliser un lien externe vers une image, vous pouvez embarquer les données de l'image directement dans votre document avec le format codé Data URI.
Flexbox, guide complet
Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici.
Utiliser SVG
Dans cet article complet et clair, Chris Coyier s'intéresse à la mise en oeuvre concrète de SVG pour votre design. Pas de théorie, cercles, rectangles, non, rien que du concret.
IDs et Classes CSS
Parmi les sélecteurs les plus communs, on trouve "id" et "class". Cet article engagé de Louis Lazaris décrit leurs différences et les effets potentiels de l'utilisation de l'un ou l'autre.
Le positionnement CSS
Louis Lazaris fait le tour de la propriété CSS position. Pour apprendre ou pour réviser.
CSS Block, Inline et Inline-Block
Le premier d'une série de 3 articles de Louis Lazaris sur des notions de base de CSS. Nous commençons aujourd'hui avec les notions parfois confuses de Block, Inline et Inline-Block.
Introduction à RDFa
Le web est toujours plus sémantique, mais qu'est-ce que cela signifie ? Pourquoi et comment mettre en oeuvre une communication compréhensible par les machines ? Avec RDFa, c'est simple. Par Mark Birbeck.
Do's & Don'ts de la Typographie
L'essentiel du contenu disponible sur le web est du texte, il est donc fondamental de comprendre les principes de base d'une bonne typographie. Un rappel en illustrations par Sam Jones.
Qu'est-ce que le DOM ?
Un article court et simple pour une première introduction au DOM, le Document Object Model, par Chris Coyier. Ce qu'il est, et ce qu'il n'est pas, dans un langage clair.
L'avenir du streaming
Nous sommes à l'ère du contenu et des métadonnées, et les possibilités d'exploitation de ces données sont infinies. Très peu est fait dans ce sens, comme le remarque Khoi Vinh.
La chorégraphie du contenu
Les sites responsifs ou adaptatifs modifient l'architecture de leur contenu afin de s'adapter aux dimensions de l'écran. Avec ces excitantes potentialités surgissent des défis tout aussi passionnants. Par Trent Walton.
Autoprefixer, un postprocesseur pour les préfixes vendeurs
Autoprefixer analyse la syntaxe des fichiers CSS et ajoute des préfixes vendeurs aux règles CSS en utilisant la base de données de Can I Use pour déterminer les préfixes nécessaires.
De la Typographie Web
Être designer demande une compréhension profonde de la typographie et de la sélection et de l'association des polices de caractères. Le grand Jason Santa Maria l'explique avec intelligence et sensibilité.
Goodbye, Zen Coding. Hello, Emmet!
Emmet, anciennement connu comme Zen Coding, est le plugin d'éditeur de texte qui vous fera gagner le plus de temps. Une introduction claire, illustrée, complète et passionnante par Zeno Rocha.
Emmet, un turbo dans votre CSS
En complément de l'article général sur Emmet, Josh Medeski se concentre ici sur son utilisation pour CSS : comment Emmet transforme instantanément de simples abréviations en snippets de code CSS complexes.
Les motifs CSS3
La galerie de motifs CSS3 de Lea Verou a fait le tour du web. Lea explique ici dans le détail comment ces motifs sont créés, avec la technique des dégradés.
L'approche humaine
Pourquoi ne pas adopter une stratégie similaire à celle de l'amélioration progressive dans notre approche humaine du web ? Il est grand temps d'évoluer. Encore un article inspirant de Trent Walton.
Grunt pour ceux qui pensent que Grunt est compliqué
On parle beaucoup de Grunt aujourd'hui, mais les articles disponibles sont souvent abscons et techniques. Pourtant Grunt n'est pas réservé aux spécialistes, comme le montre cette introduction de Chris Coyier.
Design atomique
La création de systèmes de design a été au coeur de nombreux débats passionnés. Brad Frost propose ici sa vision, basée sur une comparaison avec les atomes et les molécules.
Se lancer dans Sass
Qui a encore peur aujourd'hui de Sass et des préprocesseurs en général ? David Demaree nous montre dans cette introduction claire et complète la simplicité et l'utilité de Sass. Indispensable, vraiment.
Box-sizing pour les nuls
Box-sizing est une alternative au modèle de boîte standard, encore trop peu utilisée. Elle est très simple et peut réellement changer votre travail. Une très bonne introduction par Paula Borowska.
Le web, 95% de typographie
Un bref rappel par Oliver Reichenstein, fondateur d'Information Architects, de l'importance de la typographie dans le web, ce qu'elle est et ce qu'elle n'est pas. Simple, direct, éclairant et inspirant.
Style vs Design
Dans cet article qui n'a pas pris une ride, le grand Jeffrey Zeldman nous rappelle les risques qu'il y a à confondre Style et Design, la surface et la substance.