Schnell gemacht: Bilder-Effekte mit CSS

In diesem Blogartikel werde ich dir ein paar einfache Möglichkeiten zeigen, mit denen du auch in deinem Weblog schnell die Bilder mithilfe von CSS aufwerten kannst.

Oberhalb des ersten Absatzes siehst du das Bild, mit dem wir in diesem Blogartikel arbeiten werden. Es handelt sich um ein Ingame-Screenshot mit Aragorn aus dem Spiel Herr der Ringe Online, welches mittlerweile von der Firma Standing Stone Games LLC betreut wird.

Ecken in den Bildern abrunden

Starten wir mit einer einfachen Übung zum Aufwärmen. Wir werden die Ecken des Bildes abrunden. Nicht zu wenig, aber auch nicht zu stark. Eine dezente, aber elegante Rundung, die ansprechend ausschaut:

Für die Abrundung der Ecken ist die Eigenschaft border-radius verantwortlich. Im folgenden Beispiel kam diese Deklaration zum Einsatz:

img {border-radius: 9px;}

Wenn du die Ecken noch stärker abrunden möchtest, dann musst du den Wert erhöhen. Das kann dann so weit gehen, bis du einen Kreis hast. Da ich allerdings in diesem Blogartikel nicht ein quadratisches, sondern eine rechteckiges Bild nutze, wird daraus bei maximal sinnvoller Abrundung ein Stadion:

Die maximale (sinnvolle) Abrundung erreichst du in dem du den halben Wert der Bildhöhe beim border-radius angibst. Im Fall unseres Bildes sind das 250 Pixel. Hier drunter siehst du zwei kleine Profilbilder. Beide sind identisch. Allerdings hat das rechte Bild die CSS-Angabe border-radius: 50px; spendiert bekommen, was die Hälfte des Wertes der Höhe darstellt: Das Bild ist 100 × 100 Pixel groß.

Bilder mit Schlagschatten

Mit ein paar Zeilen CSS Code kannst du mit den Bildern auch den sog. Polaroid-Effekt erstellen:

Verantwortlich für diesen Effekt sind die folgenden Zeilen CSS-Code:

img {
    background: #fff;
    border: 1px solid #bbb;
    filter: drop-shadow(1rem 1rem 4px #ccc);
    padding: 2rem 2rem 5rem 2rem;
}

Die Zeilen 1, 2 und 4 dürften die allermeisten von euch bekannt sein. Mit diesen drei Deklarationen haben wir dem Bild einen weißen Hintergrund – wichtig für Websites mit andersfarbigem Hintergrund – einen dünnen Rahmen und einen inneren Abstand spendiert. In der dritten Zeile bemühe ich die filter-Eigenschaft, und zwar in Verbindung mit drop-shadow. Damit entsteht ein Schlagschatten. Der erste Wert betrifft die x-Achse, der zweite Wert die y-Achse, der dritte Wert ist für blur-Radius (verwischen) zuständig und der vierte Wert bestimmt den Farbwert.

Sepia mit CSS

Allerdings ist der Schlagschatten nicht der einzige Filter, den diese Eigenschaft besitzt. Mit einem Sepia-Filter können wir das Bild auch älter wirken lassen:

Da der Sepia-Effekt sich nicht nur auf das Bild, sondern auch auf den Hintergrund auswirkt, habe ich den Schlagschatten und den Rahmen in eine div-Box ausgelagert welche das Bild umgibt.

div {
    background: #fff;
    border: 1px solid #bbb;
    padding: 2rem 2rem 5rem 2rem;
    filter: drop-shadow(1rem 1rem 4px #ccc);
}

img {
    filter: sepia(60%);
}

Grau-Filter mit CSS

Wem Sepia nicht zusagt, der kann auch einen Grau-Filter einsetzen:

Hier musst du lediglich die Filter-Funktion ändern, und zwar zu grayscale:

img {
    filter: grayscale(80%);
}

Natürlich kannst du den Einsatz von CSS-Filtern auch auf zum Beispiel :hover setzen, sodass die Filter de-/aktiviert werden, wenn du mit dem Mauscursor über das Bild fährst. Einen solchen Einsatz kannst du im folgenden Beispiel von mir auf CodePen sehen:

See the Pen
CSS: Filter-Eigenschaften by Vlad (@vladimir-simovic)
on CodePen.

Das waren jetzt nur ein paar wenige Beispiele, mit denen du Bilder schnell aufmotzen kannst. Darüber hinaus gibt es einige weitere Möglichkeiten, zum Beispiel kannst du mit wenig CSS die Bilder skalieren, rotieren oder transformieren.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.