Fullständig CSS-referens

Här är en omfattande referens av CSS-effekter och ramar som du kan använda på bilder, tillsammans med exempel för varje:

  1. Ram: Lägger till en ram runt bilden.
img {
  border: 2px solid black;
}
  1. Box Shadow: Lägger till en skugga runt bilden.
img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
  1. Opacitet: Justerar bildens genomskinlighet.
img {
  opacity: 0.5;
}
  1. Gråskala: Konverterar bilden till gråskala.
img {
  filter: grayscale(100%);
}
  1. Sepia: Applicerar en sepiatoning på bilden.
img {
  filter: sepia(100%);
}
  1. Sudda ut: Suddar ut bilden.
img {
  filter: blur(5px);
}
  1. Ljusstyrka: Justerar bildens ljusstyrka.
img {
  filter: brightness(50%);
}
  1. Kontrast: Justerar bildens kontrast.
img {
  filter: contrast(200%);
}
  1. Färgrotation: Roterar bildens färgnyans.
img {
  filter: hue-rotate(90deg);
}
  1. Invertera: Inverterar färgerna på bilden.
img {
  filter: invert(100%);
}
  1. Mättnad: Justerar bildens mättnad.
img {
  filter: saturate(200%);
}
  1. Sepia: Applicerar en sepiatoning på bilden.
img {
  filter: sepia(100%);
}
  1. Släppskugga: Lägger till en släppskugga på bilden.
img {
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
  1. Övergång: Lägger till en övergångseffekt på bilden.
img {
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.1);
}
  1. Animation: Lägger till en animationseffekt på bilden.
@keyframes slidein {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
img {
  animation: slidein 1s ease;
}

Detta är bara några exempel på de många CSS-effekter och ramar du kan använda på bilder. Experimentera med olika stilar för att skapa unika och iögonfallande designer!