CSS - Style des Images
Salut les futurs concepteurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde du style des images avec CSS. En tant que votre professeur d'informatique bien-aimé, je suis ravi de vous guider dans cette aventure. Souvenez-vous, comme apprendre à rouler à vélo, maîtriser CSS nécessite de la pratique, mais je promets que ce sera amusant !
Style d'Image CSS - Images Arrondies
Commençons par quelque chose de simple et d'élégant : les images arrondies. Vous savez combien nous aimons adoucir les bords dans la vie ? Eh bien, nous pouvons faire la même chose avec nos images !
<img src="cute_puppy.jpg" alt="Un chiot mignon" class="rounded-image">.rounded-image {
border-radius: 25px;
}Dans cet exemple, nous demandons au navigateur d'arrondir les coins de notre image de 25 pixels. C'est comme donner à votre image un petit coup de ciseaux ! Vous pouvez ajuster cette valeur pour rendre les coins plus ou moins arrondis.
Style d'Image CSS - Images Circulaires
Maintenant, allons un peu plus loin et transformons nos images en cercles parfaits. C'est génial pour les photos de profil ou toute image où vous souhaitez vous concentrer sur le centre.
<img src="profile_pic.jpg" alt="Photo de profil" class="circle-image">.circle-image {
border-radius: 50%;
width: 200px;
height: 200px;
object-fit: cover;
}Voici où la magie opère : border-radius: 50% transforme notre image carrée en cercle. Nous définissons une largeur et une hauteur fixes, et object-fit: cover assure que l'image remplit le cercle sans se déformer.
Style d'Image CSS - Images en miniature
Les vignettes sont comme les bandes-annonces du monde des images - de petites prévisualisations qui vous donnent un avant-goût de l'image complète. Créons-en quelques-unes !
<img src="landscape.jpg" alt="Belle vue" class="thumbnail">.thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
}Ce CSS crée une vignette carrée avec une bordure élégante. La propriété object-fit: cover assure que l'image remplit la vignette sans distortion.
Style d'Image CSS - Vignettes en tant que Liens
Faisons nos vignettes cliquables ! C'est parfait pour les galeries d'images ou les listes de produits.
<a href="full_image.jpg">
<img src="thumbnail.jpg" alt="Cliquez pour agrandir" class="thumbnail-link">
</a>.thumbnail-link {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: transform 0.3s ease;
}
.thumbnail-link:hover {
transform: scale(1.1);
}Nous avons ajouté un effet de survol sympa ici. Lorsque vous passez la souris sur la vignette, elle augmente légèrement de taille, offrant une sensation interactive.
Style d'Image CSS - Images Responsives
Dans le monde d'aujourd'hui, où les appareils sont multiples, nous devons que nos images soient jolies sur toutes les tailles d'écran. Faisons nos images responsives !
<img src="scenery.jpg" alt="Belle vue" class="responsive-image">.responsive-image {
max-width: 100%;
height: auto;
}Ce simple CSS garantit que notre image ne sera jamais plus large que son conteneur, et la hauteur s'ajustera proportionnellement. C'est comme avoir une image qui sait se comporter dans n'importe quelle situation !
Style d'Image CSS - Centrer une Image
Centrer une image peut être délicat, mais j'ai un joli truc pour vous. C'est comme enseigner à votre image à se tenir pile au milieu de la scène !
<div class="image-container">
<img src="centered_image.jpg" alt="Image centrée" class="center-image">
</div>.image-container {
text-align: center;
}
.center-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}Cette méthode fonctionne pour les images en ligne et en bloc. La propriété text-align: center sur le conteneur aide avec les images en ligne, tandis que margin: auto centre les images en bloc.
Style d'Image CSS - Images Polaroid / Cartes
Souvenez-vous des appareils photo Polaroid ? Reprenons ce look classique avec CSS !
<div class="polaroid">
<img src="vacation.jpg" alt="Souvenir de vacances">
<div class="caption">Été 2023</div>
</div>.polaroid {
width: 250px;
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);
margin-bottom: 25px;
}
.polaroid img {
width: 100%;
}
.caption {
text-align: center;
padding: 10px 20px;
}Ce CSS crée une bordure blanche autour de l'image et ajoute une ombre subtile pour obtenir cet effet 3D. La légende se situe sous l'image, tout comme sur une véritable Polaroid !
Style d'Image CSS - Images Transparentes
Parfois, nous voulons que nos images soient transparentes. C'est comme donner à votre image une qualité fantomatique !
<img src="logo.png" alt="Logo de la société" class="transparent-image">.transparent-image {
opacity: 0.5;
}La propriété opacity varie de 0 (complètement transparent) à 1 (fully opaque). Vous pouvez ajuster cette valeur pour obtenir le niveau de transparence souhaité.
Style d'Image CSS - Centrer le Texte
Mettons du texte pile au milieu d'une image. C'est comme créer votre propre affiche motivationnelle !
<div class="image-text-container">
<img src="background.jpg" alt="Image de fond">
<div class="centered-text">Votre texte ici</div>
</div>.image-text-container {
position: relative;
text-align: center;
color: white;
}
.centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Ce CSS utilise la position pour placer le texte exactement au centre de l'image. La propriété transform assure qu'il est centré verticalement et horizontalement.
Style d'Image CSS - Filtres
Les filtres CSS sont comme Instagram pour vos images web. Jouons un peu avec eux !
<img src="landscape.jpg" alt="Paysage" class="filtered-image">.filtered-image {
filter: grayscale(100%) brightness(150%) contrast(120%);
}Cet exemple applique plusieurs filtres : il transforme l'image en niveaux de gris, augmente la luminosité et améliore le contraste. Vous pouvez mélanger et assortir différents filtres pour créer des effets uniques !
Voici un tableau de certains filtres CSS courants :
| Filtre | Description | Exemple |
|---|---|---|
| grayscale() | Convertit l'image en niveaux de gris | filter: grayscale(100%); |
| sepia() | Convertit l'image en sépia | filter: sepia(60%); |
| saturate() | Sature l'image | filter: saturate(200%); |
| hue-rotate() | Applique une rotation de teinte | filter: hue-rotate(90deg); |
| invert() | Inverse les couleurs de l'image | filter: invert(75%); |
| opacity() | Définit l'opacité de l'image | filter: opacity(25%); |
| brightness() | Ajuste la luminosité | filter: brightness(150%); |
| contrast() | Ajuste le contraste | filter: contrast(200%); |
| blur() | Applique un effet de flou | filter: blur(5px); |
Style d'Image CSS - Calque de Fade-In
Créons un effet sympa où le texte apparaît en fondu lorsque vous passez la souris sur une image. C'est comme révéler un message secret !
<div class="image-overlay">
<img src="product.jpg" alt="Image du produit">
<div class="overlay">
<div class="text">Description du produit</div>
</div>
</div>.image-overlay {
position: relative;
width: 50%;
}
.image-overlay img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}
.image-overlay:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}Ce CSS crée un calque sombre qui apparaît en fondu lorsque vous passez la souris sur l'image, révélant le texte.
Style d'Image CSS - Effet de Glissement
Maintenant, créons un effet de glissement pour le sous-titre de notre image. C'est comme tirer un rideau pour révéler la vedette du spectacle !
<div class="slide-container">
<img src="nature.jpg" alt="Scène naturelle" class="slide-image">
<div class="slide-caption">Belle Nature</div>
</div>.slide-container {
position: relative;
overflow: hidden;
}
.slide-image {
display: block;
width: 100%;
height: auto;
}
.slide-caption {
position: absolute;
bottom: 0;
left: 100%;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
transition: 0.5s ease;
width: 100%;
}
.slide-container:hover .slide-caption {
left: 0;
}Ce CSS cache le sous-titre hors de l'écran et le fait glisser vers l'intérieur lorsque vous passez la souris sur l'image.
Style d'Image CSS - Retourner une Image
Ajoutons un peu de peps avec un effet de retournement ! C'est comme donner à votre image un passe-droit pour montrer son revers.
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="front.jpg" alt="Côté avant">
</div>
<div class="back">
<img src="back.jpg" alt="Côté arrière">
</div>
</div>
</div>.flip-container {
width: 300px;
height: 200px;
perspective: 1000px;
}
.flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}Ce CSS crée un effet de retournement 3D lorsque vous passez la souris sur le conteneur. L'image avant pivote pour révéler l'image arrière.
Style d'Image CSS - Galerie d'Images Responsives
Mettons nos compétences ensemble et créons une galerie d'images responsive. C'est comme curator votre propre mini-exposition d'art !
<div class="gallery">
<img src="img1.jpg" alt="Image de la galerie 1">
<img src="img2.jpg" alt="Image de la galerie 2">
<img src="img3.jpg" alt="Image de la galerie 3">
<img src="img4.jpg" alt="Image de la galerie 4">
</div>.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.gallery img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
@media screen and (min-width: 600px) {
.gallery img {
width: 49%;
margin: 0.5%;
}
}
@media screen and (min-width: 1000px) {
.gallery img {
width: 24%;
margin: 0.5%;
}
}Ce CSS crée une galerie flexible qui s'ajuste en fonction de la taille de l'écran. Sur lespetits écrans, les images s'empilent verticalement. Sur les écrans moyens, elles forment deux colonnes, et sur les grands écrans, elles créent quatre colonnes.
Style d'Image CSS - Fenêtre Modale
Enfin, créons une fenêtre modale qui s'ouvre lorsque vous cliquez sur une image. C'est comme donner à vos images leur propre moment de spotlight !
<img src="thumbnail.jpg" alt="Cliquez pour agrandir" class="modal-trigger" onclick="openModal(this)">
<div id="imageModal" class="modal">
<span class="close" onclick="closeModal()">×</span>
<img class="modal-content" id="modalImage">
</div>.modal-trigger {
cursor: pointer;
transition: 0.3s;
}
.modal-trigger:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}function openModal(img) {
var modal = document.getElementById("imageModal");
var modalImg = document.getElementById("modalImage");
modal.style.display = "block";
modalImg.src = img.src;
}
function closeModal() {
document.getElementById("imageModal").style.display = "none";
}Cette combinaison d'HTML, CSS et JavaScript crée une fenêtre modale qui s'ouvre lorsque vous cliquez sur une image, affichant une version plus grande de l'image.
Et voilà, les amis ! Nous avons fait le voyage à travers le merveilleux monde du style des images avec CSS. Souvenez-vous, la clé pour maîtriser ces techniques est la pratique. Alors, amusez-vous, mélangez et assortissez, et créez quelque chose d'unique. Bon codage !
Credits: Image by storyset