Learning cool CSS words with attitude
Declarations is an ongoing artistic research project into the poetic materiality of the CSS web-standard and its visual-political-cultural echoes on design-artistic practices and our daily lives. Declarations is a love letter to the crafts of designing with language.
Learning cool CSS words with attitude
Sometimes you want to quickly dip your hand into the linguistic and visual materiality of the web without too much reading, for example during a workshop. This page is intended at triggering curiosity and ideas by showing a bunch of shapes and words of CSS. It is meant to be looked at with the inspector open.
it can be used with a single color, or gradient, or even images.
You can find cool texture on our friend Daniel's (aka melonking) website
there is plenty of border style, like solid, inset, dashed and dotted. border multiple materialities can be used as a drawing tool.
The cool thing about shadow is that you can overlay many of them. parameters are in order: top, left, thickness, bluryness, color.
text shadow works basically the same but with one less value (we can't control the shadow thickness, only the bluryness).
transform contains infinite possibility, notably scale, rotate and skew. it reshapes the object with lots of authority, like if it was made out of clay.
By using font-family, font-size, font-style and font-weight, (or text-transform), you tweak the individual glyph's themselve.
By using text-align, line-height, letter-spacing and word-spacing, you tweak the flow and spacing between the glyphs.
By using text-decoration, you can add decoration to the text.
Or using the un-official -webkit-text-stroke, to paint a whole new stroke around the glyphs.
You'll find a lot more CSS typography example on felix wasler website