CSS Border transparente
Dans cet article, nous créerons une frontière transparente en CSS et vous verrez que l'objet derrière la bordure transparente est visible. Nous explorerons les différents exemples ici pour vous fournir une compréhension complète du concept de frontière transparent.
Exemple 1:
Ouvrez un nouveau fichier dans le code Visual Studio. Lorsque ce fichier vide s'ouvre, sélectionnez la langue. Ici, nous créons un code HTML, nous choisissons donc la langue HTML. Lorsque nous sélectionnons cette langue, le fichier créé ici est le fichier html. Donc, lorsque nous enregistrons ce fichier, nous n'avons pas besoin de mentionner l'extension du fichier. Après cela, tapez les balises HTML de base ou mettez "!"Puis appuyez sur" Entrée ". Vous obtiendrez automatiquement toutes les balises de base requises pour le HTML.
Maintenant, nous lions ce fichier vers le fichier CSS qui est «transparent.CSS ». Dans le corps, nous utilisons d'abord la balise de cap pour générer le titre. Après cela, nous créons deux divs avec les noms «intérieur» et «extérieur». Ensuite, encore une fois, nous plaçons une rubrique qui apparaît à l'intérieur du deuxième div. Maintenant, nous fermons ces divs ici. Nous créons ici une bordure transparente en utilisant la propriété «bordure» dans CSS et définissons la couleur RGBA dans cette propriété de la frontière.
Nous appliquons la couleur «marron» aux titres que nous avons créés précédemment. L'extérieur est pour mentionner la première classe Div et nous avons réglé sa «largeur» sur «300px». La «hauteur» de cette première div est «300px» et la «marge» ici est «10%». Maintenant, après toutes ces propriétés, nous définissons la propriété «bordure» et définissons sa valeur sur la valeur RGBA. Nous définissons également la valeur alpha ici pour rendre la frontière transparente. Nous définissons la «bordure» sur «10px» «largeur» et en «solide». Le RGBA que nous définissons ici est «RGBA (0, 0, 0, .4) «où« RGB (0, 0, 0) »est utilisé pour le noir. Mais ici, nous ajoutons une valeur de transparence qui est «0.4 ”. Le «Border-Radius» est réglé sur «5px», donc les bords de la frontière sont un peu incurvés.
Maintenant, nous mentionnons également le deuxième nom de div ici comme «extérieur». Et nous utilisons ici certaines propriétés pour ce deuxième div. Nous devons régler la taille de cette deuxième div plus petite que la première div. Nous avons donc réglé sa «largeur» et «hauteur» à «270px» pour chacun d'eux. Sa «marge» est «automatique» et la «marge» est «3%». Nous définissons le «fond» comme «RGBA (0, 0, 0, 0.4) », comme la frontière du premier div. Le «Border-Radius» ici est également «5px» et le «rembourrage» que nous utilisons est également «5px».
Ici, vous pouvez voir que la frontière est transparente car nous appliquons certaines valeurs alpha dans la valeur RGBA de la bordure. Si nous plaçons un objet derrière cette bordure, il sera visible pour nous.
Exemple n ° 2:
Ceci est notre deuxième exemple et nous créons un conteneur div vide après le titre. Nous définissons l'image dans cette div et appliquons une bordure transparente sur l'image en utilisant les propriétés CSS.
Nous définissons la «couleur» sur «H1» comme «marron». Nous utilisons ici le conteneur «div» et avons réglé sa «largeur» sur «300px» et sa «hauteur» à «300px». Nous utilisons également le «flotteur» ici pour flotter ce div à «gauche». Nous définissons le «fond» de cette div et définissons la «mypicture.png ”comme arrière-plan de cette div. Nous plaçons le chemin de cette image dans «l'URL» et mettons cette «URL» comme valeur de la propriété «arrière-plan». Nous utilisons la propriété «marge» et la fixons sur «20px». Le «rembourrage» est également défini sur «20px». Pour la «bordure», nous utilisons la valeur «largeur» en «25px» du type «solide». Comme nous voulons créer une bordure transparente, nous devons utiliser la couleur «RGBA» ici dans laquelle nous mettons la valeur alpha pour créer une bordure transparente. La valeur de couleur RGBA est «RGBA (143, 9, 9, 0.5) ". Les trois premières valeurs montrent la couleur de type rouge mais ici, 0.5 applique un certain effet de transparence sur cette bordure. Maintenant, pour l'ensemble du «corps», nous définissons la valeur de la propriété «rembourrage» sur «90px».
La sortie ici contient une image. Vous remarquerez peut-être la bordure autour de cette image. Cette frontière est transparente car nous pouvons voir l'image derrière la frontière. Aux coins de l'image, nous pouvons voir que la couleur de l'image s'estompe parce que nous avons une bordure transparente autour de l'image.
Exemple # 3:
Dans ce HTML, nous créons à nouveau une seule div. Maintenant, en utilisant les attributs CSS, nous plaçons l'image dans cette div et appliquons une bordure transparente.
Tout d'abord, nous devons placer le nom du conteneur div que nous avons défini dans le code HTML. Ensuite, nous mettons les accolades bouclées. À l'intérieur de ces accolades bouclées, nous plaçons le «fond» qui définit l'arrière-plan de cette div. Nous définissons l'image dans «l'URL» et cette «URL» est ici comme valeur de la propriété «arrière-plan» de CSS. Nous utilisons la «frontière» et augmentons la «largeur» de cette frontière dans cet exemple. Nous avons réglé sa «largeur» sur «50px» et cette frontière est sous forme «solide». Nous utilisons ici le «RGBA» dont nous avons discuté dans notre exemple précédent. Nous définissons la valeur de l'alpha comme «0.5 ”qui représente la transparence de cette couleur de bordure. La «hauteur» de ce «div.WROP »est« 300px »et la« largeur »est« 500px »donc, il semblera rectangulaire. La «marge» que nous avons définie ici est «50px».
Regardez la sortie suivante et remarquez la bordure. Ici, vous pouvez voir que la partie d'image qui est présente derrière la frontière est visible pour nous. Cela signifie que cette frontière est transparente. Nous pouvons créer cette bordure transparente en définissant la valeur alpha à la bordure avec la couleur RGBA.
Conclusion
Cet article est présenté ici pour vous aider à saisir les propriétés CSS qui nous permettent de créer la frontière transparente en CSS. Ce tutoriel a bien survécu à ce sujet. Nous avons montré les trois exemples distincts ici où nous avons conçu la bordure transparente en utilisant la propriété de la frontière. Nous avons également utilisé les valeurs RGBA dans cette propriété frontalière qui ont permis de définir les valeurs alpha pour rendre notre frontière transparente. Nous avons également défini cette «bordure transparente» car c'est la bordure à partir de laquelle nous avons vu l'objet derrière lui. Dans cet article, nous avons inclus les résultats de tous ces codes et nous les avons expliqués en détail ici. J'espère que vous pourrez créer cette «frontière transparente» dans vos projets après avoir suivi cet article.