Wenn es um Webdesign geht, können fesselnde Bilder den Unterschied ausmachen. Bilder spielen eine entscheidende Rolle, wenn es darum geht, ein ansprechendes und einprägsames Nutzererlebnis zu schaffen.
Aber wie kannst du deine Bilder von gewöhnlich zu außergewöhnlich machen? Hier kommt das Bildstyling ins Spiel. Mit der Macht von CSS kannst du deiner Kreativität freien Lauf lassen und deine Bilder in fesselnde visuelle Elemente verwandeln, die einen bleibenden Eindruck hinterlassen.
In diesem Artikel tauchen wir in die Welt der CSS-Bildgestaltung ein und lernen viele Techniken und Eigenschaften kennen, die deine Webdesign-Fähigkeiten auf ein neues Niveau heben werden.
Wie man Bilder in HTML einfügt
Bevor du ein Bild stylen kannst, musst du es zunächst in dein HTML-Dokument einfügen. Dazu kannst du den <img> Tag verwenden. Der <img> Tag ist ein selbstschließender Tag (er benötigt keinen schließenden Tag). Er hat ein src -Attribut, das die URL oder den Dateipfad des Bildes angibt, das du anzeigen möchtest.
<img src="image.jpg" alt="Description of the image">Du kannst auch eine absolute URL oder einen relativen Dateipfad für das Bild angeben.
<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline">Das Attribut alt steht für Alternativtext und ist für die Barrierefreiheit unerlässlich. Das Tag <img> bietet außerdem zwei optionale Attribute: width und height. Mit diesen Attributen kannst du die Abmessungen des Bildes in Pixeln angeben.
<img src="image.jpg" alt="Description of the image" width="300" height="200">Es wird jedoch generell empfohlen, die Attribute width und height nicht zu verwenden, es sei denn, du musst bestimmte Bildmaße einhalten. Stattdessen kannst du die Größe des Bildes mit CSS steuern, was mehr Flexibilität beim responsiven Design bietet.
img {
height: 200px;
width: 700px;
}Responsive Image Styling
Die Anwendung bestimmter Werte für die Attribute width und height auf ein Bild kann unerwünschte Folgen haben, wie z. B. die Komprimierung oder Verzerrung des Bildes. Das gilt vor allem, wenn die angegebenen Maße nicht mit dem ursprünglichen Seitenverhältnis des Bildes übereinstimmen.
Um diese Probleme zu vermeiden und die richtigen Bildproportionen beizubehalten, kommt hier das Responsive Image Styling ins Spiel. Responsive Image Styling sorgt dafür, dass sich Bilder an unterschiedliche Bildschirmgrößen anpassen, was für responsives Webdesign entscheidend ist.
Dies kannst du mit der Eigenschaft max-width erreichen, die die maximale Breite eines Bildes begrenzt.
img {
max-width: 100%;
height: auto;
}
Du kannst auch Medienabfragen verwenden, um das Bildstyling auf der Grundlage verschiedener Geräte-Breakpoints zu ändern. Mit Medienabfragen kannst du bestimmte CSS-Regeln anwenden, die von der Bildschirmgröße, der Ausrichtung und anderen Merkmalen des Geräts abhängen. Ein Beispiel:
@media screen and (max-width: 600px) {
.my-image {
max-width: 50%;
}
}Object-Fit verwenden, um das Seitenverhältnis beizubehalten und eine Verkleinerung zu vermeiden
Manchmal gibt es Situationen, in denen du eine bestimmte Breite und Höhe für ein Bild angeben musst. In solchen Fällen kannst du die CSS-Eigenschaft object-fit verwenden, um zu steuern, wie sich das Bild innerhalb der angegebenen Maße verhält.
Mit der Eigenschaft object-fit kannst du festlegen, wie ein Bild in seinen Container passen soll, ohne sein Seitenverhältnis zu verändern. Sie kann verschiedene Werte annehmen, wie z. B.:
- fill: Mit diesem Wert wird das Bild gestreckt oder gequetscht, damit es genau in den Container passt, was zu Verzerrungen führen kann.
- contain: Dieser Wert skaliert das Bild proportional so, dass es ohne Beschneidung in den Container passt und das Seitenverhältnis beibehalten wird. Er stellt sicher, dass das gesamte Bild innerhalb des Containers sichtbar ist, was zu Leerstellen führen kann.
- cover: Dieser Wert skaliert das Bild proportional so, dass es den Container abdeckt und das Seitenverhältnis beibehält. Dies kann dazu führen, dass die Ränder des Bildes abgeschnitten werden, um sicherzustellen, dass es den gesamten Container ausfüllt.
- none: Bei diesem Wert wird das Bild weder skaliert noch beschnitten. Das Bild behält seine ursprüngliche Größe und kann den Container überfüllen.
Hier ist ein Beispiel für die Verwendung der Eigenschaft Objektanpassung:
img {
width: 300px;
height: 300px;
object-fit: cover;
}Bilder mit abgerundeten Ecken mit CSS erstellen
Wenn du Bildern abgerundete Ecken hinzufügst, können sie weicher und optisch ansprechender aussehen.
Mit CSS kannst du diesen Effekt ganz einfach erreichen, indem du die Eigenschaft border-radius auf das Bild anwendest.
Hier erfährst du, wie du Bilder mit abgerundeten Ecken erstellen kannst:
img {
border-radius: 10px;
}Im obigen Beispiel setzen wir die Eigenschaft border-radius auf 10px. Passe den Wert nach deinen Wünschen an, um die Rundung der Ecken zu steuern. Dieser Wert kann deine bevorzugten Einheiten wie z. B. rem, Prozent usw. verwenden.
Kreisförmige Bilder mit CSS erstellen
Um deine Bilder perfekt rund zu machen, kombiniere die Eigenschaft border-radius mit gleichen Breiten- und Höhenmaßen.
Hier erfährst du, wie du runde Bilder erstellen kannst:
img {
border-radius: 50%;
width: 200px;
height: 200px;
}Im obigen Beispiel ist die Eigenschaft border-radius auf 50% eingestellt, wodurch ein Kreis entsteht, indem die Randkurve die Hälfte der Breite oder Höhe des Bildes ausmacht.
Du kannst auch die Eigenschaft clip-path verwenden. Sie ermöglicht es dir, einen Beschneidungspfad für ein Element zu definieren und so einzigartige Formen zu schaffen.
Hier ist ein Beispiel für ein Bild, das zu einem Kreis beschnitten wurde:
img {
clip-path: circle(50%);
width: 200px;
height: 200px;
}Bilder mit CSS zentrieren
Das Ausrichten von Bildern in der Mitte ihres Containers ist eine gängige Praxis im Webdesign. Es gibt viele Möglichkeiten, dies zu erreichen. Eine davon ist, die Eigenschaft display des Bildes auf block zu setzen und margin: 0 auto anzuwenden, was das Bild horizontal in seinem Container zentriert.
img {
display: block;
margin: 0 auto;
width: 700px;
}
Transparente Bilder erstellen
Du kannst CSS verwenden, um den gewünschten Transparenzeffekt anzuwenden und ein Bild transparent zu machen. Mit der Eigenschaft opacity kannst du den Transparenzgrad eines Elements, auch eines Bildes, steuern.
Ein Wert von 1 steht für volle Deckkraft (vollständig sichtbar), während 0 für volle Transparenz (vollständig unsichtbar) steht.
img {
opacity: 0.5;
}Die Deckkraft des Bildes im obigen Code ist auf 0.5 eingestellt, was zu einem halbtransparenten Effekt führt. Du kannst den Wert der Deckkraft anpassen, um den gewünschten Grad der Transparenz zu erreichen.
Text auf Bildern platzieren
Wenn du Text auf Bildern platzierst, kannst du optisch ansprechende und informative Designs erstellen. Um Text über einem Bild zu platzieren, kannst du eine Kombination aus CSS-Positionierung und z-index verwenden.
Hier ist ein Beispiel:
// HTML
<div class="image-container">
<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" >
<div class="image-text">Welcome to Kinsta</div>
</div>
// CSS
.image-container {
position: relative;
}
.image-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: white;
font-size: 20px;
font-weight: bold;
}Im obigen Code dient image-container div als Container sowohl für das Bild als auch für die Textüberlagerung. Die Eigenschaft position: relative wird auf den Container angewendet, um einen Positionierungskontext zu erstellen. Die Klasse image-text wird dann verwendet, um den Text mithilfe von position: absolute absolut innerhalb des Containers zu positionieren, und die Eigenschaften top, left und transform, um ihn zu zentrieren. Die Eigenschaft z-index sorgt dafür, dass der Text oberhalb des Bildes erscheint, und du kannst das Aussehen des Textes mit Farbe, Schriftgröße und Schriftgrad weiter anpassen.
Bitte beachte, dass die spezifischen Werte für die Positionierung und das Styling an deine Designvorlieben und Anforderungen angepasst werden können.
Bilder spiegeln: Gespiegelte Effekte erzeugen
Das Spiegeln von Bildern kann deinem Webdesign ein interessantes visuelles Element hinzufügen. Egal, ob du einen Spiegeleffekt erzeugen oder ein Bild vertikal oder horizontal spiegeln möchtest, CSS bietet einfache Techniken, um diesen Effekt zu erzielen.
Horizontales Spiegeln
Um ein Bild horizontal zu spiegeln, kannst du die Eigenschaft transform mit der Funktion scaleX() verwenden. Der Wert scaleX(-1) spiegelt das Bild entlang der horizontalen Achse.
img {
transform: scaleX(-1);
}Vertikales Spiegeln
Um ein Bild vertikal zu spiegeln, kannst du die Eigenschaft transform mit der Funktion scaleY() verwenden. Der Wert scaleY(-1) spiegelt das Bild entlang der vertikalen Achse.
img {
transform: scaleY(-1);
}Diagonales Spiegeln
Um einen diagonalen Spiegeleffekt zu erzeugen, kombinierst du die Funktionen scaleX() und scaleY() mit der Eigenschaft transform.
img {
transform: scaleX(-1) scaleY(-1);
}Im obigen Code wird das Bild horizontal und vertikal gespiegelt, sodass ein diagonaler Spiegeleffekt entsteht.
Hinzufügen von Filtern zu Bildern: Visuelle Effekte verstärken
Mit Filtern kannst du das Aussehen und die Wirkung von Bildern verändern und einzigartige visuelle Effekte erzielen. CSS bietet eine Reihe von Filtereigenschaften, die du auf Bilder anwenden kannst, um Helligkeit, Kontrast, Sättigung und vieles mehr zu verändern.
Du kannst die Eigenschaft filter verwenden, um einen Filter auf ein Bild anzuwenden. Diese Eigenschaft lässt verschiedene Filterfunktionen zu, die jeweils unterschiedliche Aspekte des Bildes verändern.
img {
filter: brightness(150%);
}Im obigen Code wird die Funktion brightness(150%) auf das Bild angewendet. Dadurch wird die Helligkeit des Bildes um 150 % erhöht.
Häufig verwendete Filterfunktionen
Hier sind einige häufig verwendete Filterfunktionen:
brightness(): Stellt die Helligkeit des Bildes ein.contrast(): Ändert den Kontrast des Bildes.saturate(): Ändert den Sättigungsgrad des Bildes.grayscale(): Wandelt das Bild in Graustufen um.blur(): Wendet einen Unschärfeeffekt auf das Bild an.sepia(): Wendet einen Sepia-Effekt auf das Bild an.
Du kannst mit verschiedenen Filterfunktionen und -werten experimentieren, um die gewünschten visuellen Effekte zu erzielen. Wenn du mehrere Filter kombinierst, kannst du auch kompliziertere Transformationen erzielen.
Hover-Overlays für Bilder erstellen
Hover Overlays auf Bildern können deiner Website Interaktivität und visuelles Interesse verleihen. Wenn ein Nutzer mit dem Mauszeiger über ein Bild fährt, kann ein Überlagerungseffekt, wie z. B. eine Farbüberlagerung oder eine Textbeschriftung, angewendet werden.
CSS bietet verschiedene Techniken, um Hover-Overlays zu erzielen; eine Möglichkeit ist die Verwendung von CSS-Übergängen. Indem du bestimmte Eigenschaften eines Elements überblendest, kannst du die Veränderungen beim Schweben des Mauszeigers über einem Bildes nahtlos animieren.
// HTML
<div class="image-container">
<img src="image.jpg" alt="Description of the image">
<div class="overlay"></div>
</div>
// CSS
.image-container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
opacity: 1;
}Im obigen Code umhüllt ein .image-container Element das Bild und ein .overlay Element. Die Überlagerung ist zunächst transparent (opacity: 0) und bedeckt das gesamte Bild. Wenn du mit dem Mauszeiger über .image-container fährst, wird die Deckkraft von .overlay auf 1 geändert und die Farbüberlagerung wird sichtbar.
Um den gewünschten visuellen Effekt zu erzielen, kannst du die Überlagerung anpassen, indem du die Eigenschaften background-color und Deckkraft einstellst.
Zusammenfassung
Die Gestaltung von Bildern mit CSS eröffnet dir eine Welt voller kreativer Möglichkeiten, mit denen du die visuelle Attraktivität und Interaktivität deiner Webseiten verbessern kannst.
Wenn du Bilder mit CSS gestaltest, solltest du immer auf Zugänglichkeit, Reaktionsfähigkeit und Leistung achten.
Welchen CSS-Bildstil verwendest du am häufigsten? Welcher Stil interessiert dich am meisten? Lass es uns in den Kommentaren wissen.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar