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