CSS-Effekte

Was ist CSS?

CSS bedeutet Cascading Style Sheets. Mit CSS wird das Aussehen einer Webseite gestaltet. Während HTML die Struktur festlegt, bestimmt CSS Farben, Schriftarten, Abstände und visuelle Effekte.

1. Farben und Hintergrundfarben

Mit color wird die Textfarbe festgelegt. Mit background-color wird die Hintergrundfarbe eines Elements verändert.

CSS-Code

.beispiel {
    color: darkblue;
    background-color: lightblue;
    padding: 15px;
}

Ergebnis

2. Schriftarten und Schriftgrößen

Mit font-family wird die Schriftart ausgewählt. font-size bestimmt die Schriftgröße. font-weight und font-style verändern die Darstellung des Textes.

CSS-Code

.beispiel {
    font-family: Georgia, serif;
    font-size: 26px;
    font-weight: bold;
    font-style: italic;
    color: darkgreen;
}

Ergebnis

3. Rahmen und abgerundete Ecken

Mit border wird ein Rahmen erstellt. border-radius sorgt für abgerundete Ecken.

CSS-Code

.beispiel {
    padding: 20px;
    border: 4px dashed royalblue;
    border-radius: 15px;
}

Ergebnis

4. Schatteneffekte

Mit box-shadow kann ein Schatten um ein HTML-Element erzeugt werden.

CSS-Code

.beispiel {
    padding: 25px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 5px 5px 15px #999999;
}

Ergebnis

5. Hover-Effekte

Mit der Pseudoklasse :hover kann das Aussehen eines Elements verändert werden, wenn sich der Mauszeiger darüber befindet.

CSS-Code

.beispiel {
    background-color: royalblue;
    color: white;
    padding: 15px 25px;
    transition: background-color 0.3s;
}

.beispiel:hover {
    background-color: darkorange;
}

Ergebnis

Bewegen Sie den Mauszeiger über die Fläche. Die Hintergrundfarbe ändert sich.

6. Transformationen und Übergänge

Mit transform können Elemente gedreht, vergrößert oder verschoben werden. Mit transition wird die Veränderung animiert.

CSS-Code

.beispiel {
    width: 100px;
    height: 100px;
    background-color: mediumseagreen;
    transition: transform 0.5s;
}

.beispiel:hover {
    transform: rotate(15deg) scale(1.2);
}

Ergebnis

Bewegen Sie den Mauszeiger über das grüne Quadrat. Es wird gedreht und vergrößert.

7. CSS-Animationen

Mit @keyframes können Animationen erstellt werden. Die Eigenschaft animation steuert die Dauer und Wiederholung.

CSS-Code

.beispiel {
    width: 70px;
    height: 70px;
    background-color: tomato;
    border-radius: 50%;
    animation: bewegen 2s ease-in-out
               infinite alternate;
}

@keyframes bewegen {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(180px);
    }
}

Ergebnis

Der rote Kreis bewegt sich automatisch von links nach rechts und zurück. Bei reduzierten Bewegungseinstellungen des Geräts bleibt die Animation ausgeschaltet.

8. Farbverläufe

Mit linear-gradient können weiche Übergänge zwischen mehreren Farben erzeugt werden.

CSS-Code

.beispiel {
    background: linear-gradient(
        90deg,
        royalblue,
        mediumseagreen
    );
    color: white;
    padding: 35px 20px;
}

Ergebnis

9. Übersicht der CSS-Eigenschaften

10. Praktische Übungen

color

background-color

.text {
    font-family: Arial, sans-serif;
    font-size: 24px;
}

.box {
    border: 3px solid blue;
}

border-radius

.box {
    box-shadow: 5px 5px 15px #999999;
}

.button:hover {
    background-color: orange;
}

.box:hover {
    transform: scale(1.2);
}

@keyframes bewegen {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(180px);
    }
}

.gradient {
    background: linear-gradient(
        90deg,
        royalblue,
        mediumseagreen
    );
}

Zusammenfassung

CSS ermöglicht die individuelle Gestaltung von Webseiten. Neben Farben und Schriftarten können auch Rahmen, Schatten, Hover-Effekte, Transformationen, Animationen und Farbverläufe eingesetzt werden.