mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-06 21:28:47 +00:00
feat(slides): css basics, borders
This commit is contained in:
Denis Ergin
parent
cf760712a3
commit
ef7e418e63
2 changed files with 332 additions and 1 deletions
|
|
@ -0,0 +1,206 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Borders (aka Grenze... Danke Google)</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wir reden hier eigentlich über die Umrahmung von Elementen, entsprechend im Englischen: "Border"</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Border benötigen 3 Definitionen:</p>
|
||||
<ul>
|
||||
<li>Der Stil (style): einfach, doppelt, gestrichelt, etc.</li>
|
||||
<li>Die Breite (width)</li>
|
||||
<li>Die Farbe (color)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Ein einfaches Beispiel</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.with-border {
|
||||
border: 5px solid black;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles two">
|
||||
<p class="with-border">
|
||||
Ich bin ein Paragraph!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Natürlich lässt sich alles einzeln definieren</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.border-single-def {
|
||||
border-color: crimson;
|
||||
border-width: 2rem;
|
||||
border-style: ridge;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles two">
|
||||
<p class="border-single-def">
|
||||
Rote Farbe, <br>
|
||||
Dickerer Rand, <br>
|
||||
"Ridge"
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Weitere Stile</p>
|
||||
<br>
|
||||
<div class="apply-styles two">
|
||||
<p class="base-border-wo-style border-double">
|
||||
style: <code>double</code>
|
||||
</p>
|
||||
<p class="base-border-wo-style border-dashed">
|
||||
style: <code>dashed</code>
|
||||
</p>
|
||||
<p class="base-border-wo-style border-dotted">
|
||||
style: <code>dotted</code>
|
||||
</p>
|
||||
<p class="base-border-wo-style border-inset">
|
||||
style: <code>inset</code>
|
||||
</p>
|
||||
<p class="base-border-wo-style border-outset">
|
||||
style: <code>outset</code>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Einzelne Abschnitte mit Border versehen</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Es lassen sich auch einzelne, bzw gegenüber liegende Seiten mit einer Border stylen</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Die Bereiche:</p>
|
||||
<div class="three-grid">
|
||||
<div class="block-start">
|
||||
"block-start"
|
||||
</div>
|
||||
<div class="inline-start">
|
||||
"inline-start"
|
||||
</div>
|
||||
<div class="center">
|
||||
Der Inhalt
|
||||
</div>
|
||||
<div class="inline-end">
|
||||
"inline-end"
|
||||
</div>
|
||||
<div class="block-end">
|
||||
"block-end"
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>"Altgediente" CSS-Profis würden nun aber sagen: "Das sind <code>top</code>, <code>right</code>, <code>bottom</code> und <code>left</code>! "</p>
|
||||
<p>Das stimmt so auch, es gibt die <border>border</border>-Definitionen mit den 4 Richtungen.</p>
|
||||
<p>Diese Schreibweise ist älter. Die gerade vorgstellten Konzepte sind neuer und beachten die Richtung des Schrift-flusses (mehr dazu später)</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Für uns gilt erstmal:
|
||||
<br><code>block</code> definiert die Vertikale Achse
|
||||
<br>
|
||||
<code>inline</code> definiert die Horizontale Achse
|
||||
</p>
|
||||
<p><code>start</code> sowie <code>end</code> definieren jeweils den Anfang und das Ende der Achse!</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Entsprechend können wir nun den oberen und rechten Border separat stylen:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.seperated-border-style {
|
||||
border-block-start: 0.5rem double blueviolet;
|
||||
border-inline-end: 0.5rem dashed olivedrab;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles two">
|
||||
<p class="seperated-border-style">
|
||||
Hier könnte dein Content stehen!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Abgerundete Borders</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Natürlich gibt es einen einfachen weg die Ecken in einer Border abzurunden!</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.rounded-corners {
|
||||
border: 3px solid darkblue;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles two">
|
||||
<p class="rounded-corners">
|
||||
Abgerundete Ecken sind schon nice...
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Prozentangaben gehen natürlich auch, sieht aber in einem nicht-quadratischen Block weniger toll aus:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.fifty-percent-corners {
|
||||
border: 3px solid darkblue;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles two">
|
||||
<p class="fifty-percent-corners">
|
||||
Sieht nicht mehr ganz so nice aus...
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Es lässt sich auch jede Ecke einzeln mit einem eigenen Radius versehen:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.cornered-corners {
|
||||
border: 3px solid darkblue;
|
||||
border-radius: 0 0.5rem 1rem 2rem;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles two">
|
||||
<p class="cornered-corners">
|
||||
Schon wieder etwas besser...
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Selbstredend, hatte jede Ecke auch ihren eigenen (modernen) Namen</p>
|
||||
<p><code>border-<block>-<inline>-radius</code></p>
|
||||
<ul>
|
||||
<li>border-start-start-radius -> oben links</li>
|
||||
<li>border-start-end-radius -> oben rechts</li>
|
||||
<li>border-end-start-radius -> unten links</li>
|
||||
<li>border-end-start-radius -> unten rechts</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Das ganze nochmal visualisiert:</p>
|
||||
<div class="three-grid apply-styles two">
|
||||
<div class="start-start">start-start</div>
|
||||
<div class="start-end">start-end</div>
|
||||
<div class="center with-border animated-border-radius">Der Inhalt</div>
|
||||
<div class="end-start">end-start</div>
|
||||
<div class="end-end">end-end</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
|
@ -2,12 +2,14 @@
|
|||
import Title from './title.astro'
|
||||
import Colors from './colors.astro';
|
||||
import Font from './font.astro';
|
||||
import Border from './border.astro';
|
||||
---
|
||||
|
||||
<div class="slides">
|
||||
<Title />
|
||||
<Colors />
|
||||
<Font />
|
||||
<Border />
|
||||
</div>
|
||||
|
||||
<style lang="scss" is:global>
|
||||
|
|
@ -19,6 +21,58 @@ import Font from './font.astro';
|
|||
src: url("/fonts/Kablammo.ttf") format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
.three-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template: "start-start block-start start-end" 1fr
|
||||
"inline-start center inline-end" 100px
|
||||
"end-start block-end end-end" 1fr /1fr 1fr 1fr;
|
||||
font-family: monospace;
|
||||
|
||||
.block-start {
|
||||
grid-area: block-start;
|
||||
border-block-end: 4px solid black;
|
||||
}
|
||||
.inline-start {
|
||||
grid-area: inline-start;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-inline-end: 4px solid black;
|
||||
}
|
||||
.center {
|
||||
grid-area: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.inline-end {
|
||||
grid-area: inline-end;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-inline-start: 4px solid black;
|
||||
}
|
||||
.block-end {
|
||||
grid-area: block-end;
|
||||
border-block-start: 4px solid black;
|
||||
}
|
||||
|
||||
.start-start {
|
||||
grid-area: start-start;
|
||||
}
|
||||
.start-end {
|
||||
grid-area: start-end;
|
||||
}
|
||||
.end-start {
|
||||
grid-area: end-start;
|
||||
}
|
||||
.end-end {
|
||||
grid-area: end-end;
|
||||
}
|
||||
}
|
||||
|
||||
.apply-styles {
|
||||
&.one {
|
||||
&.helvetica {
|
||||
|
|
@ -123,8 +177,11 @@ import Font from './font.astro';
|
|||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-variation-settings:"MORF" 2;
|
||||
|
||||
&:hover {
|
||||
animation: MORF 5s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes MORF {
|
||||
0% {
|
||||
|
|
@ -138,5 +195,73 @@ import Font from './font.astro';
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.two {
|
||||
.base-border-wo-style {
|
||||
border-color: darkslategrey;
|
||||
border-width: 2rem;
|
||||
}
|
||||
|
||||
.border-double {
|
||||
border-style: double;
|
||||
}
|
||||
|
||||
.border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.border-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.border-inset {
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
.border-outset {
|
||||
border-style: outset;
|
||||
}
|
||||
|
||||
.with-border {
|
||||
border: 5px solid black;
|
||||
}
|
||||
|
||||
.border-single-def {
|
||||
border-color: crimson;
|
||||
border-width: 2rem;
|
||||
border-style: ridge;
|
||||
}
|
||||
|
||||
.seperated-border-style {
|
||||
border-block-start: 0.5rem double blueviolet;
|
||||
border-inline-end: 0.5rem dashed olivedrab;
|
||||
}
|
||||
|
||||
.rounded-corners {
|
||||
border: 3px solid darkblue;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.fifty-percent-corners {
|
||||
border: 3px solid darkblue;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cornered-corners {
|
||||
border: 3px solid darkblue;
|
||||
border-radius: 0 0.5rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.animated-border-radius {
|
||||
animation: border-radius 5s linear infinite;
|
||||
}
|
||||
@keyframes border-radius {
|
||||
0% { border-radius: 2.5rem 0 0 0;}
|
||||
25% { border-radius: 0 2.5rem 0 0;}
|
||||
50% { border-radius: 0 0 0 2.5rem;}
|
||||
75% { border-radius: 0 0 2.5rem 0;}
|
||||
100% { border-radius: 2.5rem 0 0 0;}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue