Wiki Scratching

Dessiner en CSS

I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology. Too often, the internet is cast as a wide-open, infinitely malleable material.

Frank Chimero, The Web’s Grain (2015)

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.”

John Allsopp, A Dao of Web Design (2000)

Liens pratiques

Le modèle d'une boite

Chaque <div> en HTML se structure comme ceci

le contenu apparait dans cette zone

margin

border/background

padding

box-sizing: border-box; associe la taille de la boite à sa surface qui inclue le padding. Cela permet d'éviter des erreurs d'overflow, typiquement si on précise la taille d'une boite fait 100% de son parent, tout en lui ajoutant du padding.

max-width, permet de limiter la taille d'un div pour ne pas avoir de ligne de texte trop grande, combiné avec margin: auto cela centre la boite dans l'écran tout en gardant sa responsivité.

Créer de la forme

background,
soit juste une couleur, soit des dégradés (linear-gradient(), radial-gradient(), conic-gradient()),
soit une images, avec url('nomdelimage.jpg').

border, border-radius, et notamment border-style (solid, inset, dashed, dotted).

box-shadow, en en superposant plusieur.

l'équivalent pour le text est text-shadow, on peut aussi en superposer plusieur.

ombre
ombre
ombre
ombre

transform (scale(), rotate(), skew())

Hello
Hello
Hello
Hello

Unitées

Example de dessins en CSS