CSS - Style Bilder

Hallo da draußen, ambitionierte Webdesigner! Heute machen wir uns auf eine aufregende Reise durch die Welt der CSS-Bildgestaltung. Als dein freundlicher Nachbarschafts-EDV-Lehrer bin ich begeistert, dich durch dieses Abenteuer zu führen. Denke daran, genau wie das Fahrradfahren erfordert das Beherrschen von CSS Übung, aber ich verspreche, es wird Spaß machen!

CSS Style Bild - Abgerundete Bilder

Lassen wir mit etwas Einfachem, aber Elegantes anfangen: abgerundete Bilder. Wie wir die Kanten im Leben abrunden, können wir das auch mit unseren Bildern tun!

<img src="cute_puppy.jpg" alt="Ein süßes Hundebaby" class="rounded-image">

.rounded-image {
  border-radius: 25px;
}

In diesem Beispiel weisen wir den Browser an, die Ecken unseres Bildes um 25 Pixel abzurunden. Es ist, als würde man seinem Bild einen kleinen Haarschnitt verpassen! Du kannst diesen Wert anpassen, um die Ecken mehr oder weniger abgerundet zu gestalten.

CSS Style Bild - Runde Bilder

Nun eine Stufe weiter und unsere Bilder in perfekte Kreise verwandeln. Dies ist großartig für Profilbilder oder jedes Bild, bei dem man sich auf die Mitte konzentrieren möchte.

<img src="profile_pic.jpg" alt="Profilbild" class="circle-image">

.circle-image {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

Hier geschieht das Magische: border-radius: 50% verwandelt unser quadratisches Bild in einen Kreis. Wir setzen eine feste Breite und Höhe und object-fit: cover stellt sicher, dass das Bild den Kreis gut ausfüllt, ohne verzerrt zu werden.

CSS Style Bild - Vorschaubilder

Vorschaubilder sind wie die Kinotrailer der Bildwelt - kleine Vorschauen, die einen Vorgeschmack auf das vollständige Bild geben. Lassen wir uns einige erstellen!

<img src="landscape.jpg" alt="Schöne Landschaft" class="thumbnail">

.thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 5px;
}

Dieser CSS creates ein kleines, quadratisches Vorschaubild mit einem netten Rand. Die Eigenschaft object-fit: cover stellt sicher, dass das Bild die Vorschaubereich ohne Verzerrung ausfüllt.

CSS Style Bild - Vorschaubilder als Link

Lassen wir unsere Vorschaubilder anklickbar machen! Dies ist perfekt für Bildergalerien oder Produktlisten.

<a href="full_image.jpg">
  <img src="thumbnail.jpg" alt="Klicken zum Vergrößern" class="thumbnail-link">
</a>

.thumbnail-link {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  transition: transform 0.3s ease;
}

.thumbnail-link:hover {
  transform: scale(1.1);
}

Hier haben wir eine coole Hover-Animation hinzugefügt. Wenn man mit der Maus über die Vorschaubilder fährt, vergrößern sie sich leicht, was ein schönes interaktives Gefühl vermittelt.

CSS Style Bild - Responsives Bild

In der heutigen Welt der Vielzahl von Geräten müssen unsere Bilder auf allen Bildschirmgrößen gut aussehen. Lassen wir unsere Bilder responsiv werden!

<img src="scenery.jpg" alt="Schöne Landschaft" class="responsive-image">

.responsive-image {
  max-width: 100%;
  height: auto;
}

Dieser einfache CSS stellt sicher, dass unser Bild nie breiter als sein Behälter ist und die Höhe proportional angepasst wird. Es ist, als ob das Bild weiß, wie es sich in jeder Situation verhalten muss!

CSS Style Bild - Zentriertes Bild

Das Zentrieren eines Bildes kann knifflig sein, aber ich habe einen klugen Trick für dich. Es ist, als würde man sein Bild mitten auf der Bühne platzieren!

<div class="image-container">
  <img src="centered_image.jpg" alt="Zentriertes Bild" class="center-image">
</div>

