User:Wyn/Special Issue 26

Study CSS like a linguist

Introduction to the core function of the CSS

In the CSS workshop, We learned the CSS properties like linguists, we explored two fundamental concepts: display and position properties. The display determines how elements interact with each other on a page; The position defines how elements are placed within their container.

We could choose the display and position group, focusing on the fundamental properties that how they work in the webpage.

I learned that display determines how elements relate to each other in the document flow. The key values we covered were:

display: block

- Elements take up the full width available and start on a new line；

display: inline

- Elements only take up necessary space and flow within the text

display: inline-block

- A hybrid that allows width/height settings while flowing inline

display: none

- blank; Completely removes the element from view

The Position Property: Position controls where elements are placed relative to other elements or the viewport. We explored:

position: relative

- Elements can be offset from their normal position

position: absolute

- Elements are positioned relative to their nearest positioned ancestor

position: fixed

- Elements are positioned relative to the viewport

CSS drawing

The face metaphor fits the functions of display and position. To understand concepts, I created an interactive face using HTML and CSS. This practice helped me visualize how display and position work together. The face became my canvas (like absolute positioning), with features like ears, eyes, and mouth representing different positioning scenarios. I used slider input (-webkit-slider-thumb) to move the facial features. Also, add transform and translateY to achieve precise positioning of the thumbs. The combination of different display and position values creates complex layouts.

position: relative on the face container creates a positioning context for absolute-positioned elements (like the ears)

position: fixed is similar to the facial feature (like eye-group and eyebrow-group) in the face container and makes different visual effect

display: block is like the face outline - it always takes up the full width available, starting on a new line

display: flex helps arrange eyes and eyebrows in pairs (but I didn't use it in the end) in an organized way

The face metaphor helped me remember that: The face itself (container) is like position: relative, providing a reference point Features like ears (position: absolute) need the face as their positioning context Eyes and eyebrows (display: flex) need to maintain their relationship with neighboring elements.

Learning-by-doing

Aesthetic swap

Dorian introduced a browser extension - scratch that allows direct CSS code modification, changing the webpage styling. This helped us deepen our understanding of CSS by actively transforming existing websites. Rather than just building from zero, I chose to explore how CSS can reshape existing web content into different aesthetic styles.

I am interested in ASCII(American Standard Code for Information Interchange) art recently, as a character encoding standard that became fundamental to early computer and internet communication, it represents a significant moment in internet history and design. In the early days of the internet, when graphical capabilities were limited, based on 128 characters and the monospace font-size, the ASCII art was a creative solution for visual expression. Guidance from Dorian helped me better understand the core concept behind this practice.

Historical context

ASCII art reveals an even deeper historical context. Tracing back to the ages without the internet, typewriter artists were already exploring how standard characters could be arranged to create visual patterns and images, as Joseph explained in the prototype course. Variety typewriters and their historical perspective helped us dig the root of typography and found that ASCII art wasn't just a technical limitation of early computers, but part of a longer tradition of creating art with text characters.

Practice! Practice! Practice!

https://pad.xpub.nl/p/csssheet

The key element of ASCII Art is the character itself so that I can play with the font and the font space; It always uses overlap and shadow effects to create a pattern; The frame has character decoration, so I can emphasise to mimic the ASCII Art. For the colour, it is always black and white, but for the nostalgic effect, I add grey and green. The details as follows:

• Character Manipulation:

Monospace fonts ensure each character takes up the same space

Letter spacing and line height control create the text pattern

Using specific ASCII characters like "░▒▓" and "..・。.・゜✧"

• Layering and Shadow Effects:

Pseudo-elements (::before and ::after) create overlapping layers

Text shadows add depth

Mix-blend-mode creates texture through layer interaction

• Decorative Frames:

Button brackets "[ ]"

Border decorations with "-+%$%+-."

Frame-like structures using simple ASCII characters

• Image Treatment:

Converting images to black and white (grayscale)

Increasing contrast for sharper definition

Adding pixelation effects

• Text Effects:

Using opacity for transparency

Creating patterns through character repetition

Implementing hover animations that mimic old computer displays

The main CSS commands:

1. Positioning:

• position: relative/absolute
• top, left
• z-index

1. Text Styling:

• font-family: monospace
• letter-spacing
• line-height
• text-shadow

1. Display and Layout:

• display: inline-block/block
• overflow: hidden
• white-space
• word-break

1. Visual Effect:

• opacity
• mix-blend-mode
• filter (for images)
• content (for pseudo-elements)

1. Border and Decoration:

• border
• box-shadow
• outline