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

From XPUB & Lens-Based wiki
(Created page with "''' CSS Prompts''' <br> <br> <div style="float:right; text-align:right;"> [https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator CSS + Next sibling combinator mdm]<br> </div>")
 
 
(32 intermediate revisions by the same user not shown)
Line 1: Line 1:
'''[[User:Zuhui/SI26/Storybook/Permutational variables | CSS Prompts]]'''
<p style="font-size:19px; text-align: center;">'''[[User:Zuhui/SI26/Storybook/Permutational variables | CSS Prompts]]'''</p>
<br>
<br>
:: '''↳ [https://hub.xpub.nl/cerealbox/SI26/projects/generative%20storybook%20%28tiger%29/storybook.html its current state]'''<br>
<br>
<br>
<div style="float:right; text-align:right;">
<div style="float:right; text-align:right;">
[https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator CSS + Next sibling combinator mdm]<br>
[https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator CSS + Next sibling combinator mdm]<br>
<br>
[https://stackoverflow.com/questions/7866784/css-no-sibling-selector no-sibling selector stackoverflow]<br>
[https://css-tricks.com/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css/ pseudo elements]<br>
[https://css-tricks.com/animating-single-div-art/ animating single div art]<br>
[https://a.singlediv.com/ singlediv.com]<br>
<br>
[https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path Clip-path mdn]<br>
[https://www.cssportal.com/css-clip-path-generator/ Clip-path generator cssportal]<br>
<br>
<s>[https://developer.mozilla.org/en-US/docs/Web/SVG SVG mdn]</s><br>
<s>[https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath SVG Clip-path mdn]</s><br>
<br>
[https://www.w3schools.com/cssref/css3_pr_background.php background w3c]<br>
<br>
[https://9elements.github.io/fancy-border-radius/ fancy border-radius]<br>
[https://css-tricks.com/the-shapes-of-css/ the shapes of css css-tricks]<br>
[https://css-tricks.com/background-patterns-simplified-by-conic-gradients/ background patterns-conic/linear gradients css-tricks]<br>
<br>
[https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient conic-gradient mdn]<br>
[https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient repeating conic-gradient mdn]<br>
<br>
[https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient radial-gradient mdn]<br>
[https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-radial-gradient repeating radial-gradient mdn]<br>
[https://css-tricks.com/radial-gradient-recipes/ radial gradient recipes css-tricks]<br>
[https://tympanus.net/codrops/css_reference/repeating-radial-gradient/ repeating radial-gradient example]<br>
<br>
[https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient linear-gradient]<br>
[https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient repeating linear-gradient]<br>
<br>
[https://css-tricks.com/getting-deep-into-shadows/ getting deep into shadows css-tricks]<br>
<br>
[https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat border-image-repeat mdn]<br>
[https://css-tricks.com/how-to-make-repeating-border-images/ repeating-border images css-tricks]<br>
<br>
</div>
=Foundation=
===sentence in the middle===
<syntaxhighlight lang="css">
#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;
}
</syntaxhighlight>
<br>
<center><h3 style="font-size: 18px;">space</h3></center>
<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:Void.png|thumb|250px|#space]]</div>
<div style="margin: 5px;">[[File:Void1.png|thumb|250px|#space]]</div>
<div style="margin: 5px;">[[File:The Void minecraft.png|thumb|250px|reference: the void in minecraft]]</div>
</div>
</div>
<br>
<br>
=Existential units=
==Generic Existence==
<br>
<br>
==Specific existence==
<center><h3 style="font-size: 18px;">butter</h3></center>
<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.png|thumb|250px|butter]]</div>
<div style="margin: 5px;">[[File:Butter with forest-like qualities.png|thumb|250px|butter with forest-like qualities]]</div>
<div style="margin: 5px;">[[File:Unidentified butter 1.png|thumb|250px|unidentified butter]]</div>
<div style="margin: 5px;">[[File:Butter made of forest.png|thumb|250px|Butter made of forest]]</div>
<div style="margin: 5px;">[[File:Butter made of tigers.png|thumb|250px|Butter made of tigers]]</div>
</div>
</div>
<br>
<center><h3 style="font-size: 18px;">forest</h3></center>
<div style="text-align: left; border: 1px solid black; padding: 30px;" >
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.<br>
when it’s just “the forest”, it’s an existence or a presence --could be a shape, an image, or just a concept.<br>
<br>
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<div style="margin: 5px;">[[File:Non-specific forest.png|thumb|250px|non-specific forest]]</div>
<div style="margin: 5px;">[[File:Specific forest.png|thumb|250px|specific forest]]</div>
<div style="margin: 5px;">[[File:Mysterious forest.png|thumb|250px|mysterious forest]]</div>
<div style="margin: 5px;">[[File:Forest like butter.png|thumb|250px|forest like butter]]</div>
<div style="margin: 5px;">[[File:Forest of butter.png|thumb|250px|forest of butter]]</div>
</div>
I'm not sure about this display at all but for now they can stay.
</div>
<br>
<center><h3 style="font-size: 18px;">tigers</h3></center>
<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:Tigers.png|thumb|250px|tigers]]</div>
<div style="margin: 5px;">[[File:Tigers in a field.png|thumb|250px|Tigers in a field]]</div>
<div style="margin: 5px;">[[File:Enigmatic tigers.png|thumb|250px|Enigmatic tigers]]</div>
<div style="margin: 5px;">[[File:Tigers resembling butter.png|thumb|250px|Tigers resembling butter]]</div>
<div style="margin: 5px;">[[File:Screenshot 2025-03-26 at 16.53.02.png|thumb|250px|Tigers resembling forest]]</div>
</div>
</div>
<br>
<br>


=Spatial relationships=
<center><h3 style="font-size: 18px;">In forest</h3></center>
<div style="text-align: left; border: 1px solid black; padding: 30px;" >
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.<br>
when it’s just “the forest”, it’s an existence or a presence --could be a shape, an image, or just a concept.<br>
but when something happens “in forest”, it happens between layers --by using <code>::before</code> and <code>::after</code> pseudo elements for layering, whatever happens inside the forest, takes place between the horizon and "forest".<br>
: ↳ unfortunately, the <code>::before</code> and <code>::after</code> 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.
<br>
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<div style="margin: 5px;">[[File:In non-specific forest.png|thumb|250px|In non-specific forest]]</div>
<div style="margin: 5px;">[[File:In specific forest.png|thumb|250px|In specific forest]]</div>
<div style="margin: 5px;">[[File:In mysterious forest.png|thumb|250px|In mysterious forest]]</div>
<div style="margin: 5px;">[[File:In forest like tigers.png|thumb|250px|In forest like tigers]]</div>
<div style="margin: 5px;">[[File:In forest like butter.png|thumb|250px|In forest like butter]]</div>
<div style="margin: 5px;">[[File:In forest of butter.png|thumb|250px|In forest of butter]]</div>
<div style="margin: 5px;">[[File:Tigers in the forest.png|thumb|250px|In forest of tigers/In forest where tigers dwell]]</div>
</div>
</div>
<br>
<center><h3 style="font-size: 18px;">In tigers</h3></center>
<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>
<br>
<center><h3 style="font-size: 18px;">In butter</h3></center>
<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 butter.png|thumb|250px|In butter]]</div>
<div style="margin: 5px;">[[File:In unidentified butter 1.png|thumb|250px|In unidentified butter]]</div>
<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 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>
<br>
<br>
=Actions=
==Melt==
<center><h3 style="font-size: 18px;">forest as the subject</h3></center>
<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:Non-specific forest is melting.png|thumb|250px|Non-specific forest is melting]]</div>
<div style="margin: 5px;">[[File:Specific forest is melting.png|thumb|250px|Specific forest is melting]]</div>
<div style="margin: 5px;">[[File:Mysterious forest is melting.png|thumb|250px|Mysterious forest is melting]]</div>
<div style="margin: 5px;">[[File:Forest resembling butter is melting.png|thumb|250px|Forest resembling butter is melting]]</div>
<div style="margin: 5px;">[[File:Forest resembling tigers is melting.png|thumb|250px|Forest resembling tigers is melting]]</div>
<div style="margin: 5px;">[[File:Forest of butter is melting.png|thumb|250px|Forest of butter is melting]]</div>
</div>
</div>
<br>
<center><h3 style="font-size: 18px;">forest as the agent</h3></center>
<div style="text-align: left; border: 1px solid black; padding: 30px;" >
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
</div>
</div>
<br>
<center><h3 style="font-size: 18px;">butter as the subject</h3></center>
<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 18.13.16.png|thumb|250px|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: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>
<br>
<center><h3 style="font-size: 18px;">butter as the agent</h3></center>
<div style="text-align: left; border: 1px solid black; padding: 30px;" >
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
</div>
</div>
</div>
<br>
<center><h3 style="font-size: 18px;">tigers as the subject</h3></center>
<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>
<br>
<center><h3 style="font-size: 18px;">tigers as the agent</h3></center>
<div style="text-align: left; border: 1px solid black; padding: 30px;" >
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
</div>
</div>
<br>

Latest revision as of 11:40, 27 March 2025

CSS Prompts


↳ its current state


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

Generic Existence



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

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


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


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


Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Zuhui/SI26/Storybook/CSS_1&oldid=292856"