.image-container {
  text-align: center;
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Diese Methode funktioniert sowohl für inline- als auch für block-level-Bilder. Die Eigenschaft text-align: center auf dem Behälter hilft bei inline-Bildern, während margin: auto block-level-Bilder zentriert.

CSS Style Bild - Polaroid-Bilder / Karten

Erinnern Sie sich an Polaroid-Kameras? Lassen wir diesen klassischen Look mit CSS nachbilden!

<div class="polaroid">
  <img src="vacation.jpg" alt="Urlaubserinnerung">
  <div class="caption">Sommer 2023</div>
</div>

.polaroid {
  width: 250px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

.polaroid img {
  width: 100%;
}

.caption {
  text-align: center;
  padding: 10px 20px;
}

Dieser CSS erstellt einen weißen Rand um das Bild und fügt eine subtile Schattenwurf hinzu, um diesen 3D-Effekt zu erzielen. Die Bildunterschrift sitzt unterhalb des Bildes, genau wie bei einem echten Polaroid!

CSS Style Bild - Transparentes Bild

Manchmal möchten wir unsere Bilder durchsichtig machen. Es ist, als würde man seinem Bild eine geistähnliche Qualität verleihen!

<img src="logo.png" alt=" Firmenlogo" class="transparent-image">

.transparent-image {
  opacity: 0.5;
}

Die Eigenschaft opacity reicht von 0 (vollkommen durchsichtig) bis 1 (vollkommen deckend). Du kannst diesen Wert anpassen, um die gewünschte Transparenzstufe zu erreichen.

CSS Style Bild - Zentrierter Text

Lassen wir etwas Text mitten in ein Bild platzieren. Es ist, als würde man sein eigenes motivierendes Plakat erstellen!

<div class="image-text-container">
  <img src="background.jpg" alt="Hintergrundbild">
  <div class="centered-text">Dein Text hier</div>
</div>

.image-text-container {
  position: relative;
  text-align: center;
  color: white;
}

.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Dieser CSS verwendet Positionierung, um den Text genau in der Mitte des Bildes zu platzieren. Die Eigenschaft transform stellt sicher, dass er sowohl vertikal als auch horizontal zentriert ist.

CSS Style Bild - Filter

CSS-Filter sind wie Instagram für deine Webbilder. Lassen wir ein bisschen herumspielen!

<img src="landscape.jpg" alt="Landschaft" class="filtered-image">

.filtered-image {
  filter: grayscale(100%) brightness(150%) contrast(120%);
}

Dieses Beispiel wendet mehrere Filter an: Es verwandelt das Bild in Graustufen, erhöht die Helligkeit und verbessert den Kontrast. Du kannst verschiedene Filter miteinander kombinieren, um einzigartige Effekte zu erzielen!

Hier ist eine Tabelle mit einigen häufigen CSS-Bildfiltern:

Filter	Beschreibung	Beispiel
grayscale()	Wandelt Bild in Graustufen um	filter: grayscale(100%);
sepia()	Wandelt Bild in Sepia um	filter: sepia(60%);
saturate()	Sättigt das Bild	filter: saturate(200%);
hue-rotate()	Wendet eine Farbrotation an	filter: hue-rotate(90deg);
invert()	Kehrt die Bildfarben um	filter: invert(75%);
opacity()	Setzt die Bildtransparenz	filter: opacity(25%);
brightness()	Passiert die Helligkeit an	filter: brightness(150%);
contrast()	Passiert den Kontrast an	filter: contrast(200%);
blur()	Wendet einen Weichzeichner-Effekt an	filter: blur(5px);

CSS Style Bild - Einblendungs-Overlay

Lassen wir einen coolen Effekt erstellen, bei dem der Text einblendet, wenn man über ein Bild fährt. Es ist, als würde man eine geheime Botschaft enthüllen!

<div class="image-overlay">
  <img src="product.jpg" alt="Produktbild">
  <div class="overlay">
    <div class="text">Produktbeschreibung</div>
  </div>
</div>

.image-overlay {
  position: relative;
  width: 50%;
}

.image-overlay img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,0.5);
}

.image-overlay:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Dieser CSS erstellt einen dunklen Overlay, der einblendet, wenn man über das Bild fährt, und den Text enthüllt.

