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.

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é!

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

: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.

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.

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.

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, 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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

De la Typographie Web

Être designer demande une compréhension profonde de la typogaphie 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

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.

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.

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.