Référence complète CSS
Voici une référence complète des effets CSS et des bordures que vous pouvez appliquer aux images, accompagnée d’exemples pour chacun :
- Border (Bordure) : Ajoute une bordure autour de l’image.
img {
border: 2px solid black;
}
- Box Shadow (Ombre portée) : Ajoute une ombre autour de l’image.
img {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
- Opacity (Opacité) : Ajuste la transparence de l’image.
img {
opacity: 0.5;
}
- Grayscale (Niveaux de gris) : Convertit l’image en niveaux de gris.
img {
filter: grayscale(100%);
}
- Sepia : Applique un effet sépia à l’image.
img {
filter: sepia(100%);
}
- Blur (Flou) : Floute l’image.
img {
filter: blur(5px);
}
- Brightness (Luminosité) : Ajuste la luminosité de l’image.
img {
filter: brightness(50%);
}
- Contrast (Contraste) : Ajuste le contraste de l’image.
img {
filter: contrast(200%);
}
- Hue Rotate (Rotation de teinte) : Fait tourner la teinte de l’image.
img {
filter: hue-rotate(90deg);
}
- Invert (Inversion) : Inverse les couleurs de l’image.
img {
filter: invert(100%);
}
- Saturate (Saturation) : Ajuste la saturation de l’image.
img {
filter: saturate(200%);
}
- Sepia : Applique un effet sépia à l’image.
img {
filter: sepia(100%);
}
- Drop-Shadow (Ombre portée) : Ajoute un effet d’ombre portée à l’image.
img {
filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
- Transition : Ajoute un effet de transition à l’image.
img {
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.1);
}
- Animation : Ajoute un effet d’animation à l’image.
@keyframes slidein {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
img {
animation: slidein 1s ease;
}
Ce ne sont là que quelques exemples des nombreux effets CSS et bordures que vous pouvez appliquer aux images. Expérimentez avec différents styles pour créer des designs uniques et accrocheurs !