Dette modul dækker avancerede funktioner og visuel interaktion. Vi bevæger os væk fra statiske sider og skaber levende brugerflader med høj brugervenlighed.
Lektion 12: CSS Variabler (Custom Properties)
Ligesom i rigtige programmeringssprog kan du i moderne CSS gemme værdier (som farvekoder, skrifttyper eller afstande) i variabler. Det betyder, at hvis virksomheden ændrer sin logofarve, skal du kun rette den ét enkelt sted i stedet for 200 steder i din CSS-fil.
Definition og brug af variabler
Globale variabler defineres i pseudo-klassen :root, hvilket svarer til det absolut øverste niveau i dit HTML-dokument. Variabler skal altid starte med to bindestreger (--).
/* 1. Definer dine variabler i :root */
:root {
--primary-color: #3b82f6; /* Blå */
--secondary-color: #1e293b; /* Mørkegrå */
--text-main: #334155; /* Slate-grå tekst */
--border-radius-md: 8px; /* Genanvendelig afrunding */
}
/* 2. Brug dine variabler i koden med var() funktionen */
body {
color: var(--text-main);
}
.knap-primaer {
background-color: var(--primary-color);
color: #ffffff;
border-radius: var(--border-radius-md);
padding: 10px 20px;
border: none;
}
Det geniale trick: Nemt mørkt tema (Dark Mode)
Ved blot at overskrive variablerne i en enkelt CSS-klasse, kan du ændre hele hjemmesidens udseende med ét splitsekund (f.eks. når JavaScript tilføjer klassen .dark til dit <body> tag):
/* Når body får klassen .dark, ændres værdien af variablerne automatisk overalt */
body.dark {
--secondary-color: #0f172a; /* Meget mørkere baggrund */
--text-main: #f8fafc; /* Lys tekst */
}
Lektion 13: Transitioner og transformer
Når et element ændrer sig – f.eks. når du holder musen over en knap – må farveskiftet ikke ske øjeblikkeligt og hakkende. Det skal ske glidende.
1. Transitioner (Glatte overgange)
En transition fortæller browseren, at en ændring skal animeres over et kort stykke tid. Du definerer, hvilken egenskab der skal animeres, og hvor længe det skal vare (i sekunder s eller millisekunder ms).
.kort {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
/* Vi vil animere alle ændringer over 300ms med en blød kurve (ease-in-out) */
transition: all 0.3s ease-in-out;
}
.kort:hover {
background-color: #f8fafc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
/* Når musen rammer kortet, glider både farven og skyggen blødt ind */
}
2. Transformer (Skalering, rotation og flytning)
Med transform kan du manipulere et elements form, størrelse og placering i rummet uden at ødelægge resten af sidens layout.
scale(): Gør elementet større eller mindre (1.1 svarer til 10% større).rotate(): Roterer elementet med urets retning i grader (deg).translate(): Flytter elementet vandret (X) eller lodret (Y).
.ikon-knap:hover {
/* Knappen bliver 5% større og roterer 15 grader, når man holder musen over den */
transform: scale(1.05) rotate(15deg);
}
Lektion 14: CSS Animationer (@keyframes)
Hvor en transition kun fungerer, når et element går fra en starttilstand til en sluttilstand (f.eks. fra normal til hover), tillader CSS Animationer dig at bygge komplekse, uafhængige bevægelser, der kan køre i ring uendeligt.
Processen består af to trin:
- Definer selve animationen og dens tidslinje med
@keyframes.
- Tildel animationen til det element, der skal bevæge sig, ved brug af animation-egenskaberne.
Eksempel: En pulserende indlæsningscirkel (Spinner)
/* Trin 1: Definer tidslinjen for animationen under navnet 'roter' */
@keyframes roter {
0% {
transform: rotate(0deg); /* Startposition */
}
100% {
transform: rotate(360deg); /* Slutposition - en hel omgang rundt */
}
}
/* Trin 2: Sæt animationen i gang på elementet */
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-top-color: #3b82f6; /* Kun toppen er blå for at skabe en cirkel-effekt */
border-radius: 50%; /* Gør boksen fuldstændig rund */
/* Navn: roter | Varighed: 1s | Gentagelser: infinite (uendelig) | Hastighed: linear (ensartet tempo) */
animation: roter 1s linear infinite;
}
Et andet eksempel: En "hoppende" opmærksomhedspil
@keyframes hop {
0%, 100% {
transform: translateY(0); /* Normal position i top og bund af tidslinjen */
}
50% {
transform: translateY(-10px); /* Hopper 10px op på halvvejen */
}
}
.pil-ned {
/* Kører i ring hvert 1.5 sekund med en blød op-og-ned kurve */
animation: hop 1.5s ease-in-out infinite;
}
