User:Zuhui/SI26/Storybook/CSS 1

CSS Prompts

↳ its current state

CSS + Next sibling combinator mdm

no-sibling selector stackoverflow
pseudo elements
animating single div art
singlediv.com

Clip-path mdn
Clip-path generator cssportal

SVG mdn
SVG Clip-path mdn

background w3c

fancy border-radius
the shapes of css css-tricks
background patterns-conic/linear gradients css-tricks

conic-gradient mdn
repeating conic-gradient mdn

radial-gradient mdn
repeating radial-gradient mdn
radial gradient recipes css-tricks
repeating radial-gradient example

linear-gradient
repeating linear-gradient

getting deep into shadows css-tricks

border-image-repeat mdn
repeating-border images css-tricks

Foundation

sentence in the middle

#sentence {
    position: fixed;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    z-index: 99999;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-weight: bold;
    white-space: nowrap;
}

space

#space

#space

reference: the void in minecraft

Existential units

Specific existence

butter

butter

butter with forest-like qualities

unidentified butter

Butter made of forest

Butter made of tigers

forest

I should be able to show a forest as a thing from a forest as a space by its scale and by how it layers.
when it’s just “the forest”, it’s an existence or a presence --could be a shape, an image, or just a concept.

non-specific forest

specific forest

mysterious forest

forest like butter

forest of butter

forest of tigers

tigers

tigers

Tigers in a field

Enigmatic tigers

Tigers resembling butter

Tigers resembling forest

Spatial relationships

In forest

I should be able to show a forest as a thing from a forest as a space by its scale and by how it layers.
when it’s just “the forest”, it’s an existence or a presence --could be a shape, an image, or just a concept.
but when something happens “in forest”, it happens between layers --by using ::before and ::after pseudo elements for layering, whatever happens inside the forest, takes place between the horizon and "forest".

↳ unfortunately, the ::before and ::after pseudo elements don't layer with other selectors the way i expected them to. I need to figure out how to separte the background horizon from the forest in the front so that other selectors could sit in between.

In non-specific forest

In specific forest

In mysterious forest

In forest like tigers

In forest like butter

In forest of butter

In forest of tigers/In forest where tigers dwell

In tigers

In tigers

In enigmatic tigers

In forest tigers

In butter tigers

In butter

In butter

In unidentified butter

In butter resembling tigers

In butter resembling forest

In butter made from forest

In butter made from tigers

Actions

Melt

forest as the subject

Non-specific forest is melting

Specific forest is melting

Mysterious forest is melting

Forest resembling butter is melting

Forest resembling tigers is melting

Forest of butter is melting

forest as the agent

Non-specific forest is melting butter

it's unsure that forest of tigers would melt butter

forest of tigers is melting unidentified butter

mysterious forest is melting butter

mysterious forest is melting butter made of tigers

non-specific forest is melting unidentified butter

it's unsure that non-specific forest would melt butter

butter as the subject

Butter is melting

unidentified butter is melting

Butter with forest-like qualities is melting

Butter made from forest is melting

Butter made from tigers is melting

butter as the agent

tigers as the subject

tigers are melting

enigmatic tigers are melting

tigers resembling butter are melting

tigers resembling forest are melting

tigers as the agent

tigers are reluctant to melt butter

tigers are melting butter of forest

tigers are melting unidentified butter

tigers resembling butter are melting mysterious forest

tigers resembling butter are melting non-specific forest

enigmatic tigers are melting specific forest

tigers resembling butter are reluctant to melt specific forest