diff --git a/src/components/slides/css-additional-styles/background.astro b/src/components/slides/css-additional-styles/background.astro index 3352d61..e329a77 100644 --- a/src/components/slides/css-additional-styles/background.astro +++ b/src/components/slides/css-additional-styles/background.astro @@ -27,11 +27,13 @@ background: url('cat.png'); } + -
+
+
-
+

Nun sehen wir, das Bild ist größer als der Container der das Bild anzeigen soll.

@@ -41,10 +43,13 @@ background-size: cover; } +
+ +
-
+

Weitere Optionen für background-size:

@@ -89,10 +94,13 @@ height: 600px; } +
+ +
-
+

background-repeat kann alternativ 3 andere Werte annehmen:

@@ -183,10 +191,13 @@ background: linear-gradient(to right, blue, pink); } -
+
+ +
+
-
+

Wir können anstatt einer genauen Richtungsangabe auch eine Grad-Angabe machen

@@ -267,8 +278,11 @@ ); } -
+
+ +
+
-
- \ No newline at end of file + + diff --git a/src/components/slides/css-additional-styles/index.astro b/src/components/slides/css-additional-styles/index.astro index 5821be1..adf7f9f 100644 --- a/src/components/slides/css-additional-styles/index.astro +++ b/src/components/slides/css-additional-styles/index.astro @@ -320,8 +320,8 @@ import ZIndex from "./z-index.astro"; align-items: center; .container { - width: 450px; - height: 450px; + width: 350px; + height: 350px; } .bg-color { @@ -458,19 +458,21 @@ import ZIndex from "./z-index.astro"; .one, .two, .three { width: 70%; height: 70%; - background-color: white; } .one { - z-index: 1; + z-index: 1; + background-color: red; } .two { right: 0; + background-color: blue; } .three { bottom: 0; + background-color: green; } .top-left { @@ -539,4 +541,4 @@ import ZIndex from "./z-index.astro"; } } } - \ No newline at end of file + diff --git a/src/components/slides/css-additional-styles/shadows.astro b/src/components/slides/css-additional-styles/shadows.astro index d9a501d..72faa6c 100644 --- a/src/components/slides/css-additional-styles/shadows.astro +++ b/src/components/slides/css-additional-styles/shadows.astro @@ -13,7 +13,7 @@

Wie der Name erahnen lässt, erzeugt der Box-Shadow eine Schattierung um die Box des Selektierten HTML-Elementes.

-

Die "einzige" Beeinflussung kann höchstens durch border0-radius hervorgerufen werden.

+

Die "einzige" Beeinflussung kann höchstens durch border-radius hervorgerufen werden.

@@ -127,4 +127,4 @@

Bitte verwendet den text-shadow mit Vorsicht. Falsch Verwendet leidet die Lesbarkeit.

-
\ No newline at end of file + diff --git a/src/components/slides/css-additional-styles/transform.astro b/src/components/slides/css-additional-styles/transform.astro index b3bd26c..f553d95 100644 --- a/src/components/slides/css-additional-styles/transform.astro +++ b/src/components/slides/css-additional-styles/transform.astro @@ -21,6 +21,9 @@

Wir testen heute mit einem 3x3 Grid. In der Mitte ein Bild

+
+ +
@@ -34,7 +37,7 @@
-
+

Nun verschieben wir das Bild mittels transform: translate()

@@ -220,4 +223,4 @@
- \ No newline at end of file + diff --git a/src/components/slides/css-additional-styles/z-index.astro b/src/components/slides/css-additional-styles/z-index.astro index eb674d1..483df81 100644 --- a/src/components/slides/css-additional-styles/z-index.astro +++ b/src/components/slides/css-additional-styles/z-index.astro @@ -14,11 +14,34 @@
-

-    
+    

+    	<div class="position relative box">
+				<div class="absolute one">Erstes Element: Index 1</div>
+				<div class="absolute two">Zweites Element: Kein Index</div>
+				<div class="absolute three">Drittes Element: Kein Index</div>
+			</div>
     
+
+

+			.one {
+				z-index:1; background: red;
+			}
+			.two { 
+				right: 0; background: blue;
+			}
+			.three {
+				bottom: 0; background: green;
+			}
+			.absolute {
+				position: absolute;
+				width: 70%;
+				height: 70%;
+			}
+		
+
+
Erstes Element: Index 1
@@ -26,4 +49,4 @@
Drittes Kind: Kein Index
- \ No newline at end of file + diff --git a/src/components/slides/css-layout/grid.astro b/src/components/slides/css-layout/grid.astro index f9ef8a0..b4d5f2d 100644 --- a/src/components/slides/css-layout/grid.astro +++ b/src/components/slides/css-layout/grid.astro @@ -106,11 +106,11 @@ import GridDemo from "./grid-demo.astro"

Wichtig beim "mischen" von Fraction-Units und Absoluten Größen:

Das Grid gibt den absoluten Breiten Vorrang. Erst danach wird die restsliche Verfügbare Breite an Fractions verteilt. Ein Beispiel:

-

grid-template-columns: 200px 1f 4fr

+

grid-template-columns: 200px 1fr 4fr

-

grid-template-columns: 200px 1f 4fr

+

grid-template-columns: 200px 1fr 4fr

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.


Rechenbeispiel bei einer Verfügbaren Breite von 700px:

@@ -184,7 +184,7 @@ import GridDemo from "./grid-demo.astro"
-

minxmax für automatische Implizite Sektionen

+

minmax für automatische Implizite Sektionen

@@ -387,4 +387,4 @@ import GridDemo from "./grid-demo.astro"

Zu guter letzt: Auch im Grid lässt sich gap wie bereits in der Flexbox verwenden.

-
\ No newline at end of file + diff --git a/src/components/slides/html-forms/beyond-text.astro b/src/components/slides/html-forms/beyond-text.astro index f0abcbe..6d575e3 100644 --- a/src/components/slides/html-forms/beyond-text.astro +++ b/src/components/slides/html-forms/beyond-text.astro @@ -102,7 +102,7 @@

       <select name="animals">
-        <option value="">Biete wähle ein Tier</option>
+        <option value="">Bitte wähle ein Tier</option>
         <option value="cat">Katze</option>
         <option value="dog">Hund</option>
         <option value="bird">Vogel</option>
@@ -113,7 +113,7 @@
   
- + @@ -188,4 +188,4 @@

Falls eine visuell ansprechendere Komponente gewünscht ist, muss eine eigene implementiert werden (inklusive Unterstüztung von Barrierefreiheits-Features)

Alternativ bietet sich auch die Nutzung von Komponenten-Bibliotheken an.

-
\ No newline at end of file +