Bilder gestalten
Die künstlerische Berührung der Bildmeister
Bilder sind die wahren Helden deiner Webseite. Sie sprechen, wo Worte nicht mehr reichen. Natürlich könnte man sie einfach so einfügen, wie ein reisender Abenteurer, der seine Souvenirs wahllos auf den Tisch wirft. Aber mit CSS beginnt die Magie! Verleihe deinen Bildern nicht nur einen Platz, sondern eine Bühne!
Mit einem eleganten Rahmen oder einem dramatischen Schatten kannst du Bilder schweben lassen. Du kannst das Bild flexibel skalieren, sodass es sich an jeden Bildschirm schmiegt, wie ein Chamäleon, das mit seiner Umgebung eins wird. Mit Filtern kannst du außerdem einen Hauch von Sepia hinzufügen, oder die Farben verblassen lassen, wie Erinnerungen an ferne Abenteuer. Deine Bilder werden nicht nur gesehen, sie werden bewundert.
Bilder im CSS
Skalieren, stylen, anpassen – mach mehr aus deinen Bildern!
Skalierbare Bilder
Flexibilität für deine visuellen Schätze
Mit der magischen Formel width: 100% passt sich dein Bild dem Container an, als wäre es für jede Bildschirmgröße maßgeschneidert. Kein unnötiges Scrollen, kein seltsames Quetschen, das Bild bleibt perfekt in Form und skaliert, als hätte es nie anders sein sollen. Es fügt sich harmonisch ein wie ein Zauber, der immer die perfekte Balance wahrt.
.responsive-image {
width: 100%;
height: auto;
}width: 100%;: Das Bild passt sich der vollen Breite des Containers an.
height: auto;: Diese Eigenschaft sorgt dafür, dass das Bild seine Proportionen beibehält, wenn es in der Breite skaliert wird.
Bilder stylen
Rahmen, Rundungen und mehr
Du möchtest deinem Bild das gewisse Extra verleihen? Mit CSS wird aus einem Bild ein Kunstwerk! Runde Ecken, elegante Rahmen und zarte Schatten machen aus einem einfachen Foto ein Highlight. Ein bisschen CSS hier, ein Hauch von Schatten dort, und schon schwebt dein Bild wie von Zauberhand über der Seite. Alles harmonisch, alles magisch.
.styled-image {
border-radius: 50%;
border: 1px solid black;
}In diesem Beispiel erhält das Bild einen Rahmen und einen Radius von 50% für eine runde Form. Du kannst den Radius flexibel anpassen. Um Tiefe zu erzeugen, füge einen Schatten mit box-shadow hinzu.
Perfekte Passform
Wenn Bilder den Raum beherrschen
Mit der object-fit entscheidest du, wie ein Bild sich in seinen Container kuschelt. Willst du es zuschneiden, strecken oder elegant einpassen? Du hast die Kontrolle, dein Bild zum perfekten Mitbewohner deines Designs zu machen. Selbst wenn das Seitenverhältnis mal nicht ganz passt, sorgt dieser Trick dafür, dass alles wieder harmonisch aussieht wie ein perfekt eingepasstes Puzzle-Teil.
.obj-fit {
width: 300px;
height: 300px;
object-fit: cover;
}object-fit: cover;: Das Bild wird skaliert und zugeschnitten, um den Container vollständig auszufüllen, ohne das Seitenverhältnis zu verändern.
Bildfilter
Magie ohne Photoshop
Wieso kompliziert, wenn es einfach geht? Mit CSS-Bildfiltern zauberst du Effekte wie Grayscale, Blur oder Sepia auf deine Bilder, als hättest du einen Zauberstab. Kein extra Programm, keine Hexerei, einfach den Filter anwenden und das Bild direkt in den CSS-Code integrieren.
.img-style {
filter: grayscale(50%) blur(5px) brightness(1.2);
}In diesem Beispiel werden eine 50-prozentige Graustufenumwandlung, eine leichte Unschärfe von 5px und eine um 20 Prozent erhöhte Helligkeit angewendet.
Bildfilter im Überblick
blur()
Weichzeichner-Effekt, der ein Bild verschwommen erscheinen lässt. Beispiel: filter: blur(5px);
brightness()
Passt die Helligkeit des Elements an.
Ein Wert von 1 entspricht der normalen Helligkeit.
Beispiel: filter: brightness(1.5);
contrast()
Ändert den Kontrast des Elements. Werte über 1 erhöhen den Kontrast, Werte unter 1 verringern ihn.
Beispiel: filter: contrast(0.8);
grayscale()
Wandelt das Bild in Graustufen um.
Der Wert 1 bedeutet vollständige Graustufen.
Beispiel: filter: grayscale(1);
hue-rotate()
Dreht den Farbton des Bildes im Farbkreis.
Der Wert wird in Grad (deg) angegeben.
Beispiel: filter: hue-rotate(90deg);
invert()
Kehrt die Farben um. Der Wert 1 invertiert die Farben vollständig, 0 lässt sie unverändert.
Beispiel: filter: invert(1);
opacity()
Passt die Deckkraft des Elements an. Ein Wert von 1 bedeutet volle Deckkraft, 0 macht das Bild unsichtbar.
Beispiel: filter: opacity(0.5);
saturate()
Erhöht oder verringert die Farbsättigung. Werte über 1 erhöhen die Sättigung, Werte unter 1 reduzieren sie.
Beispiel: filter: saturate(2);
sepia()
Verleiht dem Bild einen Sepia-Ton. Ein Wert von 1 färbt das Bild vollständig sepia, 0 lässt es unverändert.
Beispiel: filter: sepia(0.7);
drop-shadow()
Fügt dem Bild einen Schatteneffekt hinzu.
Beispiel: filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
In dieser Lektion hast du gelernt…
- Wie du mit
width: 100%undheight: autoBilder flexibel skalierst, damit sie sich responsiv an verschiedene Bildschirmgrößen anpassen. - Warum
border-radius,borderundbox-shadowBilder stilvoll abrunden oder hervorheben, um sie optisch ansprechender zu gestalten. - Wie
object-fitBilder optimal in Container einpasst, sodass sie entweder gestreckt, zugeschnitten oder perfekt eingepasst werden können. - Welche CSS-Filter du nutzen kannst, um Bilder direkt im Code zu bearbeiten – von Graustufen über Unschärfe bis hin zu Farbveränderungen.
- Warum
drop-shadoweine tolle Möglichkeit ist, um Bildern Tiefe zu verleihen und sie optisch vom Hintergrund abzuheben.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Verwandlung der Bilder
Es wird gemunkelt, die Tafeln des Waldes hätten eine Vorliebe für Dramatik – sie skalieren und verändern ihr Aussehen, je nachdem, wer gerade hinsieht. Natürlich könnten sie auch einfach eitel sein. Um diese Launenhaftigkeit zu bändigen, lernst du, wie du mit CSS die Bilder nicht nur rahmst, sondern ihnen auch Leben einhauchst. Mit den richtigen Techniken lässt du sie schrumpfen, wachsen oder gar majestätisch im Glanz eines Schatteneffekts erstrahlen. Denn was wäre Magie ohne ein wenig Stil?
Deine Aufgabe: Die Gestaltung von Bildern
- Skalierbare Bilder:
Verwende für die Klasse .responsive-image die Eigenschaften width: 100% und height: auto, um das Bild skalierbar und flexibel zu machen. - Styling mit Border und Border-Radius:
Setze für die .styled-image-Klasse eine Umrandung (border: 2px solid darkgreen) und einen abgerundeten Rand (border-radius: 35px).
Füge noch einen Schatten hinzu (box-shadow: 5px 5px 15px #00000083;). - Dynamische Anpassung mit Object-Fit:
Füge für die .obj-fit-Klasse die Eigenschaft object-fit: cover hinzu, um das Bild proportional anzupassen.
Gib der Klasse eine Höhe und Breite von 300px; - Filter verwenden:
Experimentiere mit verschiedenen Filtern wie grayscale(50%), blur(5px), und brightness(1.2) für die .styled-image-Klasse.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
.responsive-image {
width: 100%;
height: auto;
}
.obj-fit {
width: 300px;
height: 300px;
border: 7px solid mediumorchid;
object-fit: cover;
}
.styled-image {
border-radius: 35px;
box-shadow: 5px 5px 15px #00000083;
filter: grayscale(1);
}