diff --git a/src/components/slides/css-basics/border.astro b/src/components/slides/css-basics/border.astro index e69de29..98ef9fd 100644 --- a/src/components/slides/css-basics/border.astro +++ b/src/components/slides/css-basics/border.astro @@ -0,0 +1,206 @@ +
+
+

Borders (aka Grenze... Danke Google)

+
+ +
+

Wir reden hier eigentlich über die Umrahmung von Elementen, entsprechend im Englischen: "Border"

+
+ +
+

Border benötigen 3 Definitionen:

+ +
+ +
+

Ein einfaches Beispiel

+ 

+      .with-border {
+        border: 5px solid black;
+      }
+
+
+

+ Ich bin ein Paragraph! +

+
+
+ +
+

Natürlich lässt sich alles einzeln definieren

+ 

+      .border-single-def {
+        border-color: crimson;
+        border-width: 2rem;
+        border-style: ridge;
+      }
+
+
+

+ Rote Farbe,
+ Dickerer Rand,
+ "Ridge" +

+
+
+ +
+

Weitere Stile

+
+
+

+ style: double +

+

+ style: dashed +

+

+ style: dotted +

+

+ style: inset +

+

+ style: outset +

+
+
+ +
+

Einzelne Abschnitte mit Border versehen

+
+ +
+

Es lassen sich auch einzelne, bzw gegenüber liegende Seiten mit einer Border stylen

+
+ +
+

Die Bereiche:

+
+
+ "block-start" +
+
+ "inline-start" +
+
+ Der Inhalt +
+
+ "inline-end" +
+
+ "block-end" +
+
+
+ +
+

"Altgediente" CSS-Profis würden nun aber sagen: "Das sind top, right, bottom und left! "

+

Das stimmt so auch, es gibt die border-Definitionen mit den 4 Richtungen.

+

Diese Schreibweise ist älter. Die gerade vorgstellten Konzepte sind neuer und beachten die Richtung des Schrift-flusses (mehr dazu später)

+
+ +
+

+ Für uns gilt erstmal: +
block definiert die Vertikale Achse +
+ inline definiert die Horizontale Achse +

+

start sowie end definieren jeweils den Anfang und das Ende der Achse!

+
+ +
+

Entsprechend können wir nun den oberen und rechten Border separat stylen:

+ 

+      .seperated-border-style {
+        border-block-start: 0.5rem double blueviolet;
+        border-inline-end: 0.5rem dashed olivedrab;
+      }
+
+
+

+ Hier könnte dein Content stehen! +

+
+
+ +
+

Abgerundete Borders

+
+ +
+

Natürlich gibt es einen einfachen weg die Ecken in einer Border abzurunden!

+
+ +
+ 

+      .rounded-corners {
+        border: 3px solid darkblue;
+        border-radius: 1rem;
+      }
+
+
+

+ Abgerundete Ecken sind schon nice... +

+
+
+ +
+

Prozentangaben gehen natürlich auch, sieht aber in einem nicht-quadratischen Block weniger toll aus:

+ 

+      .fifty-percent-corners {
+        border: 3px solid darkblue;
+        border-radius: 50%;
+      }
+
+
+

+ Sieht nicht mehr ganz so nice aus... +

+
+
+ +
+

Es lässt sich auch jede Ecke einzeln mit einem eigenen Radius versehen:

+ 

+      .cornered-corners {
+        border: 3px solid darkblue;
+        border-radius: 0 0.5rem 1rem 2rem;
+      }
+
+
+

+ Schon wieder etwas besser... +

+
+
+ +
+

Selbstredend, hatte jede Ecke auch ihren eigenen (modernen) Namen

+

border-<block>-<inline>-radius

+ +
+ +
+

Das ganze nochmal visualisiert:

+
+
start-start
+
start-end
+
Der Inhalt
+
end-start
+
end-end
+
+
+
\ No newline at end of file diff --git a/src/components/slides/css-basics/index.astro b/src/components/slides/css-basics/index.astro index 28c5c3e..b8d94e1 100644 --- a/src/components/slides/css-basics/index.astro +++ b/src/components/slides/css-basics/index.astro @@ -2,12 +2,14 @@ import Title from './title.astro' import Colors from './colors.astro'; import Font from './font.astro'; +import Border from './border.astro'; ---
<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,7 +177,10 @@ import Font from './font.astro'; font-weight: 400; font-style: normal; font-variation-settings:"MORF" 2; - animation: MORF 5s infinite; + + &:hover { + animation: MORF 5s infinite; + } } @keyframes MORF { @@ -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> \ No newline at end of file