mirrors/denis.ergin
1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-06 13:18:49 +00:00
Code Activity

fix: css slides

Browse source
This commit is contained in:
Denis Ergin 2025-01-29 21:26:31 +01:00
parent 6033e65928
commit dc38239a2e
7 changed files with 73 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/slides/css-additional-styles/background.astro
View file

@ -27,11 +27,13 @@
background: url('cat.png'); background: url('cat.png');
} }
</code></pre> </code></pre>
</section>
<div class="bg"> <section class="apply-styles">
<div class="bg">
<div class="container bg-img"></div> <div class="container bg-img"></div>
</div> </div>
</section> </section>
<section class="apply-styles"> <section class="apply-styles">
<p>Nun sehen wir, das Bild ist größer als der Container der das Bild anzeigen soll.</p> <p>Nun sehen wir, das Bild ist größer als der Container der das Bild anzeigen soll.</p>
@ -41,10 +43,13 @@
background-size: cover; background-size: cover;
} }
</code></pre> </code></pre>
</section>
<section class="apply-styles">
<div class="bg"> <div class="bg">
<div class="container bg-img bg-cover"></div> <div class="container bg-img bg-cover"></div>
</div> </div>
</section> </section>
<section> <section>
<p>Weitere Optionen für <code>background-size</code>:</p> <p>Weitere Optionen für <code>background-size</code>:</p>
@ -89,10 +94,13 @@
height: 600px; height: 600px;
} }
</code></pre> </code></pre>
</section>
<section class="apply-styles">
<div class="bg"> <div class="bg">
<div class="container bg-multi"></div> <div class="container bg-multi"></div>
</div> </div>
</section> </section>
<section> <section>
<p><code>background-repeat</code> kann alternativ 3 andere Werte annehmen:</p> <p><code>background-repeat</code> kann alternativ 3 andere Werte annehmen:</p>
@ -183,10 +191,13 @@
background: linear-gradient(to right, blue, pink); background: linear-gradient(to right, blue, pink);
} }
</code></pre> </code></pre>
<div class="bg"> </section>
<section class="apply-styles">
<div class="bg">
<div class="container gradients linear-rbp"></div> <div class="container gradients linear-rbp"></div>
</div> </div>
</section> </section>
<section class="apply-styles"> <section class="apply-styles">
<p>Wir können anstatt einer genauen Richtungsangabe auch eine Grad-Angabe machen</p> <p>Wir können anstatt einer genauen Richtungsangabe auch eine Grad-Angabe machen</p>
@ -267,8 +278,11 @@
); );
} }
</code></pre> </code></pre>
<div class="bg"> </section>
<section class="apply-styles">
<div class="bg">
<div class="container gradients conic-repeating"></div> <div class="container gradients conic-repeating"></div>
</div> </div>
</section> </section>
</section> </section>

12
src/components/slides/css-additional-styles/index.astro
View file

@ -320,8 +320,8 @@ import ZIndex from "./z-index.astro";
align-items: center; align-items: center;
.container { .container {
width: 450px; width: 350px;
height: 450px; height: 350px;
} }
.bg-color { .bg-color {
@ -458,19 +458,21 @@ import ZIndex from "./z-index.astro";
.one, .two, .three { .one, .two, .three {
width: 70%; width: 70%;
height: 70%; height: 70%;
background-color: white;
} }
.one { .one {
z-index: 1; z-index: 1;
background-color: red;
} }
.two { .two {
right: 0; right: 0;
background-color: blue;
} }
.three { .three {
bottom: 0; bottom: 0;
background-color: green;
} }
.top-left { .top-left {
@ -539,4 +541,4 @@ import ZIndex from "./z-index.astro";
} }
} }
} }
</style> </style>

4
src/components/slides/css-additional-styles/shadows.astro
View file

@ -13,7 +13,7 @@
<section> <section>
<p>Wie der Name erahnen lässt, erzeugt der Box-Shadow eine Schattierung um die Box des Selektierten HTML-Elementes.</p> <p>Wie der Name erahnen lässt, erzeugt der Box-Shadow eine Schattierung um die Box des Selektierten HTML-Elementes.</p>
<p>Die "einzige" Beeinflussung kann höchstens durch <code>border0-radius</code> hervorgerufen werden.</p> <p>Die "einzige" Beeinflussung kann höchstens durch <code>border-radius</code> hervorgerufen werden.</p>
</section> </section>
<section> <section>
@ -127,4 +127,4 @@
<section> <section>
<p>Bitte verwendet den text-shadow mit Vorsicht. Falsch Verwendet leidet die Lesbarkeit.</p> <p>Bitte verwendet den text-shadow mit Vorsicht. Falsch Verwendet leidet die Lesbarkeit.</p>
</section> </section>
</section> </section>

7
src/components/slides/css-additional-styles/transform.astro
View file

@ -21,6 +21,9 @@
<section class="apply-styles transform"> <section class="apply-styles transform">
<p>Wir testen heute mit einem 3x3 Grid. In der Mitte ein Bild</p> <p>Wir testen heute mit einem 3x3 Grid. In der Mitte ein Bild</p>
</section>
<section class="apply-styles transform">
<div class="grid"> <div class="grid">
<div></div> <div></div>
<div></div> <div></div>
@ -34,7 +37,7 @@
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
</section> </section>
<section> <section>
<p>Nun verschieben wir das Bild mittels <code>transform: translate()</code></p> <p>Nun verschieben wir das Bild mittels <code>transform: translate()</code></p>
@ -220,4 +223,4 @@
</div> </div>
</section> </section>
</section> </section>

29
src/components/slides/css-additional-styles/z-index.astro
View file

@ -14,11 +14,34 @@
</section> </section>
<section> <section>
<pre class=""><code data-trim data-line-numbers> <pre class="html"><code data-trim data-line-numbers>
&lt;div class="position relative box"&gt;
&lt;div class="absolute one"&gt;Erstes Element: Index 1&lt;/div&gt;
&lt;div class="absolute two"&gt;Zweites Element: Kein Index&lt;/div&gt;
&lt;div class="absolute three"&gt;Drittes Element: Kein Index&lt;/div&gt;
&lt;/div&gt;
</code></pre> </code></pre>
</section> </section>
<section>
<pre class="css"><code data-trim data-line-numbers is:raw>
.one {
z-index:1; background: red;
}
.two {
right: 0; background: blue;
}
.three {
bottom: 0; background: green;
}
.absolute {
position: absolute;
width: 70%;
height: 70%;
}
</code></pre>
</section>
<section class="apply-styles"> <section class="apply-styles">
<div class="position relative box"> <div class="position relative box">
<div class="absolute one">Erstes Element: Index 1</div> <div class="absolute one">Erstes Element: Index 1</div>
@ -26,4 +49,4 @@
<div class="absolute three">Drittes Kind: Kein Index</div> <div class="absolute three">Drittes Kind: Kein Index</div>
</div> </div>
</section> </section>
</section> </section>

8
src/components/slides/css-layout/grid.astro
View file

@ -106,11 +106,11 @@ import GridDemo from "./grid-demo.astro"
<section> <section>
<p>Wichtig beim "mischen" von Fraction-Units und Absoluten Größen:</p> <p>Wichtig beim "mischen" von Fraction-Units und Absoluten Größen:</p>
<p>Das Grid gibt den absoluten Breiten Vorrang. Erst danach wird die restsliche Verfügbare Breite an Fractions verteilt. Ein Beispiel:</p> <p>Das Grid gibt den absoluten Breiten Vorrang. Erst danach wird die restsliche Verfügbare Breite an Fractions verteilt. Ein Beispiel:</p>
<p><code>grid-template-columns: 200px 1f 4fr</code></p> <p><code>grid-template-columns: 200px 1fr 4fr</code></p>
</section> </section>
<section> <section>
<p><code>grid-template-columns: 200px 1f 4fr</code></p> <p><code>grid-template-columns: 200px 1fr 4fr</code></p>
<p>Zuerst werden die 200px der ersten Spalte zugewiesen, die restliche Breite wird durch 5 (1fr + 4fr) geteilt und dann entsprechen "1 zu 5" und "4 zu 5" verteilt.</p> <p>Zuerst werden die 200px der ersten Spalte zugewiesen, die restliche Breite wird durch 5 (1fr + 4fr) geteilt und dann entsprechen "1 zu 5" und "4 zu 5" verteilt.</p>
<hr> <hr>
<p>Rechenbeispiel bei einer Verfügbaren Breite von 700px:</p> <p>Rechenbeispiel bei einer Verfügbaren Breite von 700px:</p>
@ -184,7 +184,7 @@ import GridDemo from "./grid-demo.astro"
</section> </section>
<section> <section>
<h4><code>minxmax</code> für automatische Implizite Sektionen</h4> <h4><code>minmax</code> für automatische Implizite Sektionen</h4>
</section> </section>
<section> <section>
@ -387,4 +387,4 @@ import GridDemo from "./grid-demo.astro"
<section> <section>
<p>Zu guter letzt: Auch im Grid lässt sich <code>gap</code> wie bereits in der Flexbox verwenden.</p> <p>Zu guter letzt: Auch im Grid lässt sich <code>gap</code> wie bereits in der Flexbox verwenden.</p>
</section> </section>
</section> </section>

12
src/components/slides/html-forms/beyond-text.astro
View file

@ -102,7 +102,7 @@
<section> <section>
<pre class="html"><code data-trim data-line-numbers> <pre class="html"><code data-trim data-line-numbers>
&lt;select name="animals"&gt; &lt;select name="animals"&gt;
&lt;option value=""&gt;Biete wähle ein Tier&lt;/option&gt; &lt;option value=""&gt;Bitte wähle ein Tier&lt;/option&gt;
&lt;option value="cat"&gt;Katze&lt;/option&gt; &lt;option value="cat"&gt;Katze&lt;/option&gt;
&lt;option value="dog"&gt;Hund&lt;/option&gt; &lt;option value="dog"&gt;Hund&lt;/option&gt;
&lt;option value="bird"&gt;Vogel&lt;/option&gt; &lt;option value="bird"&gt;Vogel&lt;/option&gt;
@ -113,7 +113,7 @@
<section> <section>
<label for="animals">Tiere</label> <label for="animals">Tiere</label>
<select name="animals" id="animals"> <select name="animals" id="animals">
<option value="">Biete wähle ein Tier</option> <option value="">Bitte wähle ein Tier</option>
<option value="cat">Katze</option> <option value="cat">Katze</option>
<option value="dog">Hund</option> <option value="dog">Hund</option>
<option value="bird">Vogel</option> <option value="bird">Vogel</option>
@ -131,8 +131,8 @@
<section> <section>
<pre class="html"><code data-trim data-line-numbers> <pre class="html"><code data-trim data-line-numbers>
&lt;select name="animals"&gt; &lt;select name="animals" multiple&gt;
&lt;option value="" disabled&gt;Biete wähle ein Tier&lt;/option&gt; &lt;option value="" disabled&gt;Bitte wähle ein Tier&lt;/option&gt;
&lt;option value="cat"&gt;Katze&lt;/option&gt; &lt;option value="cat"&gt;Katze&lt;/option&gt;
&lt;option value="dog"&gt;Hund&lt;/option&gt; &lt;option value="dog"&gt;Hund&lt;/option&gt;
&lt;option value="bird"&gt;Vogel&lt;/option&gt; &lt;option value="bird"&gt;Vogel&lt;/option&gt;
@ -143,7 +143,7 @@
<section> <section>
<label for="animals">Tiere</label> <label for="animals">Tiere</label>
<select name="animals" id="animals" multiple> <select name="animals" id="animals" multiple>
<option value="" disabled>Biete wähle mindestens ein Tier</option> <option value="" disabled>Bitte wähle mindestens ein Tier</option>
<option value="cat">Katze</option> <option value="cat">Katze</option>
<option value="dog">Hund</option> <option value="dog">Hund</option>
<option value="bird">Vogel</option> <option value="bird">Vogel</option>
@ -188,4 +188,4 @@
<p>Falls eine visuell ansprechendere Komponente gewünscht ist, muss eine eigene implementiert werden (inklusive Unterstüztung von Barrierefreiheits-Features)</p> <p>Falls eine visuell ansprechendere Komponente gewünscht ist, muss eine eigene implementiert werden (inklusive Unterstüztung von Barrierefreiheits-Features)</p>
<p>Alternativ bietet sich auch die Nutzung von Komponenten-Bibliotheken an.</p> <p>Alternativ bietet sich auch die Nutzung von Komponenten-Bibliotheken an.</p>
</section> </section>
</section> </section>