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
:
background-repeat
kann alternativ 3 andere Werte annehmen:
Wir können anstatt einer genauen Richtungsangabe auch eine Grad-Angabe machen
@@ -267,8 +278,11 @@ ); } -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.
Bitte verwendet den text-shadow mit Vorsicht. Falsch Verwendet leidet die Lesbarkeit.
Wir testen heute mit einem 3x3 Grid. In der Mitte ein Bild
+Nun verschieben wir das Bild mittels transform: translate()
-
+
+ <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%;
+ }
+
+ 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 Sektionenminmax
für automatische Implizite SektionenZu guter letzt: Auch im Grid lässt sich gap
wie bereits in der Flexbox verwenden.
<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 @@