CSS Style Bild - Schiebeeffekt

Nun erstellen wir einen Schiebeeffekt für unsere Bildunterschrift. Es ist, als würde man einen Vorhang zur Seite schieben, um den Stern der Show zu enthüllen!

<div class="slide-container">
  <img src="nature.jpg" alt="Natur Szene" class="slide-image">
  <div class="slide-caption">Schöne Natur</div>
</div>

.slide-container {
  position: relative;
  overflow: hidden;
}

.slide-image {
  display: block;
  width: 100%;
  height: auto;
}

.slide-caption {
  position: absolute;
  bottom: 0;
  left: 100%;
  background-color: rgba(0,0,0,0.5);
  color: white;
  padding: 10px;
  transition: 0.5s ease;
  width: 100%;
}

.slide-container:hover .slide-caption {
  left: 0;
}

Dieser CSS verbirgt die Bildunterschrift außerhalb des Bildes und schiebt sie nach links, wenn man über das Bild fährt.

CSS Style Bild - Dreh-Effekt

Lassen wir einen Dreh-Effekt hinzufügen! Es ist, als würde man seinem Bild eine Bühnenkarte geben, um seine Rückseite zu zeigen.

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="front.jpg" alt="Vorderseite">
    </div>
    <div class="back">
      <img src="back.jpg" alt="Rückseite">
    </div>
  </div>
</div>

.flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

Dieser CSS erstellt einen 3D-Dreh-Effekt, wenn man über den Behälter fährt. Die Vorderseite des Bildes dreht sich um, um die Rückseite zu enthüllen.

CSS Style Bild - Responsives Bildergalerie

Lassen wir unsere Fähigkeiten zusammenführen und eine responsive Bildergalerie erstellen. Es ist, als würde man seine eigene Mini-Kunstausstellung kuratieren!

<div class="gallery">
  <img src="img1.jpg" alt="Galeriebild 1">
  <img src="img2.jpg" alt="Galeriebild 2">
  <img src="img3.jpg" alt="Galeriebild 3">
  <img src="img4.jpg" alt="Galeriebild 4">
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.gallery img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

@media screen and (min-width: 600px) {
  .gallery img {
    width: 49%;
    margin: 0.5%;
  }
}

@media screen and (min-width: 1000px) {
  .gallery img {
    width: 24%;
    margin: 0.5%;
  }
}

Dieser CSS erstellt eine flexible Galerie, die sich an die Bildschirmgröße anpasst. Auf kleinen Bildschirmen stapeln sich die Bilder vertikal. Auf mittleren Bildschirmen bilden sie zwei Spalten und auf großen Bildschirmen vier Spalten.

CSS Style Bild - Bildmodus

Schließlich erstellen wir einen Modal, der aufgeht, wenn man auf ein Bild klickt. Es ist, als würde man seinen Bildern ihre eigene Spotlight-Phase geben!

<img src="thumbnail.jpg" alt="Klicken zum Vergrößern" class="modal-trigger" onclick="openModal(this)">

<div id="imageModal" class="modal">
  <span class="close" onclick="closeModal()">&times;</span>
  <img class="modal-content" id="modalImage">
</div>

.modal-trigger {
  cursor: pointer;
  transition: 0.3s;
}

.modal-trigger:hover {opacity: 0.7;}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

function openModal(img) {
  var modal = document.getElementById("imageModal");
  var modalImg = document.getElementById("modalImage");
  modal.style.display = "block";
  modalImg.src = img.src;
}

function closeModal() {
  document.getElementById("imageModal").style.display = "none";
}

Diese Kombination aus HTML, CSS und JavaScript erstellt einen Modal, der aufgeht, wenn man auf ein Bild klickt, und eine größere Version des Bildes anzeigt.

Und dort habt ihr es, Leute! Wir haben eine aufregende Reise durch die Welt der CSS-Bildgestaltung unternommen. Denkt daran, der Schlüssel zum Beherrschen dieser Techniken ist Übung. Also experimentiert mit diesen Beispielen, mischt und kombiniert sie und erstellt etwas, das einzigartig ist. Viel Spaß beim Coden!

Credits: Image by storyset