Wiki Scratching

Flux en CSS

“There is a problem with design on the web. It's problematic to design in a way that is going to be device agnostic. [...] To design for a multitude of unknown canvas [...] Design not longuer control but suggest.”

Miriam suzanne, CSS is weird

Composition de texte

Changer l'alignement Ă  gauche, Ă  droite au milieu d'un texte avec text-align.

Le caractĂšre peut ĂȘtre customizer avec

La composition typo peut ĂȘtre rĂ©aliser avec

De nombreux examples sont accessible sur le site de Felix Wasler, web typography sketches.

Superposition

Marges, colones, et centrer

La proprieter columns: 2 auto; permet de deviser son texte en 2 ou plusieurs colones. En l'utilisant en combinaisont avec column-span: all; sur les titres par example (h2) on reset le flux de colones Ă  chacunes de leur apparition.

On peut centrer des éléments en leur donnant une margin: 1em auto; et un taille plus petite de la largeur de la page avec max-width: 320px;. Il est également possible de donner des marges négatives pour faire déborder certains éléments.

En utilisant p:nth-of-type(odd) ou p:nth-of-type(even) il est possible de styliser un paragraphe sur deux, par example en leur donnant des marges diffĂ©rentes pour crĂ©er des dĂ©calages. On peut aussi ĂȘtre plus prĂ©cis avec p:nth-of-type(5) pour donner un style au 5ieme paragraphe exclusivement.

Display alternatifs

Les éléments HTML sont par defaut soit en display: block, soit en display: inline, le premier représente un rectangle solide qui prend toute la largeur de la page et la hauteur qui lui est nécéssaire, le second représente du texte qui passe d'une ligne à l'autre dÚs qu'il n'y a plus de place pour continuer.

Il existe d'autre display, tel que