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.

Diesen Blogartikel teilen:

Verwandte Beiträge:

Amazon Business
Werbung

Geschrieben von Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

  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.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.