Vollständige CSS-Referenz

Hier ist eine umfassende Referenz von CSS-Effekten und Rahmen, die Sie auf Bilder anwenden können, zusammen mit Beispielen für jedes:

  1. Rand: Fügt einen Rahmen um das Bild hinzu.
img {
  border: 2px solid black;
}
  1. Schatten: Fügt einen Schatten um das Bild hinzu.
img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
  1. Transparenz: Passt die Transparenz des Bildes an.
img {
  opacity: 0.5;
}
  1. Graustufen: Konvertiert das Bild in Graustufen.
img {
  filter: grayscale(100%);
}
  1. Sepia: Wendet einen Sepia-Effekt auf das Bild an.
img {
  filter: sepia(100%);
}
  1. Unschärfe: Macht das Bild unscharf.
img {
  filter: blur(5px);
}
  1. Helligkeit: Passt die Helligkeit des Bildes an.
img {
  filter: brightness(50%);
}
  1. Kontrast: Passt den Kontrast des Bildes an.
img {
  filter: contrast(200%);
}
  1. Farbton-Rotation: Dreht den Farbton des Bildes.
img {
  filter: hue-rotate(90deg);
}
  1. Umkehrung: Kehrt die Farben des Bildes um.
img {
  filter: invert(100%);
}
  1. Sättigung: Passt die Sättigung des Bildes an.
img {
  filter: saturate(200%);
}
  1. Sepia: Wendet einen Sepia-Effekt auf das Bild an.
img {
  filter: sepia(100%);
}
  1. Drop-Schatten: Fügt einen Drop-Schatten-Effekt auf das Bild hinzu.
img {
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
  1. Übergang: Fügt einen Übergangseffekt auf das Bild hinzu.
img {
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.1);
}
  1. Animation: Fügt einen Animationseffekt auf das Bild hinzu.
@keyframes slidein {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
img {
  animation: slidein 1s ease;
}

Dies sind nur ein paar Beispiele für die vielen CSS-Effekte und -Rahmen, die Sie auf Bilder anwenden können. Experimentieren Sie mit verschiedenen Stilen, um einzigartige und auffällige Designs zu erstellen!