6 einfache CSS-Tricks für Bilder

Bildmagie mit CSS

Wenn es um die Gestaltung einer Webseite geht, sind Bilder ein entscheidendes Gestaltungsmittel. Besteht eine Seite lediglich aus Text, sieht sie unglaublich langweilig aus. Du brauchst Bilder oder Grafiken, die den Content auflockern. Zudem gibt es einige CSS-Tricks, mit denen du deine Bilder und Grafiken besonders herausstellen kannst. Sechs CSS-Tricks, die ich hier vorstelle, sollte eigentlich jeder Website-Entwickler kennen: einige Effekte, die du damit erzielen kannst sind richtig cool, andere vor allem praktisch.

 

Denke einem über den Tellerrand hinaus

Es müssen nicht immer die schlichten, kastenförmigen Bilder sein.

Nutze die 3 B’s: Box-shadows (Schatten), boaders (Rahmen) und border-radius (Einstellungen der Bildränder). Insbesondere, wenn

 

CSS-Trick 1 – Interessante Schlagschatteneffekte mit box-shadow

Mit der Eigenschaft box-shadow kannst du einem Bild oder einer Grafik einen weichen Schlagschatteneffekt hinzuzufügen.

Abbildung CSS-Tricks - Bild ohne Schatten

Abbildung - CSS-Tricks 1 - Bild mit Schatten

 

img {  
box-shadow: 8px 8px 10px #aaa;
}

Die ersten beiden Variablen geben die horizontale bzw. vertikale Schattenposition an. Die dritte Variable definiert die Unschärfe (je höher die Zahl, desto unschärfer wird die Darstellung).

Darüber hinaus gibt es noch einen vierten Wert, den wir in unserem Beispiel nicht verwendet haben. Dieser Wert gibt die Spreizung (Größe) des Schattens an. Mit dem letzten Wert (dem Color-Code) kannst du die Farbe des Schatteneffekts definieren.

Profi-Tipp:

Schatteneffekte solltest du möglichst dezent einsetzen. Verwende sie für eine Akzentuierung deiner Grafiken oder Bildern. Übertreibe es nicht, sonst machst du es für Besucher schwierig, deine Seite zu betrachten.

 

CSS-Trick 2 – Border-Styles

Wenn du ein Bild abgrenzen möchtest, aber ein Schatten nicht ganz der richtige Effekt ist, dann kannst du auch einen Rahmen verwenden. Während Ränder typischerweise als durchgezogene Linien mit einer bestimmten Dicke dargestellt werden, bietet dir CSS eine ganze Reihe weiterer Optionen, die Border-Styles.

Im folgenden Beispiel fügen wir dem Bild einen doppelten roten Rahmen hinzu:
Abbildung CSS-Tricks 3 - Bild mit doppletem roten Rand

 

img {  
border: 10px double red;
}

Mit der ersten Variable legen wir die Dicke des Randes fest. Die zweite Variable definiert die Art der Umrandung, den Rahmentyp. Der Rahmen kann durchgängig oder gestrichelt sein, er kann gepunktet, doppelt, erhaben (groove) oder abgesenkt (ridge) sein. Außerdem kannst du Rahmen mit Innenschatten (inset) oder Außenschatten (outset) verwenden. Der beste Weg, um die Unterschiede zu erkennen, ist es, wenn du mit verschiedenen Werten experimentierst. Beispiele der unterschiedlichen Border-Styles findest du hier in den web docs von MDN

 

Wenn du eine noch deutlichere Abgrenzung schaffen möchtest, kannst du den Rand in Verbindung mit einer „Polsterung“ ergänzen. So erzeugst du einen gerahmten Effekt.

Abbildung CSS-Tricks 4 - Bild mit breitem Rand

Um einen „Rahmen“ um ein Bild zu legen, verwenden wir folgenden CSS-Code:

img {   
border: 15px solid #3e2b14;  
padding: 10px;
}

 

CSS-Trick 3 – Border-Radius

Wenn du dich von dem klassischen „Boxed-Look“ lösen möchtest, dann ist die Eigenschaft border-radius genau das Richtige für dich. Mit diesem CSS-Effekt kannst du Rundungen erstellen. Die Möglichkeiten reichen von leicht abgerundeten Ecken bis hin zu komplett runden Bildern. Du brauchst dafür nicht mehr als CSS.

Rundungs-Effekte kannst du auf verschiedene Weisen erzielen. Weitere Informationen zu diesem Thema findest du im Tutorial CSS boder-radius Proporties auf der Webseite von w3schools.com.

https://www.w3schools.com/cssref/css3_pr_border-radius.asp

