CSS Styliser les Images
Apprenez à styliser des images en utilisant CSS.
Images Arrondies
Vous pouvez utiliser la propriété border-radius pour créer des images arrondies :
Exemple
Image Arrondie :
img {
border-radius: 8px;
} Exemple
Image Circulaire :
img {
border-radius: 50%;
} Astuce : Consultez le chapitre CSS Image Shapes pour apprendre à façonner (clipper) les images en cercles, ellipses et polygones.
Images Miniatures
Utilisez la propriété border pour créer des images miniatures :
Exemple
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
} Image miniature en tant que lien :
Exemple
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
} Images Responsives
Les images responsives s'ajustent automatiquement à la taille de l'écran.
Redimensionnez la fenêtre du navigateur pour voir l'effet :
Si vous souhaitez qu'une image se réduise si nécessaire, mais ne s'agrandisse jamais au-delà de sa taille d'origine, ajoutez ce qui suit :
Exemple
img {
max-width: 100%;
height: auto;
} Astuce : Lisez-en plus sur le Design Web Responsive dans notre Tutoriel CSS RWD .
Images / Cartes Polaroid
Cinque Terre
Aurores Boréales
Exemple
div.polaroid {
width: 80%;
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);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
} Opacité des Images CSS
La propriété opacity spécifie l'opacité/transparence d'un élément.
La propriété opacity peut prendre une valeur de 0.0 à 1.0 :
- 0.0 - L'élément sera complètement transparent
- 0.5 - L'élément sera 50% transparent
- 1.0 - Par défaut. L'élément sera complètement opaque
opacité 0.2
opacité 0.5
opacité 1.0
(par défaut)
Exemple
img {
opacity: 0.5;
} Astuce : Consultez le chapitre CSS Image Filters pour apprendre à utiliser la propriété filter pour ajouter des effets visuels (comme l'opacité, le flou, la saturation, etc.) aux images.
Texte d'Image
Comment positionner du texte dans une image :
Exemple
Essayez-le Vous-Même :
Superposition d'Image au Survol
Créez un effet de superposition au survol :
Exemple
Texte qui apparaît :
Exemple
Boîte qui apparaît :
Exemple
Glisser (haut) :
Exemple
Glisser (bas) :
Exemple
Glisser (gauche) :
Exemple
Glisser (droit) :
Retourner une Image
Déplacez votre souris sur l'image :
Exemple
img:hover {
transform: scaleX(-1);
} Galerie d'Images Responsive
CSS peut être utilisé pour créer des galeries d'images responsives. Cet exemple utilise des requêtes média pour réorganiser les images sur différentes tailles d'écran. Redimensionnez la fenêtre du navigateur pour voir l'effet :
Exemple
@media only screen and (max-width: 768px) {
div.gallery-item {
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 480px) {
div.gallery-item {
width: calc(100% - 20px);
}
} Astuce : Lisez-en plus sur le Design Web Responsive dans notre Tutoriel CSS RWD .