CSS Geavanceerd

🎯 Overzicht van de Sessie

• CSS Grid Layout
• Transities en Animaties
• CSS Variabelen (Custom Properties)
• Geavanceerde CSS-technieken
• CSS Best Practices

🚀 Leerdoelen

Aan het einde van dit hoofdstuk kun je:

1. CSS Grid gebruiken voor complexe 2D lay-outs
2. Vloeiende transities en keyframe-animaties maken
3. CSS variabelen gebruiken voor onderhoudbare code
4. Geavanceerde stylingtechnieken zoals gradiënten en schaduwen toepassen
5. Best practices uit de industrie volgen voor CSS-organisatie

Deel 1: CSS Grid Layout

Wat is CSS Grid?

CSS Grid is een krachtig 2-dimensionaal lay-outsysteem (rijen EN kolommen) waarmee je eenvoudig complexe webontwerpen kunt maken.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Grid vs Flexbox

Deel 2: Transities & Animaties

Transities

Transities maken het mogelijk om eigenschapswaarden vloeiend te veranderen over een bepaalde tijdsduur.

.btn {
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #3498db;
}

Keyframe Animaties

Gebruik @keyframes voor complexere animaties met meerdere stappen.

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.box {
    animation: slideIn 1s forwards;
}

Deel 3: CSS Variabelen

Variabelen (Custom Properties) slaan waarden op die hergebruikt kunnen worden in je stylesheet.

:root {
    --primary-color: #2c3e50;
    --spacing: 20px;
}

.header {
    background-color: var(--primary-color);
    padding: var(--spacing);
}

Deel 4: Geavanceerde Technieken

Deel 5: Woordenschat

🏋️ Praktijkoefeningen

Beheers geavanceerde lay-outs en effecten met deze uitdagingen:

Ga Verder met Leren