Latest revision as of 12:40, 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

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

@@ Line 181: / Line 181: @@
 <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:Butter is melting.png|thumb|250px|Butter is melting]]</div>
+<div style="margin: 5px;">[[File:Screenshot 2025-03-26 at 18.13.16.png|thumb|250px|Butter is melting]]</div>
-<div style="margin: 5px;">[[File:Screenshot 2025-03-23 at 22.48.34.png|thumb|250px|mysterious butter is melting]]</div>
+<div style="margin: 5px;">[[File:Screenshot 2025-03-26 at 18.12.58.png|thumb|250px|unidentified butter is melting]]</div>
-<div style="margin: 5px;">[[File:Butter with forest-like qualities is melting.png|thumb|250px|Butter with forest-like qualities is melting]]</div>
+<div style="margin: 5px;">[[File:Screenshot 2025-03-27 at 11.20.59.png|thumb|250px|Butter with forest-like qualities is melting]]</div>
+<div style="margin: 5px;">[[File:Screenshot 2025-03-26 at 18.17.33.png|thumb|250px|Butter made from forest is melting]]</div>
+<div style="margin: 5px;">[[File:Screenshot 2025-03-26 at 18.15.33.png|thumb|250px|Butter made from tigers is melting]]</div>
 </div>
 </div>
@@ Line 196: / Line 198: @@
 <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:Screenshot 2025-03-26 at 20.10.29.png|thumb|250px|tigers are melting]]</div>
+<div style="margin: 5px;">[[File:Screenshot 2025-03-26 at 20.09.17.png|thumb|250px|enigmatic tigers are melting]]</div>
+<div style="margin: 5px;">[[File:Screenshot 2025-03-26 at 20.08.42.png|thumb|250px|tigers resembling butter are melting]]</div>
+<div style="margin: 5px;">[[File:Screenshot 2025-03-26 at 20.07.27.png|thumb|250px|tigers resembling forest are melting]]</div>
 </div>
 </div>

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