mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-06 13:18:49 +00:00
fix: css slides
This commit is contained in:
Denis Ergin
parent
6033e65928
commit
dc38239a2e
7 changed files with 73 additions and 31 deletions
|
|
@ -27,7 +27,9 @@
|
|||
background: url('cat.png');
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles">
|
||||
<div class="bg">
|
||||
<div class="container bg-img"></div>
|
||||
</div>
|
||||
|
|
@ -41,6 +43,9 @@
|
|||
background-size: cover;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles">
|
||||
<div class="bg">
|
||||
<div class="container bg-img bg-cover"></div>
|
||||
</div>
|
||||
|
|
@ -89,6 +94,9 @@
|
|||
height: 600px;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles">
|
||||
<div class="bg">
|
||||
<div class="container bg-multi"></div>
|
||||
</div>
|
||||
|
|
@ -183,6 +191,9 @@
|
|||
background: linear-gradient(to right, blue, pink);
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles">
|
||||
<div class="bg">
|
||||
<div class="container gradients linear-rbp"></div>
|
||||
</div>
|
||||
|
|
@ -267,6 +278,9 @@
|
|||
);
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles">
|
||||
<div class="bg">
|
||||
<div class="container gradients conic-repeating"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.two {
|
||||
right: 0;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.three {
|
||||
bottom: 0;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<section>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@
|
|||
|
||||
<section class="apply-styles transform">
|
||||
<p>Wir testen heute mit einem 3x3 Grid. In der Mitte ein Bild</p>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles transform">
|
||||
<div class="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,31 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<pre class=""><code data-trim data-line-numbers>
|
||||
<pre class="html"><code data-trim data-line-numbers>
|
||||
<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>
|
||||
</code></pre>
|
||||
</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -106,11 +106,11 @@ import GridDemo from "./grid-demo.astro"
|
|||
<section>
|
||||
<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><code>grid-template-columns: 200px 1f 4fr</code></p>
|
||||
<p><code>grid-template-columns: 200px 1fr 4fr</code></p>
|
||||
</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>
|
||||
<hr>
|
||||
<p>Rechenbeispiel bei einer Verfügbaren Breite von 700px:</p>
|
||||
|
|
@ -184,7 +184,7 @@ import GridDemo from "./grid-demo.astro"
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code>minxmax</code> für automatische Implizite Sektionen</h4>
|
||||
<h4><code>minmax</code> für automatische Implizite Sektionen</h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@
|
|||
<section>
|
||||
<pre class="html"><code data-trim data-line-numbers>
|
||||
<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 @@
|
|||
<section>
|
||||
<label for="animals">Tiere</label>
|
||||
<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="dog">Hund</option>
|
||||
<option value="bird">Vogel</option>
|
||||
|
|
@ -131,8 +131,8 @@
|
|||
|
||||
<section>
|
||||
<pre class="html"><code data-trim data-line-numbers>
|
||||
<select name="animals">
|
||||
<option value="" disabled>Biete wähle ein Tier</option>
|
||||
<select name="animals" multiple>
|
||||
<option value="" disabled>Bitte wähle ein Tier</option>
|
||||
<option value="cat">Katze</option>
|
||||
<option value="dog">Hund</option>
|
||||
<option value="bird">Vogel</option>
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
<section>
|
||||
<label for="animals">Tiere</label>
|
||||
<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="dog">Hund</option>
|
||||
<option value="bird">Vogel</option>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue