From cda0027bcdc84126e68b35e7b702e4dc65bd583a Mon Sep 17 00:00:00 2001 From: Denis Ergin Date: Sun, 20 Oct 2024 14:44:46 +0200 Subject: [PATCH] feat(slides): WIP: CSS-Basics --- .vscode/astro.code-snippets | 10 +- src/components/slides/css-basics/border.astro | 0 src/components/slides/css-basics/colors.astro | 81 +++++++++++ src/components/slides/css-basics/font.astro | 132 ++++++++++++++++++ src/components/slides/css-basics/index.astro | 37 +++++ src/components/slides/css-basics/space.astro | 0 src/components/slides/css-basics/title.astro | 3 + src/pages/slides/css-basic-styles.astro | 8 ++ 8 files changed, 270 insertions(+), 1 deletion(-) create mode 100644 src/components/slides/css-basics/border.astro create mode 100644 src/components/slides/css-basics/colors.astro create mode 100644 src/components/slides/css-basics/font.astro create mode 100644 src/components/slides/css-basics/index.astro create mode 100644 src/components/slides/css-basics/space.astro create mode 100644 src/components/slides/css-basics/title.astro create mode 100644 src/pages/slides/css-basic-styles.astro diff --git a/.vscode/astro.code-snippets b/.vscode/astro.code-snippets index 73b056d..85cf50b 100644 --- a/.vscode/astro.code-snippets +++ b/.vscode/astro.code-snippets @@ -20,5 +20,13 @@ "

$2

", "" ] - } + }, + "HighlightJS": { + "prefix": "hljs", + "body": [ + "
",
+			"$2",
+			"
$3" + ] + } } \ No newline at end of file diff --git a/src/components/slides/css-basics/border.astro b/src/components/slides/css-basics/border.astro new file mode 100644 index 0000000..e69de29 diff --git a/src/components/slides/css-basics/colors.astro b/src/components/slides/css-basics/colors.astro new file mode 100644 index 0000000..d7bd74f --- /dev/null +++ b/src/components/slides/css-basics/colors.astro @@ -0,0 +1,81 @@ +
+
+

Farben

+
+ +
+

Die 2 wichtigsten Farb-Eigenschaften sind

+

background-color & color

+

Mit diesen, lassen sich Hintergrundfarben und Textfarben einstellen

+
+
+

Wie sind Farben definiert?

+
+
+

CSS "bietet" Farben an, die mit keywords abrufbar sind:

+
    +
  • red
    • +
  • green
    • +
  • blue
    • +
  • hotpink
    • +
  • crimson
    • +
  • lightgray
    • +
  • Und viele mehr...
    • +
+
+
+

RGB & Hex-Notation & weitere

+
+
+

Kurz zur Farblehre:

+

Das gängiste Model um Farben darzustellen ist eine Mischung aus den 3 Grundfarben Rot, Blau, Grün

+
+
+

CSS bietet 2 (4) Optionen um diese darzustellen

+

Hexadezimal mit einem Hashtag davor: #RRGGBB(AA) +

+

+ CSS-Funktion "rgb": +
+ rgb(R, G, B); +
+ rgba(R, G, B, A); +

+
+
+

A bezeichnet hier in diesem Fall den Alpha-Channel. Damit wird die Transparenz angegeben.

+

Jeder Farbwert darf zwischen 0 und 255 liegen (in Hex: 00 bis FF), Alpha-Werte in Hex-Notation auch, aber in der rgba-Funktion liegt dieser Wert zwischen 0 und 1 ()

+

Der Wert 0 definiert dabei keine Farbe, 255 die volle Farbkraft.

+
+
+

#FF0000?

+
+
+

#FF0000!

+
+
+

#0066FF?

+
+
+

#0066FF!

+
+
+

#13df71?

+
+
+

#13df71!

+
+
+

#13 df 71 55?

+
+
+

#13 df 71 55!

+
+ +
+

Eine gängige Alternative zur RGB-Welt, ist HSL (Hue, Saturation, Luminance/Lightness)

+
+
+

Diese Werte werden mit der CSS-Funktion hsl(0 - 360, 0 - 100, 0 - 100) angegeben

