NeoGeo

Le choix des armes outils

We fastened a pencil to a brick and experimented. Figure 2 shows the results, compared with typewriting and ordinary pencil writing. With the brick pencil, we are slower and less precise. If we want to hurry the writing, we have to make it larger. Also, writing the passage twice with the brick-pencil tires the untrained hand and arm. 1

Douglas Engelbart pencil tappered to a brick

Les outils avec lesquels nous agissons sur le monde ont une influence sur nos actions. L’usage d’un outil aparemment (voire volontairement) inadapté nous amène à reconsidérer les choix que nous pouvons faire et les formes que nous pouvons produire avec lui.

« J’aime bien prendre l’exemple des baguettes chinoises. A priori, ça sert à manger. Si tu en fais un truc pour tenir une lampe, tu les détournes de leur finalité d’origine. Eh bien voilà, tu as hacké une paire de baguettes chinoises »2

Dessiner et peindre avec CSS

La première vocation du langage CSS n’est évidemment pas d’être un outil de dessin, mais en tordant le langage, en le hackant, on peut produire des formes, des couleurs, des ombres, des dégradés, des motifs, bref, dessiner et peindre.

Parmi les pratiques de dessin avec CSS, certains usages sont virtuoses, reproduisant la Joconde, copiant les peintres flamands ou ré-explorant la peinture du XIIe 3. D’autres explorent le champ typographique, dessinant des lettres, des alphabets, voire des systèmes typographiques complets.

Cet usage de CSS est devenu un exercide de style, poussant la contrainte jusqu’à utiliser un seul élément HTML, donnant lieu à un nombre considérable de démos plus ou moins créatives.

Outils

Positions

La propriété CSS position peut prendre plusieurs valeurs (voir la documentation). Dans le contexte de dessin / peinture en CSS, c’est la valeur absolute (et fixed) qui seront les plus utiles. Elles permettent de positionner des éléments grâce aux propriétés associées top, right, bottom et left, auxquelles on peut attribuer des valeurs en pourcentage, en pixels ou en vw et vh (unités relatives auviewport, la zone visible du navigateur)

Exemples

Border-radius et border

La propriété border-radius permet de d’arrondir les coins d’un rectangle et le transformer en une ellipse, un cercle ou une forme ovoïde bizarre.

La propriété border peut avoir de nombreux styles : dotted, dashed, groove, ridge, solid, outset, double…

Exemples

Background: Linear gradients

On peut utiliser des dégradés linéaires en tant que background-image. On peut déterminer son point de départ et son angle, puis on détermine les couleurs et leurs positions.

Exemples

Le site cssgradient.io propose un générateur de dégradés ainsi que de nombreux dégradés prédéfinis.

Background: Radial gradients

On peut utiliser des dégradés radiaux en tant que background-image. On détermine son centre, on peut définir sa taille, puis on détermine les couleurs et leurs positions.

Exemples

Le site cssgradient.io propose aussi de générer des dégradés radiaux.

Background: Conic gradients

On peut utiliser des dégradés coniques (les transitions entre les couleurs ont lieu autour d’un centre plutôt que depuis le centre). On détermine son centre, on peut définir sa taille, puis on détermine les couleurs et leurs positions.

Exemples

Le site cssgradient.io propose aussi de générer des dégradés radiaux.

Background: Repeating gradient

Les dégradés linéaires ou radiaux peuvent être répétés pour générer des motifs, grâce aux propriétés d’arrière-plan repeating-linear-gradient et repeating-radial-gradient ou aux possibilités de dimensionnement des images d’arrière plan proposées par background-size.

Exemples

Le site magicpatterns.design, celui de Temani Aff ou de Léa Vérou proposent un certain nombre de motifs basés sur ces possibilités.

Multiple backgrounds

Un élément peut avoir plusieurs arrières-plans. Les propriétés de dégradés doivent être séparées par des virgules. Les exemples ci-dessous n’utilisent que les dégradés précédemment évoqués mais on peut également utiliser des images (png, jpg, svg, gif) multiples en tant qu’arrières-plans.

Exemples

Transformations

Les transformations CSS sont documentées ici. Elles permettent d’affecter aux éléments des rotations, des inclinaisons, des mises à l’échelle ou des translations.

Exemples

Variables et calculs

Grâce à calc, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. On peut l’utiliser en écrivant width: calc(100% - 60px).

Notamment en conjonction avec calc, les variables CSS (ou propriétés personnalisées) sont un moyen très puissant pour affecter des valeurs et les réutiliser dans un document. Elles sont initialisées grâce à la notation --ma-variable: 20px; et sont accessibles en utilisant la notation var(--ma-variable).

Exemples

Miscellanées

  1. Nous avons fixé un crayon à une brique et avons fait des expériences. La figure 2 montre les résultats, comparés à l’écriture dactylographique et à l’écriture au crayon ordinaire. Avec le crayon-brique, nous sommes moins rapides et précis. Si nous voulons accélérer, nous devons écrire plus grand. De surcroît, le fait d’écrire deux fois le passage avec la brique-crayon fatigue la main et le bras non entraînés. — source ↩

  2. Brian Harvey, cité par Anaëlle Guitton, Hackers : Au cœur de la résistance numérique, Paris, Au Diable Vauvert, 2013 ↩

  3. Voir ce thread twitter dans lequel le projet est soumis aux déformations produites par l’usage d’anciens navigateurs web. ↩