Styling Images dans CSS

Quand il s'agit d'améliorer la beauté de la conception Web, nous pensons souvent à ajouter des images à notre site Web. Cependant, simplement ajouter des images ne suffit pas, par conséquent, vous devez les styliser de différentes manières pour les rendre plus attrayants. CSS offre de nombreuses propriétés que vous pouvez utiliser pour ajouter du style aux images.

Ce message éclaire comment styliser les images dans CSS. Dans ce guide, vous passerez par ce qui suit:

1. Comment faire des images encerclées
2. Comment faire des images d'angle arrondies
3. Comment faire des images réactives
4. Comment centrer des images
5. Comment faire des images transparentes
6. Comment placer du texte sur les images
7. Comment ajouter un filtre aux images
8. Comment faire une superposition de volants sur les images
9. Comment retourner les images

Commençons.

Comment faire des images encerclées

Dans le but de faire apparaître vos images comme cercles, utilisez la propriété CSS Border-Radius. Ci-dessous, nous vous avons présenté un exemple d'image encerclé.

Html

Ici, nous avons simplement ajouté une image dans l'attribut SRC de la balise.

CSS

img
Border-Radius: 50%;
Largeur: 200px;
hauteur: 200px;

En réglant le radius frontalier à 50%, nous faisons de l'image un cercle. Vous pouvez modifier la valeur si vous souhaitez en faire un ovale ou moins arrondi.

Sortir

L'image a été encerclée avec succès.

Comment faire des images d'angle arrondies

La propriété CSS Border-Radius peut également être utilisée pour rendre le coin des images arrondies, voici comment vous le faites.

CSS

img
Border-Radius: 10px;
Largeur: 200px;
hauteur: 200px;

Ici, nous donnons la valeur de la radius frontalière dans les pixels pour rendre les coins arrondis.

Sortir

Les coins de l'image ont été arrondis.

Comment faire des images réactives

Les images réactives ajustent leur taille en fonction de la fenêtre du navigateur. L'exemple mentionné ci-dessous montre comment le faire.

Html

Dans le code ci-dessus, nous avons simplement ajouté une image.

CSS

img
largeur maximale: 100%;
Hauteur: Auto;

Pour rendre l'image réactive, définissez la largeur maximale à 100% et la hauteur en auto.

Sortir

L'image modifie sa largeur en fonction de la taille de la fenêtre du navigateur.

Comment centrer des images

Pour placer une image au centre, affichez-la comme un élément de niveau bloc et définissez ses marges sur Auto. Considérez l'exemple ci-dessous.

CSS

img
bloc de visualisation;
marge-gauche: auto;
marge droite: auto;
Largeur: 300px;

Pour centrer une image, nous l'affichons simplement comme un élément au niveau du bloc et définissons ses marges droite et gauche sur automatiquement.

Sortir

L'image a été alignée au centre.

Comment faire des images transparentes

Si vous souhaitez rendre vos images transparentes, utilisez la propriété CSS Opacité. Plus la valeur de la propriété Opacity est inférieure, plus la transparence de l'image est.

CSS

img
Opacité: 0.3;
Largeur: 300px;

Dans le code ci-dessus, l'opacité de l'image a été définie sur 0.3.

Sortir

L'image a été rendue transparente avec succès.

Comment placer du texte sur les images

Utilisez la propriété de position CSS pour placer du texte sur certaines positions sur les images. Les différentes positions que vous pouvez placer le texte sur l'image sont les suivantes.

1. En haut à gauche
2. En bas à gauche
3. Centre
4. En haut à droite
5. En bas à droite

Ici, nous avons démontré à l'aide d'un exemple.

Html

C'est la tour Eiffel

Dans le code ci-dessus, nous avons créé un conteneur Div et placé l'image et un autre conteneur Div à l'intérieur.

CSS

.div
Position: relative;

.en haut à gauche
Position: absolue;
En haut: 5px;
Gauche: 5px;
taille de police: 20px;
Style de police: italique;

img
Largeur: 400px;
Opacité: 0.5;

La première div a reçu une position relative afin que la deuxième div qui tient le texte puisse être placée à l'intérieur. En utilisant la classe Topleft, nous attribuons à la deuxième div une position absolue et lui donnant une longueur en haut et à gauche, en outre, donnant une certaine taille et un style de police au texte.

Sortir

Le texte a été ajouté sur l'image en haut gauche.

Comment ajouter des filtres aux images

Dans le but d'ajouter un filtre à des images telles que le flou ou la saturation, utilisez la propriété Filtre. Consultez l'exemple ci-dessous:

CSS

img
Largeur: 300px;

.inverter
Filtre: Invert (100%);

Ici, nous utilisons la méthode invert () sur la propriété du filtre pour ajouter des effets visuels à l'image.

Sortir

Les effets visuels ont été ajoutés avec succès à l'image.

Certaines autres méthodes que vous pouvez utiliser sur la propriété Filtre pour ajouter divers effets visuels sont:

• se brouiller(),
• contraste(),
• luminosité(),
• Grayscale (),
• saturer(),
• opacité (), etc.

Comment retourner les images

Retourner une image lorsque l'utilisateur apporte la souris, cela peut être une chose intéressante à faire. Pour ce faire, utilisez la propriété CSS Transform.

CSS

IMG: Hover
transformée: Scaley (-1);
Largeur: 300px;

Ici, nous retournons l'image le long de l'axe y en utilisant la méthode Scaley () de transformation.

Sortir

L'image a été retournée sur l'axe des y-de-y.

Conclusion

Les images de style qui apparaissent sur votre site Web sont très importantes et cela peut être fait en utilisant diverses propriétés CSS. Plusieurs choses que vous pouvez faire pour styliser vos images est qui en fait un cercle, rendez leurs coins arrondis ou en faites une miniature. De plus, vous pouvez rendre vos images réactives, ou ajouter du texte ou certains effets visuels sur eux. Dans cet article, nous avons montré de nombreuses façons dont vous pouvez styliser vos images en utilisant CSS, ainsi que des exemples pertinents.