mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-06 13:18:49 +00:00
feat(slides): WIP: CSS-Basics
This commit is contained in:
Denis Ergin
parent
ea0c07a59c
commit
cda0027bcd
8 changed files with 270 additions and 1 deletions
10
.vscode/astro.code-snippets
vendored
10
.vscode/astro.code-snippets
vendored
|
|
@ -20,5 +20,13 @@
|
|||
" <p>$2</p>",
|
||||
"</section>"
|
||||
]
|
||||
}
|
||||
},
|
||||
"HighlightJS": {
|
||||
"prefix": "hljs",
|
||||
"body": [
|
||||
"<pre class=\"$1\"><code data-trim data-line-numbers>",
|
||||
"$2",
|
||||
"</code></pre>$3"
|
||||
]
|
||||
}
|
||||
}
|
||||
0
src/components/slides/css-basics/border.astro
Normal file
0
src/components/slides/css-basics/border.astro
Normal file
81
src/components/slides/css-basics/colors.astro
Normal file
81
src/components/slides/css-basics/colors.astro
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Farben</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Die 2 wichtigsten Farb-Eigenschaften sind</p>
|
||||
<p><code>background-color & color</code></p>
|
||||
<p>Mit diesen, lassen sich Hintergrundfarben und Textfarben einstellen</p>
|
||||
</section>
|
||||
<section>
|
||||
<p>Wie sind Farben definiert?</p>
|
||||
</section>
|
||||
<section>
|
||||
<p>CSS "bietet" Farben an, die mit keywords abrufbar sind:</p>
|
||||
<ul>
|
||||
<li>red</li>
|
||||
<li>green</li>
|
||||
<li>blue</li>
|
||||
<li>hotpink</li>
|
||||
<li>crimson</li>
|
||||
<li>lightgray</li>
|
||||
<li>Und viele mehr...</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>RGB & Hex-Notation & weitere</h3>
|
||||
</section>
|
||||
<section>
|
||||
<p>Kurz zur Farblehre:</p>
|
||||
<p>Das gängiste Model um Farben darzustellen ist eine Mischung aus den 3 Grundfarben Rot, Blau, Grün</p>
|
||||
</section>
|
||||
<section>
|
||||
<p>CSS bietet 2 (4) Optionen um diese darzustellen</p>
|
||||
<p>Hexadezimal mit einem Hashtag davor: <code>#<span style="color: red;">RR</span><span style="color: green;">GG</span><span style="color: blue;">BB</span>(<span>AA</span>)
|
||||
</code></p>
|
||||
<p>
|
||||
CSS-Funktion "rgb":
|
||||
<br>
|
||||
<code>rgb(<span style="color: red;">R</span>, <span style="color: green;">G</span>, <span style="color: blue;">B</span>);</code>
|
||||
<br>
|
||||
<code>rgba(<span style="color: red;">R</span>, <span style="color: green;">G</span>, <span style="color: blue;">B</span>, A);</code>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<p><code>A</code> bezeichnet hier in diesem Fall den Alpha-Channel. Damit wird die Transparenz angegeben.</p>
|
||||
<p>Jeder Farbwert darf zwischen 0 und 255 liegen (in Hex: 00 bis FF), Alpha-Werte in Hex-Notation auch, aber in der <code>rgba</code>-Funktion liegt dieser Wert zwischen 0 und 1 ()</p>
|
||||
<p>Der Wert 0 definiert dabei keine Farbe, 255 die volle Farbkraft.</p>
|
||||
</section>
|
||||
<section>
|
||||
<p><code>#FF0000</code>?</p>
|
||||
</section>
|
||||
<section style="color: #f00">
|
||||
<p><code>#FF0000</code>!</p>
|
||||
</section>
|
||||
<section>
|
||||
<p><code>#0066FF</code>?</p>
|
||||
</section>
|
||||
<section style="color: #06f">
|
||||
<p><code>#0066FF</code>!</p>
|
||||
</section>
|
||||
<section>
|
||||
<p><code>#13df71</code>?</p>
|
||||
</section>
|
||||
<section style="color: #13df71">
|
||||
<p><code>#13df71</code>!</p>
|
||||
</section>
|
||||
<section>
|
||||
<p><code>#13 df 71 55</code>?</p>
|
||||
</section>
|
||||
<section style="color: #13df7155">
|
||||
<p><code>#13 df 71 55</code>!</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Eine gängige Alternative zur RGB-Welt, ist HSL (Hue, Saturation, Luminance/Lightness)</p>
|
||||
</section>
|
||||
<section>
|
||||
<p>Diese Werte werden mit der CSS-Funktion <code>hsl(0 - 360, 0 - 100, 0 - 100)</code> angegeben</p>
|
||||
</section>
|
||||
</section>
|
||||
132
src/components/slides/css-basics/font.astro
Normal file
132
src/components/slides/css-basics/font.astro
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Texte stylen</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Texte bilden den Grundpfeiler in der Übermittlung von Informationen (Audio-Visuelle Medien ausgeschlossen)</p>
|
||||
<p>Entsprechend bietet CSS ein sehr breites Spektrum um Texte zu stylen</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Größen und Abstände</h3>
|
||||
</section>
|
||||
<section>
|
||||
<p>Zeichengröße lässt sich mithilfe von <code>font-size</code> modifizieren</p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Welche Einheit?</h4>
|
||||
</section>
|
||||
<section>
|
||||
<ul>
|
||||
<li><code>px</code> - Pixelwerte</li>
|
||||
<li><code>em</code> - Element</li>
|
||||
<li><code>rem</code> - Root-Element</li>
|
||||
<li><code>cm/in/mm</code> - Standard-Maßeinheiten (Metrisch und Imperial)</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<p>Aber welche Einheit für Schriften?</p>
|
||||
</section>
|
||||
<section>
|
||||
<ul>
|
||||
<li><code>px</code> - Skaliert nicht (Browser-Zoom)</li>
|
||||
<li><code>em</code> - Skaliert auf Basis des Parent-Element</li>
|
||||
<li><code>rem</code> - Skaliert auf Basis des root-Element (HTML)</li>
|
||||
<li><code>cm/in/mm</code> - Für Print</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<p>Aber, was ist den nun ein <code>REM</code>?</p>
|
||||
</section>
|
||||
<section>
|
||||
<p>Kurz: Normalerweise entspricht 1rem = 16px</p>
|
||||
<p>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)</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.font-large {
|
||||
font-size: 8rem;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles one">
|
||||
<p class="font-large">
|
||||
Ich bin 8rem groß!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code>letter-spacing</code></h4>
|
||||
<p>Mithilfe dieser Einstellung, lässt sich der Abstand zwischen einzelnen Characters ändern</p>
|
||||
</section>
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.letter-spacing {
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles one">
|
||||
<p class="letter-spacing">
|
||||
8px Abstand zwischen Buchstaben!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code>line-height</code></h4>
|
||||
<p>Zeilenabstände modifizieren</p>
|
||||
</section>
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.line-height {
|
||||
line-height: 20px;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles one">
|
||||
<p class="line-height">
|
||||
20px Abstand <br>
|
||||
zwischen 2 <br>
|
||||
Zeilen!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
</section>
|
||||
37
src/components/slides/css-basics/index.astro
Normal file
37
src/components/slides/css-basics/index.astro
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
import Title from './title.astro'
|
||||
import Colors from './colors.astro';
|
||||
import Font from './font.astro';
|
||||
---
|
||||
|
||||
<div class="slides">
|
||||
<Title />
|
||||
<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>
|
||||
0
src/components/slides/css-basics/space.astro
Normal file
0
src/components/slides/css-basics/space.astro
Normal file
3
src/components/slides/css-basics/title.astro
Normal file
3
src/components/slides/css-basics/title.astro
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<section>
|
||||
<h1>Erste Schritte mit CSS</h1>
|
||||
</section>
|
||||
8
src/pages/slides/css-basic-styles.astro
Normal file
8
src/pages/slides/css-basic-styles.astro
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue