Schnell gemacht: Bilder-Effekte mit CSS

Aragorn in Herr der Ringe Online

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:

Aragorn in Herr der Ringe Online

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:

Aragorn in Herr der Ringe Online

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ß.

Vlad Vlad

Bilder mit Schlagschatten

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

Aragorn in Herr der Ringe Online

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:

Aragorn in Herr der Ringe Online

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:

Aragorn in Herr der Ringe Online

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 Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

4 Kommentare

  1. Die abgerundeten Ecken nutze ich sehr gerne, mein Lieblingswert dabei ist 7px. Wenn ich aber ein Avatar in rund haben will, ich gehe von einem quadratischen Bild aus, setze ich keine Pixel, sondern 50% als border-radius. Damit kann ich später die Bildgröße (Anzeigegröße) ändern, ohne den Radius anpassen zu müssen.

  2. Ist es nicht sinnvoller, diese Bildbearbeitungen mit einem geeigneten Programm durchzuführen und die Bilder danach so verändert hochzuladen? All die beschriebenen Möglichkeiten bis auf den Hover-Effekt sind dort umsetzbar. Ich befürchte, dass sich die Ladezeit der Bilder und die Größe der WordPress-Installation nur erhöhen, wenn mal diese Tipps nutzt.

    1. Deine Ăśberlegung wegen der Ladezeit sind richtig, aber hierbei handelt es sich um wenige Zeilen CSS-Code. Das Polaroid-Beispiel hat ganze 120 Byte (0,12 KByte) und mit diesen 120 Byte steuerst du alle Bilder an, die die gleiche CSS-Klasse besitzen.

      Wenn ich dagegen die Originalen Bilder mit ähnlichen Effekten in der Bildbearbeitung umsetze, dann habe ich deutlich größere Dateien.

      Der andere Vorteil ist beim Redesign. Wenn du dann das Layout deine Website wechselst und möchtest keine abgerundete Ecken und sonstige Effekte haben, dann löschst du einfach die Angaben in CSS und musst die eigentlichen Bilder nicht anfassen.

Kommentare sind geschlossen.