Skip to content

Commit 73aa76e

Browse files
widnig89widnig89
committed
added: slides: effects and transitions
1 parent 06a08b1 commit 73aa76e

File tree

4 files changed

+372
-0
lines changed

4 files changed

+372
-0
lines changed

‎slides/content/slides/SWP/WEB/09_transition-and-effects.md‎

Lines changed: 352 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,352 @@
1+
---
2+
theme: seriph
3+
routerMode: hash
4+
title: Interaktion & Effekte
5+
info: |
6+
## Interaktion & Effekte
7+
background: https://github.com/HTL-Wolfsberg-Betriebsinformatik/skript/blob/main/slides/content/slides/background-cover-16-9.webp?raw=true
8+
class: text-center
9+
drawings:
10+
persist: false
11+
transition: slide-left
12+
mdc: true
13+
layout: cover
14+
hideInToc: true
15+
download: true
16+
export:
17+
format: pdf
18+
dark: false
19+
withClicks: true
20+
withToc: true
21+
selectable: true
22+
---
23+
24+
# Interaktion & Effekte
25+
26+
---
27+
hideInToc: true
28+
---
29+
30+
# Inhalt
31+
32+
<Toc minDepth="1" maxDepth="1" columns="1" />
33+
34+
---
35+
36+
# Überblick
37+
38+
Mit CSS lassen sich auch **Reaktionen auf Benutzerinteraktionen**
39+
und **visuelle Übergänge** gestalten. Dadurch entsteht ein **dynamisches Erscheinungsbild**,
40+
das Inhalte hervorhebt und Bedienung erleichtert.
41+
42+
<style>
43+
.card {
44+
cursor: pointer;
45+
height: auto;
46+
width: 250px;
47+
border-radius: 8px;
48+
padding: 16px;
49+
font-family: Noto, sans-serif;
50+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
51+
transform: translateY(0) scale(1);
52+
transition: transform .25s ease, box-shadow .25s ease;
53+
}
54+
55+
.card:hover {
56+
transform: translateY(-4px) scale(1.01);
57+
box-shadow: 0 10px 30px rgba(0,0,0,.12);
58+
}
59+
60+
.card-image {
61+
background-image: url("./assets/images/flexbox/flex-wrap.svg");
62+
background-repeat: no-repeat;
63+
background-size: contain;
64+
height: 150px;
65+
}
66+
67+
.card-image img {
68+
height: inherit;
69+
}
70+
</style>
71+
72+
<div style="display: flex; justify-content: center; width: 100%;">
73+
<div class="card">
74+
<div class="card-image">
75+
</div>
76+
<div class="card-header">
77+
<h3> Learn Flexbox </h3>
78+
</div>
79+
<div class="card-body">
80+
<p> Modernes Layout gestalten mit Flexbox. Erfahre mehr in diesem Beitrag </p>
81+
</div>
82+
</div>
83+
</div>
84+
85+
---
86+
87+
# Themenbereiche
88+
89+
| Thema | Beschreibung | Beispiel |
90+
|:--|:--|:--|
91+
| **Pseudoklassen** | Zustände von Elementen, z. B. beim Bewegen der Maus oder bei Fokus | `:hover` |
92+
| **Schatteneffekte** | Erzeugen von Tiefe und Kontrast | `box-shadow` |
93+
| **Transform** | Vreschieben, drehen, skalieren oder verzerren von Elementen | `translate` |
94+
| **Transition** | Sanfte Übergänge zwischen Zuständen | z. B. Farbwechsel beim Hover |
95+
96+
---
97+
98+
# Pseudoklasse `:hover`
99+
100+
Pseudoklassen werden verwendet, um **Zustände von Elementen** zu gestalten.
101+
Sie beschreiben, **wie ein Element aussieht**, wenn sich sein Zustand verändert –
102+
zum Beispiel beim Überfahren mit der Maus (*=Hovereffekt*).
103+
104+
**Beispiel:**
105+
106+
```html
107+
<style>
108+
a {
109+
color: steelblue;
110+
text-decoration: none;
111+
}
112+
113+
a:hover {
114+
color: orange;
115+
text-decoration: underline;
116+
}
117+
</style>
118+
119+
<a href="#">Link</a>
120+
```
121+
122+
<style>
123+
a {
124+
color: steelblue;
125+
text-decoration: none;
126+
border-bottom-width: 0;
127+
}
128+
129+
a:hover {
130+
color: orange;
131+
text-decoration: underline;
132+
}
133+
</style>
134+
135+
<a href="#">Link</a>
136+
137+
---
138+
layout: two-cols-header
139+
layoutClass: gap-8
140+
---
141+
142+
# Schatteneffekte
143+
144+
Schatten verleihen Elementen Tiefe und Kontrast. Sie können Texte oder Boxen vom Hintergrund abheben und Lesbarkeit verbessern.
145+
146+
```css
147+
box-shadow: x-Verschiebung y-Verschiebung Weichzeichnung Farbe;
148+
```
149+
150+
<br>
151+
152+
**Beispiel:**
153+
154+
::left::
155+
156+
```html
157+
<style>
158+
.card {
159+
width: 180px;
160+
height: 100px;
161+
box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
162+
}
163+
</style>
164+
165+
<div class="card"></div>
166+
```
167+
168+
::right::
169+
170+
<style>
171+
.card {
172+
width: 180px;
173+
height: 180px;
174+
box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
175+
}
176+
</style>
177+
178+
<br>
179+
180+
<div class="card"></div>
181+
182+
---
183+
layout: two-cols
184+
layoutClass: gap-8
185+
---
186+
187+
# Transformieren
188+
189+
Mit der Eigenschaft `transform` können HTML-Elemente **verschoben**, **gedreht**, **skaliert** oder **verzerrt** werden – ohne das Layout zu verändern.
190+
191+
```css
192+
transform: <funktion1>(wert) <funktion2>(wert);
193+
```
194+
195+
<br>
196+
197+
<style>
198+
.item {
199+
height: 180px;
200+
width: 180px;
201+
background-color: lightblue;
202+
}
203+
.item:hover {
204+
transform: translateY(10px) scale(1.1);
205+
}
206+
</style>
207+
208+
<div class="item"></div>
209+
210+
::right::
211+
**Beispiel:**
212+
213+
```css
214+
div {
215+
/* Beispiel mit mehreren Transformationen */
216+
transform: translateY(10px) scale(1.1);
217+
218+
/* Weitere mögliche Funktionen */
219+
transform: translateX(20px); /* Verschieben auf der X-Achse */
220+
transform: translateY(10px); /* Verschieben auf der Y-Achse */
221+
transform: scale(1.2); /* Vergrößern */
222+
transform: rotate(15deg); /* Drehen */
223+
transform: skew(10deg, 5deg); /* Schrägstellen */
224+
225+
/* Kombinationen sind erlaubt */
226+
transform: translateX(10px) rotate(10deg) scale(1.1);
227+
}
228+
229+
```
230+
231+
---
232+
layout: two-cols-header
233+
layoutClass: gap-8
234+
---
235+
236+
# Transition
237+
238+
Mit `transition` lassen sich **sanfte Übergänge** zwischen **zwei Zuständen** erstellen.
239+
Dadurch wirken Farb- oder Größenänderungen **fließend**, statt abrupt.
240+
241+
```css
242+
transition: [Eigenschaft] [Dauer] [Timing] [Verzögerung];
243+
```
244+
245+
**Beispiel:**
246+
247+
::left::
248+
249+
```html
250+
<style>
251+
.box {
252+
width: 150px;
253+
height: 80px;
254+
background-color: lightblue;
255+
transition: background-color 0.5s;
256+
}
257+
258+
.box:hover {
259+
background-color: steelblue;
260+
}
261+
</style>
262+
<div class="box"></div>
263+
```
264+
265+
::right::
266+
267+
<style>
268+
.box {
269+
width: 150px;
270+
height: 80px;
271+
background-color: lightblue;
272+
transition: background-color 0.5s;
273+
}
274+
275+
.box:hover {
276+
background-color: steelblue;
277+
}
278+
</style>
279+
<div class="box"></div>
280+
281+
---
282+
layout: two-cols
283+
layoutClass: gap-16
284+
---
285+
286+
# Bringing all together
287+
288+
Some text
289+
290+
```html
291+
<style>
292+
.card {
293+
...
294+
cursor: pointer;
295+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
296+
transform: translateY(0) scale(1);
297+
transition: transform .25s ease, box-shadow .25s ease;
298+
}
299+
300+
.card:hover {
301+
transform: translateY(-4px) scale(1.01);
302+
box-shadow: 0 10px 30px rgba(0,0,0,.12);
303+
}
304+
</style>
305+
```
306+
307+
308+
::right::
309+
310+
<style>
311+
.card {
312+
cursor: pointer;
313+
height: auto;
314+
width: 250px;
315+
border-radius: 8px;
316+
padding: 16px;
317+
font-family: Noto, sans-serif;
318+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
319+
transform: translateY(0) scale(1);
320+
transition: transform .25s ease, box-shadow .25s ease;
321+
}
322+
323+
.card:hover {
324+
transform: translateY(-4px) scale(1.01);
325+
box-shadow: 0 10px 30px rgba(0,0,0,.12);
326+
}
327+
328+
.card-image {
329+
background-image: url("./assets/images/flexbox/flex-wrap.svg");
330+
background-repeat: no-repeat;
331+
background-size: contain;
332+
height: 150px;
333+
}
334+
335+
.card-image img {
336+
height: inherit;
337+
}
338+
</style>
339+
340+
<div style="display: flex; justify-content: center; width: 100%;">
341+
<div class="card">
342+
<div class="card-image">
343+
</div>
344+
<div class="card-header">
345+
<h3> Learn Flexbox </h3>
346+
</div>
347+
<div class="card-body">
348+
<p> Modernes Layout gestalten mit Flexbox. Erfahre mehr in diesem Beitrag </p>
349+
</div>
350+
</div>
351+
</div>
352+

‎slides/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"export": "slidev export"
99
},
1010
"dependencies": {
11+
"@iconify/vue": "^5.0.0",
1112
"@slidev/cli": "^52.1.0",
1213
"@slidev/theme-apple-basic": "^0.25.1",
1314
"@slidev/theme-default": "latest",

‎slides/pnpm-lock.yaml‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)