Tous les articles
➡️ Il y a 87 articles
Contrôler l'affichage du texte
Comment gérer le retour à la ligne ou les césures ? Il y a beaucoup plus de façons qu'on ne le pense, et plein d'astuces possibles.Améliorer un texte à faible contraste
Le contraste insuffisant d'un texte est un obstacle pour les utilisateurs malvoyants ou simplement à la vue déclinante. Et pourtant, le problème de contraste est partout.Une taille de police enfantine
Défense et illustration des tailles de police plus grandes pour nos utilisateurs, par Tyler Sticka. La Cascade ne peut que plussoyer.Comprendre CSS Grid : Grid template areas
Dans cette nouvelle série, Rachel Andrew analyse la spécification CSS Grid Layout. Elle poursuit ici avec les zones de grille.Comprendre CSS Grid : les lignes Grid
Dans cette nouvelle série, Rachel Andrew analyse la spécification CSS Grid Layout. Elle poursuit ici avec les lignes de grille.Comprendre CSS Grid : créer un container Grid
Dans cette nouvelle série, Rachel Andrew analyse la spécification CSS Grid Layout. Elle commence par ce qui se passe quand on crée un conteneur grid.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.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é
Le DOM (Document Object Model) est une interface pour vos pages web. C'est une API permettant aux programmes de lire et de manipuler le contenu de la page, sa structure et ses styles. Passons tout cela en revue pour comprendre comment ça marche.CSS Flexbox et la dimension des boîtes
Nous allons explorer le dimensionnement en Flexbox, qui est souvent un casse-tête : comment Flexbox décide-t-il de la taille de nos items ?CSS Flexbox et l'alignement, guide complet
Dans cet article, nous examinons les propriétés d'alignement de Flexbox tout en découvrant quelques règles de base qui nous aideront à nous rappeler comment elles fonctionnent sur les axes principal et transversalLe DOM, c'est quoi exactement ?
Le DOM (Document Object Model) est une interface pour vos pages web. C'est une API permettant aux programmes de lire et de manipuler le contenu de la page, sa structure et ses styles. Passons tout cela en revue pour comprendre comment ça marche.Que se passe-t-il quand on crée un Flexbox flex container?
Lorsque les gens trouvent Flexbox difficile ou déroutant, c'est souvent parce qu'ils essaient de l'utiliser comme Grid layout.Comment fonctionne CSS display: contents
20 octobre 2018,cssNous pouvons contrôler la façon dont la boîte et ses enfants sont dessinés sur la page grâce à la propriété CSS displayCSS 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!JSON pour les débutants
23 mars 2017,jsonJSON 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.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).SVG, la syntaxe Path
29 décembre 2016,svgL'é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.Comprendre SVG viewBox
26 décembre 2016,svgL'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
26 décembre 2016,svguse 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.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.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.Sur :not et la spécifité
Ire Aderinokun 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é!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.Cacher des éléments avec CSS
23 janvier 2016,cssEncore 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.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.Comprendre SVG preserveAspectRatio
22 novembre 2015,svgAprè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
22 novembre 2015,svgSVG viewport et viewBox peuvent sembler compliqués et intimidants lorsqu’on débute avec SVG. Excellente introduction agrémentée d'illustrations fruitées.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.Les bases de SVG : Groupes
17 octobre 2015,svgSuite 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.:nth-child
06 septembre 2015,cssLe sélecteur :nth-child (“n-ième enfant”) permet de sélectionner un ou plusieurs éléments en fonction de leur ordre dans la source et selon des critères que vous déterminez.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!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
19 juillet 2015,svgLorsque 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.Pourquoi height: 100% ne marche pas
19 juillet 2015,cssLe 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%.Mécanique des polices de caractères, 2
18 juillet 2015,typographieDeuxiè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.Guide de Flexbox : space-between, l'oublié
5 juillet 2015,flexboxTout 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.Les bases de SVG : Lignes simples et multiples
4 juillet 2015,svgAprès les formes de base de SVG, Dudley Storey présente les lignes, simples et multiples et... ce n’est pas si simple.Le $Path vers la lumière
7 juin 2015,outilsL'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 crisesLes bases de SVG : Polygones
7 juin 2015,svgDudley Storey termine la série d'articles sur les formes de bases SVG avec les polygones : triangles, étoiles et autres formes plus complexes.L'ajustement optique
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.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!Les bases de SVG : Rectangles et Carrés
26 mai 2015,svgDudley 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
25 mai 2015,svgMê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.Comprendre Clip Path
La propriété clip-path de CSS est un super outil pour réaliser des effets de style5 règles pour rendre SVG accessible
rendre SVG accessible demande encore du travail, simple avec ces 5 règles proposées par Dudley Storey3 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. Dudley Storey nous en montre ici tout l'intérêt.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.Mécanique des polices de caractères, 1
14 février 2015,typographieNotre 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.Le morphing en SVG
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.Shape Blobbing
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.Qu'est-ce qu'un élément remplacé ?
13 janvier 2015,htmlAvez-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.Utiliser CSS object-fit
13 janvier 2015,cssLa propriété object-fit de CSS offre des options de redimensionnement et de présentation des images qui faciliteront la vie des designers.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 ?Guide des animations SVG (SMIL)
Pour tout savoir sur les animations SVG avec SMIL. Les animations SMIL permettent des choses impossibles avec CSS.CSS, aider la veuve et l'orpheline
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
10 décembre 2014,cssLes cas d'utilisation de only-child 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
9 décembre 2014,svgInfiniment redimensionnable, le format SVG n'en est pas moins étonnamment difficile à rendre responsif. Dudley Storey montre comment y parvenir.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:empty, une pseudo-classe pas si vide
29 novembre 2014,cssDudley Storey montre ici comment utiliser la pseudo-classe :empty, depuis l'application d'un style CSS aux tableaux et aux navigations dynamiques, jusqu'au nettoyage de votre balisage HTML.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
Ce projet de Donovan Hutchinson est une excellente introduction aux transformations et animations CSS, ludique et claire.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.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.Créer des sphères en CSS
Nous aussi nous pouvons faire des bulles, grâce à Donovan Hutchinson, maître des sphères.Les filtres CSS
26 juillet 2014,cssEn é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... par Paula Borowska.Les dégradés SVG
6 juin 2014,svgLes dégradés SVG permettent de remplir quasiment sans effort une forme complexe, et par rapport aux dégradés CSS ils présentent l'avantage d'être présents dans le DOMSubtilités de CSS3 Transitions
30 mai 2014,animationLouis Lazaris montre quelques utilisations inattendues des transitions CSS3 et un piège à éviter. Animez vos pages en pur CSS.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.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.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.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.Les dégradés CSS
09 mars 2014,cssSurligner 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.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.CSS Block, Inline et Inline-Block
18 janvier 2014,cssLe 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.Le positionnement CSS
18 janvier 2014,cssUne technique de mise en page CSS qui est là pour durer est le positionnement CSS, c'est à dire l'utilisation de la propriété positionDe 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é.Emmet, un turbo dans votre CSS
20 décembre 2013,cssJosh Medeski se concentre ici sur Emmet pour CSS : comment Emmet transforme instantanément de simples abréviations en snippets de code CSS complexes.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.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.Box-sizing pour les nuls
Box-sizing est une alternative au modèle de boîte standard. Elle est très simple et peut réellement changer votre travail. Une très bonne introduction par Paula Borowska.