CSS img-Selektor – Bilder-Styling für deine Website

Starte dein Business in wenigen Minuten - mit Airo. Ganz einfach Domainname finden, Logo & Website-Design gestalten uvm.

Erfahre mehr

(Update) Websites ohne Bilder? Heute fast undenkbar. Websites mit 0815-Bildern? Ganz schön langweilig. Über die Style- bzw. Formatsprache Cascading Style Sheets (CSS) verpasst du Grafiken und Bildern einen einzigartigen Look. Wir erklären grundlegende CSS-Befehle und zeigen dir einige Tricks.

Die Basics: Was ist CSS?

HTML und CSS gehören im Resposive Web Design zusammen wie Salz und Pfeffer. Gemeinsam bilden sie die grundlegenden Sprachen von Webseiten. Während sich HTML um die Inhalte kümmert, dreht sich bei CSS alles um den Look bzw. die Formatierung. Mit CSS-Befehlen legst du fest, wie eine Homepage oder Website aussehen soll:

• Responsivität
• Navigationselemente
• Bilder und Grafiken (z.B. Thumbnail, Seitenverhältnis, Background-Image, jpg- oder png-Attribute etc.)
• Texteffekte (z.B. Responsive Images)
• Schriftarten, Styling und Fonts
• Browser-Support (Bilderdarstellung in Firefox, Chrome, Safari)

Analog zu HTML-Codes kannst du CSS-Anweisungen selbst schreiben und sie in der style.css-Datei speichern. Oder du nutzt Editoren und Tools für WordPress und Co. Der Vorteil beim DIY-Code: Dein CSS img-Element sieht individuell aus, deine Website wird unverwechselbar.

Die CSS-Syntax

Ein CSS-Befehl oder -tag beruht auf einer festgelegten Syntax bzw. einem sogenannten Regelsatz. Dieser ist immer nach demselben Schema aufgebaut:

Selektor { Eigenschaft: Wert; Eigenschaft: Wert }

Der Selektor verweist auf das Element einer Website, das verändert bzw. formatiert werden soll. Eine Einheit aus Eigenschaft und Wert wird Deklaration genannt.

Jede Deklaration legt einen bestimmten Faktor fest – zum Beispiel Farbe, Schriftgröße, Schattenwürfe usw. Um eine rote H1-Hauptüberschrift zu definieren, lautet der Befehl:

h1 {
color: red;
}

Um komplexere Stylevorgaben abzubilden, gibt es sogenannte Shorthand-Eigenschaften wie .btn, die einen ganzen Satz an Vorgaben enthalten. Es existieren praktisch unendlich viele Möglichkeiten, die Syntax einzusetzen. CSS-Tutorials (wie von SelfHTML) helfen dir beim Verstehen und Erlernen der Sprache.

5 leichte CSS img-Tricks für Bilder

Über CSS gestylte Bilder machen deine Homepage und Website einmalig. Für die ersten Schritte (und zum Üben) zeigen wir dir fünf Ideen für ungewöhnliche Hinguckereffekte.

CSS-Trick 1 -  Abgerundete Ecken (border-radius)

img {
border-radius: 8px;
}

Je größer du den px-Wert definierst, desto stärker wird das Bild an den Ecken abgerundet bzw. beschnitten. Dies ist ein schöner Kontrast zu Textblöcken und anderen rechteckigen Elementen.

CSS-Trick 2 - Weicher Schlagschatten (box-shadow)

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

Die ersten beiden Werte definieren die horizontale und vertikale Position des Schattens, mit dem dritten Wert legst du die Unschärfe fest. Der Color-Code #aaa definiert die Schattenfarbe. Schatten erzeugen einen dreidimensionalen Effekt, sollten jedoch mit Bedacht eingesetzt werden.

CSS-Trick 3 - Responsive Bilder (max-width & height)

img {
max-width: 100%;
height: auto;
}

Responsive Bilder – also Darstellungen, die sich automatisch an Bildschirmgrößen und Endgeräte anpassen – sind wichtiger denn je. Diese Spezifikation sollte daher zur Grundausstattung aller deiner CSS img-Auszeichnungen gehören und eine zentrale Rolle spielen, sobald du eine Website planst.

CSS-Trick 4 - Transparente(re) Bilder (opacity)

img {
opacity: 0.5;
}

Für dezente Hintergrundbilder bietet sich die opacity-Deklaration an. Du kannst einen Wert zwischen 0 und 1 festlegen, wobei 0 volle Transparenz und 1 volle Deckkraft bedeutet. Spiele mit den Werten und finde die optimale Mischung aus Unsichtbarkeit und Farbenpracht.

CSS-Trick 5 - CSS Image Sprites

Sogenannte CSS Image Sprites fassen mehrere Bilder in einer Grafik zusammen und weisen ihnen bestimmte Eigenschaften zu. Sprites helfen dir, zum Beispiel Navigationsleisten über Icons zu designen. Da du mehrere einzelne Vorgaben in einer Datei festhältst, lädt deine Website schneller. Das lohnt sich insbesondere für Elemente, die du öfter verwendest – wie eben Navigationsleisten.

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

CSS-Trick 6 - Hintergrundgestaltung (background)

Hintergrundbilder auf deiner Website kannst du über die Eigenschaft background festlegen. Hier gibt es eine Menge Attribute, die den Look ausmachen. Dazu gehören:

• background-color: Hintergrundfarbe
• background-position: Verhältnis von Hintergrundbild zu Element, in dem sich das Bild befindet
• background-size: Größe des Hintergrundbilds
• background-repeat: Lückenlose Wiederholung einer Hintergrundgrafik

CSS-Trick 7 - Allgemeine Darstellung von Elementen

Es muss nicht immer ein besonderes Layout sein, das Webseiten zum Hingucker macht. Eine sorgfältige Positionierung und Darstellung von Grafiken und Elementen macht bereits viel aus. Dafür gibt es in CSS beispielsweise:

• display: Eigenschaft für Boxen; Deklaration mit Befehlen wie block oder inline
• div class: Klasse von div-Tags in HTML, die mit CSS gestylt werden
• img src: Platzhalter-Tag in HTML mit src-Attribut als Link zum Bild
• object-fit: Eigenschaft zur Layoutanpassung von Elementen wie Bildern und Videos
• resize: Angaben zur Änderung am Block-Element
• text-align: horizontale Ausrichtung von Text
• position: beliebige Position von Elementen auf Seite, Definition über bottom left, top left usw.

CSS-Trick - Zusammenfassung

CSS img-Selektoren lassen sich als „Sprache des Internets“ genauso erlernen wie HTML-Befehle. Wenn du auf Bibliotheken und Vorlagen setzt, verpasst du jeder Homepage und Website einen individuellen Look – und sorgst zum Beispiel dafür, dass dein Onlineshop sofort ins Auge fällt.

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.