Revision as of 12:34, 27 March 2025

↳ 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

reference: the void in minecraft

Existential units

Generic Existence

Specific existence

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

I'm not sure about this display at all but for now they can stay.

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 enigmatic tigers

In forest tigers

In butter tigers

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

butter as the subject

Butter is melting

mysterious butter is melting

Butter with forest-like qualities is melting

@@ Line 137: / Line 137: @@
 <div style="text-align: left; border: 1px solid black; padding: 30px;" >
 <div style="display: flex; flex-wrap: wrap; justify-content: center;">
+<div style="margin: 5px;">[[File:In tigers.png|thumb|250px|In tigers]]</div>
+<div style="margin: 5px;">[[File:In enigmatic tigers.png|thumb|250px|In enigmatic tigers]]</div>
+<div style="margin: 5px;">[[File:In forest tigers.png|thumb|250px|In forest tigers]]</div>
+<div style="margin: 5px;">[[File:In butter tigers.png|thumb|250px|In butter tigers]]</div>
 </div>
 </div>
@@ Line 147: / Line 151: @@
 <div style="margin: 5px;">[[File:In butter resembling tigers.png|thumb|250px|In butter resembling tigers]]</div>
 <div style="margin: 5px;">[[File:In butter resembling forest.png|thumb|250px|In butter resembling forest]]</div>
-<div style="margin: 5px;">[[File:In butter of forest.png|thumb|250px|In butter of forest]]</div>
+<div style="margin: 5px;">[[File:In butter of forest.png|thumb|250px|In butter made from forest]]</div>
+<div style="margin: 5px;">[[File:In butter made from tigers.png|thumb|250px|In butter made from tigers]]</div>
 </div>
 </div>

User:Zuhui/SI26/Storybook/CSS 1: Difference between revisions