Der folgende Artikel beinhaltet einige einfache Zeilen CSS Code, um Bilder auf einer Website besser zu präsentieren, ohne dafür ein Bildbearbeitungsprogramm wie GIMP oder Photoshop einsetzen zu müssen. Sicherlich gibt es dafür auch einige Plugins, allerdings möchte ich hier keine Grundsatzdiskussion zum Thema Plugins beginnen. Ich persönlich versuche Plugins nur dann zu verwenden, wenn Sie wirklich einen Nutzen für mich darstellen und ich die Funktion nicht mit ein paar einfachen Zeilen Code selbst umsetzen kann. Zudem kann der Code auch auf Websites ohne CMS System verwendet werden. Doch genug hierzu, kommen wir zu dem eigentlichen Vorhaben. Oft wirken Bilder vor allem auf einem weißen Hintergrund wie auf meiner Website etwas lieblos eingefügt und der haben einen recht harten Übergang. Dies lässt sich meiner Meinung nach durch einen kleinen Schatten und runde Kanten umgehen. Dazu brauchen wir lediglich ein paar simple Zeilen CSS.
Ausgangslage:
Wie in der Einleitung beschrieben hat das aktuelle Bild einen sehr harten Übergang zum weißen Hintergrund. Wäre das Bild etwas dunkler gehalten, wäre der Effekt noch extremer. Um dies etwas abzuschwächen, können die Kanten des Bildes abgerundet werden. Vor allem bei Personen- oder Tierportraits macht dieser Effekt zumindest meiner Meinung nach oft etwas her.
Circular:
Der Code:
.circular-image img {
width: 150px;
height: 150px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
};
Über die Eigenschaft border-radius kann die Krümmung bestimmt werden. Durch die Änderung dieses Wert können z.B. auch nur die Ecken des Bild abgerundet werden, statt das ganze Bild direkt Rund darzustellen. Um den Übergang zwischen Bild und Hintergrund noch etwas weicher zu gestalten kann dem Bild noch ein Schatten hinzugefügt werden. Auch hierfür ist der Code denkbar simpel.
Circular, Shadow und Animation:
Der Code:
.shadow-image img {
-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 9);
-moz-box-shadow: 0 0 16px rgba(0, 0, 0, 9);
-o-box-shadow: 0 0 16px rgba(0, 0, 0, 9);
-ms-box-shadow: 0 0 16px rgba(0, 0, 0, 9);
-box-shadow: 0 0 16px rgba(0, 0, 0, 9);
}In unserem Fall habe ich mich für einen schmalen grauen Schatten entschieden. Die ersten beiden Werte hinter box-shadow stehen für die Verschiebung des Schatten an der X- und Y-Achse. Um den Schatten auf allen Seiten zu erhalten setzt man die beiden Werte auf 0.
Zusätzlich habe ich bei dem letzten Bild noch einen weiteren CSS-Effekt hinzugefügt. Bei Mouse-over fängt das Bild an, zu pulsieren. Auch das lässt sich ohne Plugin durch ein paar einfache Zeilen CSS realisieren. Den Code hierfür werde ich in einem meiner nächsten Artikel vorstellen.