In unserem Beispiel werden die Ecken mit einer einzigen Variablen auf den gleichen Wert gesetzt. Das erste Bild zeigt leicht abgerundete Ecken, während das zweite ein vollrundes oder kreisrundes Bild zeigt.

Abbildung CSS-Tricks 5 - Bild mit runden Ecken

Abbildung CSS-Tricks 6 - Gerundetes Bild

img {  
border-radius: 30px;  // partially rounded corners
}  

img {  
border-radius: 100%; // full circular image
}

 

CSS-Trick 4 – opacity: Dinge sind nicht immer so, wie sie erscheinen

Vielleicht möchtest du ein Bild auf deiner Webseite zeigen. Dieses möchtest du aber dezent als Hintergrundbild verwenden. In diesem Fall ist die Opazitätseinstellung (opacity) interessant für dich.

Die erste Abbildung in unserem Beispiel zeigt das Bild, so wie es ist. In der zweiten Abbildung dagegen ist dem Bild die halbe Deckkraft (0,5) zugewiesen worden.

Die Werte für die Opazität eines Bildes reichen von 0 bis 1, wobei der Wert 1 für volle Deckung steht.

img {  
opacity: 0.5;
}

Abbildung CSS-Tricks 7 - Opacity 1

Abbildung CSS-Tricks 8 - Bild aufgehellt

 

 

 

 

 

CSS-Trick 5 – Bilder in ein DIV einfügen und interessante Effekte erzielen

Mit ein klein wenig Mehraufwand bei der Erstellung des Website-Codes kannst du mit CSS eine Vielzahl interessanter visueller Effekte erzielen.

In diesem Beispiel haben wir das Bild als Hintergrund in ein <div>-Element eingefügt, statt einen einfachen <img>-Tag zu verwenden. Auf diese Weise kann ein linearer Farbverlauf auf das Element angewendet werden, mit dem sich interessante Effekte erzeugen lassen.

CSS für die Ressource <div>:

.imageDiv {   
background: url(“images/rust.png”);   
height: 700px;
}

Bei einem linearen Farbverlauf werden typischerweise zwei verschiedene Farben angegeben, um einen Überblendungseffekt zu erzeugen. Wenn du stattdessen an beiden Stellen die gleiche Farbe verwendest, kannst du einen Fotofilter-Effekt erzeugen. So lässt sich zum Beispiel ein Bild verdunkeln …

Abbildung CSS-Tricks 9 - Bild in Originaldarstellung

.imageDiv {  
background-image:        
linear-gradient(        
rgba(0, 0, 0, 0.5),        
rgba(0, 0, 0, 0.5)        
),   
background: url(“images/rust.png”);
}

…oder, du erhältst einen verwaschenen Farbeffekt.

Abbildung CSS-Tricks 10 Farbeffekte mit CSS

.imageDiv {  
background-image:        
linear-gradient(        
rgba(255, 0, 0, 0.5),        
rgba(255, 0, 0, 0.5)        
),   
background: url(“images/rust.png”);
}

 

CSS-Trick 6 – CSS Image Sprintes: Überlasse CSS die schweren Aufgaben

Du möchtest noch intensiver in die Welt der CSS-Effekte eintauchen? Dann solltest du dich zum Beispiel mit den Möglichkeiten von Image-Sprites beschäftigen. Bei einem Image-Sprint werden kleine Bilder oder Icons (wie z.B. Social Media Links oder Navigationspfeile) in einer einzelnen Grafik zusammengefasst. Ein Image-Sprite ist eine komplexe Bilddatei, der man verschiedene CSS-Eigenschaften zuweisen kann. Auf diese Weise lassen sich zum Beispiel die Ladezeiten von häufig verwendeten Grafiken deutlich verkürzen, denn bei einem Image-Sprite muss die Grafik nur einmal geladen werden und kann dann an mehreren Stellen auf der Website verwendet werden. Der Teil des Bildes, der vom Benutzer gesehen werden soll, zum Beispiel ein bestimmtes Icon, wird durch CSS-Positionierungen an die entsprechende Stelle bewegt.

Sprites können die Geschwindigkeit deiner Webseite erheblich beschleunigen, indem sie die Anzahl der Anfragen an den Server verringern.

Mehr Informationen zu CSS Image Sprintes findest du auf www.w3schools.com

Es gibt viele Tutorials, die die Verwendung von Image-Sprites erklären, wie zum Beispiel das Tutorial auf TutorialRepublic, das du hier findest.

 

Bildnachweis: jin.thai via Compfight cc

Aus dem Englischen: Wolf-Dieter Fiege