+
+
\ No newline at end of file diff --git a/src/components/slides/css-basics/font.astro b/src/components/slides/css-basics/font.astro new file mode 100644 index 0000000..9f2512c --- /dev/null +++ b/src/components/slides/css-basics/font.astro @@ -0,0 +1,132 @@ +
+
+

Texte stylen

+
+ +
+

Texte bilden den Grundpfeiler in der Übermittlung von Informationen (Audio-Visuelle Medien ausgeschlossen)

+

Entsprechend bietet CSS ein sehr breites Spektrum um Texte zu stylen

+
+ +
+

Größen und Abstände

+
+
+

Zeichengröße lässt sich mithilfe von font-size modifizieren

+
+
+

Welche Einheit?

+
+
+
    +
  • px - Pixelwerte
    • +
  • em - Element
    • +
  • rem - Root-Element
    • +
  • cm/in/mm - Standard-Maßeinheiten (Metrisch und Imperial)
    • +
+
+
+

Aber welche Einheit für Schriften?

+
+
+
    +
  • px - Skaliert nicht (Browser-Zoom)
    • +
  • em - Skaliert auf Basis des Parent-Element
    • +
  • rem - Skaliert auf Basis des root-Element (HTML)
    • +
  • cm/in/mm - Für Print
    • +
+
+
+

Aber, was ist den nun ein REM?

+
+
+

Kurz: Normalerweise entspricht 1rem = 16px

+

Dies stammt aus den frühen Tagen des Webs, in dem 16px als gut lesbar und nicht zu groß empfunden wurde (für die damaligen Monitore)

+
+ +
+ 

+      .font-large {
+        font-size: 8rem;
+      }
+
+
+

+ Ich bin 8rem groß! +

+
+
+ +
+

letter-spacing

+

Mithilfe dieser Einstellung, lässt sich der Abstand zwischen einzelnen Characters ändern

+
+
+ 

+      .letter-spacing {
+        letter-spacing: 8px;
+      }
+
+
+

+ 8px Abstand zwischen Buchstaben! +

+
+
+ +
+

line-height

+

Zeilenabstände modifizieren

+
+
+ 

+      .line-height {
+        line-height: 20px;
+      }
+
+
+

+ 20px Abstand
+ zwischen 2
+ Zeilen! +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/components/slides/css-basics/index.astro b/src/components/slides/css-basics/index.astro new file mode 100644 index 0000000..7c47e63 --- /dev/null +++ b/src/components/slides/css-basics/index.astro @@ -0,0 +1,37 @@ +--- +import Title from './title.astro' +import Colors from './colors.astro'; +import Font from './font.astro'; +--- + +
+ + <Colors /> + <Font /> +</div> + +<style lang="scss" is:global> +.apply-styles { + &.one { + .font-large { + font-size: 8rem; + } + + .font-bold { + font-weight: 900; + } + + .font-thin { + font-weight: 100; + } + + .letter-spacing { + letter-spacing: 8px; + } + + .line-height { + line-height: 20px; + } + } +} +</style> \ No newline at end of file diff --git a/src/components/slides/css-basics/space.astro b/src/components/slides/css-basics/space.astro new file mode 100644 index 0000000..e69de29 diff --git a/src/components/slides/css-basics/title.astro b/src/components/slides/css-basics/title.astro new file mode 100644 index 0000000..3e8b800 --- /dev/null +++ b/src/components/slides/css-basics/title.astro @@ -0,0 +1,3 @@ +<section> + <h1>Erste Schritte mit CSS</h1> +</section> \ No newline at end of file diff --git a/src/pages/slides/css-basic-styles.astro b/src/pages/slides/css-basic-styles.astro new file mode 100644 index 0000000..6d03c8f --- /dev/null +++ b/src/pages/slides/css-basic-styles.astro @@ -0,0 +1,8 @@ +--- +import Reveal from "../../layouts/Reveal.astro"; +import Slides from '../../components/slides/css-basics/index.astro' +--- + +<Reveal title="Erste Schritte mit CSS Styles"> + <Slides /> +</Reveal> \ No newline at end of file