Image ronde CSS

L'utilisation d'images est très importante dans le code HTML, en particulier lorsque vous avez travaillé sur un projet de site Web contenant de nombreuses images glissantes sur sa page d'accueil ou toute autre pages. Pour l'utilisation d'images dans le langage de script HTML, nous avons tendance à utiliser la balise «IMG». Ces images peuvent être définies sur leurs tailles d'origine, ou la taille peut également être modifiée en termes de hauteur et de largeur. Parallèlement à cela, la langue HTML vous fournit la propriété «Border-Radius» pour changer le rayon de tout élément comme la rubrique ou l'image. Dans le cas des images, il changera la forme d'angle d'une image de l'un à l'autre. Dans cet article, nous délibérerons l'utilisation de la propriété Border-Radius pour convertir une image en une image arrondie. Nous examinerons l'image qui sera utilisée dans les codes HTML pour le façonner autour du code Visual Studio. Vous pouvez voir l'image nommée «Nouveau.png ”attaché dans la capture d'écran ci-dessous. Nous l'utiliserons dans notre code Visual Studio pour le rendre rond.

Exemple 01:

Avant de façonner une image à tour, nous devons voir comment une image peut être insérée dans la page Web HTML sans modifier sa forme d'origine. Donc, nous utiliserons le «nouveau.PNG ”Image dans ce morceau de code HTML. Nous avons créé un nouveau fichier HTML dans notre répertoire actuel de Windows et l'avons nommé «CSS». Après cela, nous l'avons ouvert dans le code Visual Studio et ajouté le script HTML illustré ci-dessous. Ce script a été démarré avec la balise HTML «Doctype» standard suivie par la balise unique «HTML». La balise HTML montre que ce sera une page Web basée sur HTML et la balise HTML sera fermée après toutes les balises à la fin.

Après la balise HTML, nous avons les deux balises les plus basiques et les plus utilisées de fichiers HTML: les balises de tête et de corps. Le tag de tête contient les informations concernant l'en-tête - titre et style. Tandis que l'étiquette corporelle contiendra toutes les données, conteneurs et autres éléments à l'aide des autres balises. À l'heure actuelle, nous avons laissé la balise de tête vide et ajouté la balise d'en-tête de la taille «2» et la balise d'image «IMG» dans la balise «Body». La balise d'en-tête est utilisée pour simplement mettre un titre au début d'une page Web HTML tandis que la balise d'image a été utilisée pour insérer le nouveau.Image PNG dans la page Web en utilisant la variable «SRC».

De plus, nous utilisons la balise «style» dans la balise «IMG» pour définir la largeur «200 pixels» d'une image en utilisant la propriété «largeur» d'une image. Les étiquettes Body et HTML ont été fermées ici.

Enregistrons simplement notre code dans le fichier en utilisant CTRL + S et déboguez-le à l'aide du bouton "Exécuter" dans la barre des tâches du code Visual Studio. Il vous demandera la plate-forme de navigateur dans laquelle vous voulez qu'il soit exécuté. Nous avons sélectionné Chrome pour l'exécuter. La sortie a été présentée ci-dessous. La page Web HTML affiche l'en-tête noir de la taille 2. L'image a été affichée avec sa forme d'origine avec une taille différente. La largeur équivaut à 200 pixels comme définie dans la propriété de style.

Regardons de façonner notre image «ronde» dans le même code HTML. Pour cela, nous devons ouvrir le même fichier HTML dans le code Visual Studio et le mettre à jour. Comme vous le savez, apporter des modifications à n'importe quelle forme d'image réside dans la section Style. Nous devons donc utiliser le style CSS dans ce même code HTML à l'aide d'une balise «style» dans l'en-tête ou la balise «tête». Le reste du code sera laissé intact et ne sera pas mis à jour.

Maintenant, dans la balise «style» de cet en-tête de code, nous devons mentionner le nom d'un élément à mettre à jour (i.e., La balise «IMG».) Ajouter des supports bouclés et commencer à ajouter des propriétés pour modifier l'élément en fonction de votre besoin. Ainsi, nous utilisons la propriété «Border-Radius» dans les supports bouclés d'une balise «IMG» pour style et spécifiant sa valeur à 50%. Vous pouvez également ajouter des pixels sur un pourcentage lorsqu'il s'agit de choisir une unité pour toute valeur numérique dans le style CSS. Il s'agit du changement. Enregistrons d'abord ce code. Après avoir enregistré ce code avec CTRL + S, nous devons simplement l'exécuter à l'aide du bouton "Exécuter" à partir de la barre de tâche du code Visual Studio. Encore une fois, vous devez sélectionner le navigateur dans lequel vous souhaitez qu'il affiche ses données de sortie.

L'exécution de ce code nous conduirait à la sortie comme affiché ci-dessous. L'utilisation de valeurs de propriété Border-Radius jusqu'à 5% fait de l'image «Nouveau.png ”carré à rond. Les bords seraient arrondis comme indiqué dans l'image ci-dessous. Il s'agit d'utiliser la propriété Border-Radius pour convertir une image de forme carrée simple en une forme arrondie ou toute autre forme.

Exemple 02:

La même propriété peut être utilisée par d'autres moyens pour modifier la forme d'une image. Dans cet exemple, nous verrons comment les valeurs aléatoires peuvent modifier la forme d'une image simple. Donc, dans l'étiquette corporelle de ce script HTML, nous utilisons la balise «IMG» 4 fois. Dans toutes ces 4 balises, nous utilisons le même «nouveau.Png ”Image à plusieurs reprises avec la largeur de 200 pixels pour chaque forme.

De plus, pour modifier séparément la forme des images dans une balise de style, nous devons les spécifier avec différentes classes: A, B, C et D comme indiqué dans chaque balise «IMG». Dans la balise de style, nous avons utilisé les balises «IMG» avec leurs classes spécifiées (A, B, C et D) pour modifier séparément les coins de chaque forme. Les valeurs de 50%, 0%, 20% et 250% 15% ont été utilisées pour les 1er, 2e, 3e et 4e images respectivement. Exécutons ce code pour voir les résultats.

Les 4 formes différentes d'une image ont été générées comme indiqué ci-dessous.

Les mêmes formes identiques ou similaires peuvent être obtenues avec la propriété Border Radius simple en utilisant les 4 valeurs latérales à la fois: haut-gauche, haut-droit, inférieur à gauche et inférieur à droite comme indiqué ci-dessous. Nous avons essayé cette propriété simple Border-Radius pour 4 coins ainsi que la propriété de largeur et de hauteur des images fixées à 150 pixels pour tous. Enregistrons et exécutons ce code.

Utilisation d'un format simple pour la propriété Border-Radius, nous avons les formes à faible croisement pour un seul «nouveau.image png ”.

Conclusion:

L'utilisation et l'importance de la balise «IMG» ont été discutées avec l'utilisation de la propriété Border-Radius. Nous avons discuté de la façon dont une propriété Border-Radius peut modifier les bords de n'importe quelle image ou se diriger vers différentes formes avec les valeurs simples, bas, gauche et droite. Pour cela, nous avons discuté des exemples très simples et de base de script HTML en utilisant une seule image dans la balise «IMG» et en le stylisant. Nous avons atteint notre objectif en convertissant une image en une forme carrée, ronde, ovale et carrée arrondie en utilisant cette propriété de la frontière radiale.