Ressources pour 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)

Ressources

Examples

Créer de la forme

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

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

box-shadow

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

hey
hey
hey

Composition de boite

content

margin

border/background

padding

margin (top, right, bottom, left), auto, permet de centrer des éléments dans la page, il est nécéssaire de contraindre la width (largeur) pour permettre des marges.

padding (top, right, bottom, left)

position, fixed, permet de placer des éléments relatifs à l'écran, en les sortant du flut de la page. sticky, permet de placer des éléments qui reste dans le flux de la page, mais qui se fixe à partir d'une position définie.

Composition de texte

  • alignement text-align
  • caractère
    • font-size,
    • font-weight,
    • font-style,
    • font-familly
  • espacement
    • line-height,
    • letter-spacing,
    • words-spacing

Unitée

  • px, pixels
  • %, relatif à la boite parente
  • em, relatif à la font-size
  • vh et vw, relatif au viewport