Demi-cercle CSS

La feuille de style en cascade joue un rôle important dans la conception et l'ajout d'effets au contenu HTML. Avec les balises HTML, CSS est une balise essentielle pour créer n'importe quelle page Web statique ou dynamique. De plus, tous les sites Web personnalisés que nous voyons sur Internet sont développés en utilisant HTML et son bloc de construction CSS. Ce style peut être de types différents en ligne, interne ou externe. Mais dans cet article, nous suivrons le style interne. Un demi-cercle sera créé et sera conçu en suivant la pièce de HTML et les balises CSS. L'utilisateur doit être conscient des bases des balises d'ouverture et de fermeture HTML ainsi que la déclaration CSS par classes et IDS. Avec cela, il devient plus facile de comprendre la création d'un cercle.

Implémentation du demi-cercle

Une séquence de mise en œuvre simple des balises HTML et CSS est appliquée avec la propriété Border-Radius de CSS. Ouvrez l'éditeur de texte et utilisez le code suivant pour dessiner un demi-cercle sur une page Web. Pour la mise en œuvre d'un demi-cercle dans HTML et CSS, nous avons utilisé le CSS interne qui est déclaré à l'intérieur de la balise avec les balises d'ouverture et de clôture. Commencez avec les balises HTML, ouvrez la balise de tête. Ensuite, dans la première étape, nous avons donné le titre à la page. Ce nom de titre apparaîtra en haut de l'onglet dans le navigateur au moment de l'exécution. Après avoir fermé la balise de titre, nous déclarerons la balise de style. Tout d'abord, nous déclarerons la marge et le rembourrage de la forme.

Différence b / w marge et rembourrage

La marge est l'espace autour de l'objet que vous souhaitez créer. Cette propriété est utilisée pour le réglage de l'objet sur la page, soit pour se déplacer à gauche ou à droite, etc. C'est une zone transparente n'ayant pas de couleur d'arrière-plan. Une marge entoure la forme des 4 côtés.

Le rembourrage est la partie qui est présente entre l'objet créé et le contenu à l'intérieur de l'objet. Ce contenu peut être une forme, un texte, etc. La propriété de rembourrage spécifie à quoi ressemble un objet à l'intérieur du conteneur. Ce conteneur contient également une couleur d'arrière-plan. L'augmentation ou la diminution de la taille du rembourrage affecte la taille du contenu à l'intérieur.

Donc, ici à l'intérieur du code de style, nous avons déclaré à la fois la marge et le rembourrage comme 0. Cela signifie que nous utiliserons les codes de réglage manuellement en déclarant la hauteur et la largeur des propriétés de la forme. Il est nécessaire de déclarer ces propriétés comme 0 au lieu de les éliminer du code car il est considéré comme auto s'il n'est pas déclaré comme zéro.

*
Marge: 0;
Rembourrage: 0;

La troisième propriété liée à la forme est la couleur de fond blanc. C'est la couleur par défaut. Si vous ne le mentionnez pas, ce sera toujours blanc. Ensuite, nous utiliserons le style du div. Div est un conteneur pour contenir certains éléments à l'intérieur. Il n'a aucun effet sur la mise en page ni le contenu jusqu'à ce que nous y fournissons un style. Ici, nous avons utilisé beaucoup d'effet pour le conteneur div. Tous les effets de la forme sont appliqués au conteneur div pour les ajustements. La position du conteneur est considérée comme absolue.

Les deux propriétés de base de base sont l'emplacement et la direction de la forme. Pour ajuster la forme, nous utiliserons les attributs supérieurs et gauche. `` En haut '' décidera de la distance de la forme de la bordure supérieure de la page Web. La partie gauche montre la distance de la forme de la bordure gauche de la page. Les deux propriétés sont prises en pourcentage.

TOP: 20%;
Gauche: 10%;

La fonction de transformation est une propriété puissante qui est utilisée pour faire pivoter, biaiser, plier ou traduire l'objet. L'une des fonctionnalités les plus utilisées est la fonction «traduire» qui est utilisée pour déplacer l'objet d'un endroit à l'autre. En créant un demi-cercle, nous avons utilisé deux valeurs de déplacement à partir de la gauche et le haut en pourcentage. Nous avons pris les deux valeurs avec le signe négatif pour l'ajustement.

Transformer: traduire (-50%, -50%)

Maintenant, nous utiliserons certains effets sur la forme créant une propriété comme sa hauteur et la largeur. Les deux propriétés sont prises en pixels.

Hauteur: 100px;
Largeur: 200px;

Quelle est la propriété Border-Radius et pourquoi est-elle utilisée?

Le rayon de bordure est l'épine dorsale de la création d'un cercle, ou d'un demi-cercle en HTML. Cette propriété joue un rôle vital pour contourner les coins des bords de la frontière d'un objet. Jouer avec la frontière et les tourner vers le centre fait un cercle parfait. Les paramètres peuvent être de 4 valeurs. La propriété Border-Radius est utilisée pour donner la valeur du rayon de la frontière. Les 4 valeurs sont les propriétés de longueur, de pourcentage, initiales et héritées.

Ces 4 valeurs sont spécifiées dans un ordre spécifique pour former un rayon d'une bordure:

• En haut à gauche
• En haut à droite
• En bas à droite
• En bas à gauche

Le rayon de bordure peut contenir toutes ces valeurs ou celle personnalisée en supprimant une seule valeur. Si la valeur du bas à gauche est supprimée, la valeur sera la valeur de la droite en haut de la forme.

Border-Radius: 150px 150px 0 0;

Pour faire un demi-cercle, nous avons pris 2 valeurs comme 150px, et les deux autres sont déclarés zéro. Si nous prenons toutes les valeurs comme 150 ou tout autre numéro plus près de lui, alors la forme résultante serait un cercle complet ou un ovale. Après cet alignement du rayon, nous avons attribué la couleur à la forme rouge. Maintenant, nous allons également fermer la section Style et la section Head.

À l'intérieur de la section corporelle du code, nous déclarons une div, seule l'ouverture et les balises de clôture pour div sont utilisées ici. Tout le style est déclaré dans la section style de CSS.

Maintenant, nous allons enregistrer le code dans l'éditeur de texte. Assurez-vous que le fichier formé doit être enregistré avec le nom ayant une extension de HTML. Par exemple, échantillon.HTML est le fichier, sur lequel nous travaillons.

Pour exécuter le fichier texte, ouvrez le fichier en sélectionnant l'option «Open-with» et en sélectionnant n'importe quel navigateur de votre choix. Ce faisant, l'icône de fichier sera remplacée par l'icône du navigateur.

Vous verrez qu'un demi-cercle se forme avec une couleur rouge et que les mêmes alignements sont effectués que nous avions déclarés.

Conclusion

Une mise en œuvre d'un demi-cercle dans CSS est réalisée en donnant une brève introduction à HTML et CSS. Un éditeur de texte simple et un navigateur sont responsables de l'exécution des balises HTML et CSS dans le fichier. Nous avons utilisé des CS internes à cet effet. En outre, une propriété CSS importante qui est une propriété Border-Radius est également définie ici. En suivant cette fonctionnalité, un cercle est formé, nous avons juste besoin d'en personnaliser certaines valeurs. Tous les effets sont déclarés dans la section CSS, la section corporelle ne contient que le conteneur div.