Texte 3D CSS
Exemple 1
Dans cet exemple, nous devons d'abord créer le fichier HTML avant de créer le fichier CSS. Nous allons effectuer des exemples dans le studio de code visuel. Vous devez créer un nouveau fichier avec le nom de fichier et utiliser le ".Extension de fichier html ”pour le fichier html. Ensuite, écrivez le code suivant pour rendre «Hello World» sur le navigateur.
Tout d'abord, nous devons mentionner le type de document, qui est «HTML» ici. Rappelez-vous une chose que toute balise que nous devons ouvrir doit être fermée avec une balise de clôture. Comme le tag de clôture de «» sera «.»Ensuite, ajoutez la balise« », et à l'intérieur de cette balise« », nous avons la nouvelle balise, qui est la balise« méta »; Nous définissons le jeu de caractères comme «Charset», qui est «UTF-8». Il permettra d'utiliser plus de caractères dans un document.
Ensuite, ouvrez une balise «» et ajoutez un titre qui est «document» ici, puis fermez cette balise «» en utilisant «."Après cela, nous devons donner le lien vers le fichier" CSS ". Pour cela, nous utilisons la balise «lien» et ici l'attribut «rel» pour définir la relation entre la page liée et la page actuelle, qui est mentionnée comme une «feuille de style» ici.
Ensuite, «HREF» est utilisé, et nous donnons le nom de notre fichier «CSS», que nous voulons lier avec ce fichier «HTML». Le nom de notre fichier «CSS» est «style.CSS ”Fermez le tag de tête" "ici. Et ouvrez une nouvelle étiquette corporelle ".«Dans ce corps, nous avons« Span Class », qui est égal au« texte », et il accepte le texte, qui est écrit comme« Hello World."Aussi, fermez cette balise comme". Puis fermez toutes les balises restantes. La balise restante que nous n'avons pas clôturée est l'étiquette corporelle, et enfin, nous fermons la balise à l'aide de «et des tags, respectivement. Après cela, vous devez simplement enregistrer ce fichier. Et passer au «style.Fichier CSS ”pour le style et donner un effet 3D à ce texte.
Maintenant, vous devez créer un autre fichier du nom qui vous est donné dans le «HREF», et nous donnons le «style.Nom de fichier CSS »pour lier. Nous avons donc créé notre fichier «CSS» avec ce nom. Dans ce «style.Fichier CSS », nous ferons du style sur le texte.
Nous allons ajouter du style. En commençant par le corps, nous donnons la couleur d'arrière-plan comme «Dimgrey.«La prochaine chose que nous avons faite est de coiffer le texte, et la position du texte est« absolue »ici qui positionnera le texte où nous voulons le placer. Maintenant, nous donnons respectivement les marges «top» et «droites» comme «20%» et «30%», respectivement. Nous utilisons la «transformation: traduire (50% - 50%)», et en utilisant cela, nous pouvons tourner, biaiser ou traduire notre texte.
Passons de l'avant et transformons notre texte en «majuscules.«Nous allons mettre la famille des polices à« Verdana."Ensuite, augmentez la taille de la police à" 6EM "et le" poids de police "à" 500 ". Le «poids de police» définit l'épaisseur et la fin de la police. Nous définissons la «couleur» de la police comme «marron.«Nous allons ajouter plusieurs couches d'ombre de texte ici. La première valeur est utilisée pour le décalage horizontal que nous allons définir comme «1px», ce qui signifie 1 pixel, et la deuxième valeur est pour le décalage vertical, qui est à nouveau «1px, et le troisième est pour« flou », qui est également «1px» et la couleur que nous allons choisir est «# 919191» qui est à nouveau une nuance de gris.
Maintenant, nous allons ajouter une autre couche dans laquelle nous utilisons un décalage horizontal comme «1px» mais la verticale comme «2px». Identique à ci-dessus, nous changerons le décalage vertical dans chaque ligne, mais le décalage horizontal et flou sera le même que celui indiqué dans l'image. Ainsi, le Text-Shadow prendra forme. Ensuite, nous avons une dernière chose à faire, nous devons ajouter quelques couches supplémentaires de shadow, mais cette fois, nous allons utiliser des valeurs de couleur «RGBA» dans lesquelles «R» est pour «rouge», «g» est pour «vert», «b» est pour «bleu» et «a» est pour la valeur «alpha». Nous définissons le décalage horizontal sous le nom de «1px», le décalage vertical comme «18px», le décalage «flou» comme «6px», et le «RGBA» est défini comme «(16, 16, 16, 0.2) «Là où« 16 »est pour le rouge, le prochain« 16 »est pour le vert, l'autre« 16 »est pour le bleu et la valeur du canal alpha est définie comme« 0.4 ”. Dans les lignes suivantes, nous modifions les décalages verticaux et les zones floues de chaque ligne. La dernière chose que nous faisons est de changer également le canal alpha.
Dans Visual Studio Code, nous exécutons ce code sur le navigateur, donc pour cela, accédez à «l'extension» ou appuyez sur «Ctrl + Shift + X» et recherchez «Ouvrir dans le navigateur» et l'installer.
Après l'installation, vous devez cliquer avec le bouton droit sur le fichier HTML et cliquer sur «Ouvrir dans le navigateur par défaut» ou appuyez sur «Alt + B» pour ouvrir ce code dans le navigateur. Ensuite, la sortie suivante est rendue à l'écran.
Exemple n ° 2
Dans cet exemple, nous utilisons le même fichier HTML, mais nous allons utiliser une autre feuille de style ici. Nous donnerons le nom d'un autre fichier «CSS» avec le même code «HTML». Le nom du deuxième fichier «CSS» est «Stylesheet1.CSS », comme indiqué ci-dessous.
Dans le fichier CSS, nous modifions un peu le code et modifions l'effet 3D du texte qui est donné dans notre fichier HTML. Essayons ce code.
Ici, nous définissons la couleur d'arrière-plan «Blue-Violet."Et la« position »du texte est absolue comme dans l'exemple ci-dessus, mais ici, nous définissons les valeurs supérieures comme« 15px »et« gauche »comme« 25px ». En transformée, nous définissons «Skew (-63DG)» et «Scale (1,.5) ". Le «biais» faussera les éléments de «-63dg» horizontalement. La fonction «échelle» redimensionnera les éléments dans des directions horizontales et verticales. Les deux sont des fonctions intégrées. Ensuite, nous avons une transformation de texte qui est «Transformer: Hérite», qui affiche le texte comme il est donné dans le fichier HTML. Nous utilisons la «Font-Family» comme «Times New Roman», la «taille de la police» est «7EM», et le poids «Font-Weight» est «500».
Nous définissons la «couleur» de la police «blanc» ici. Ensuite, nous allons appliquer la propriété «Text-shadow». En cela, nous définissons le décalage horizontal comme «-1px», décalage vertical comme «-1px», floue comme «1px» et sélectionnez la couleur «# 808080», qui est le code de la couleur gris. Dans les lignes suivantes, nous changerons tous les décalages horizontaux et verticaux, mais le décalage et la couleur floues seront les mêmes. Nous ajouterons plus de couches de shadow de texte, mais ici, nous utilisons des valeurs «RGBA». Dans ce (0, 0, 128, 0.75), nous définissons «0» pour «rouge», «0» pour «vert», «128» pour «bleu» et «0.75 ”pour« Alpha."Le" Z-Index "est là pour contrôler l'ordre vertical de l'élément qui chevauche. La sortie est là.
Conclusion
Nous avons écrit ce guide pour vous afin que vous puissiez comprendre le fonctionnement du texte 3D dans le code Visual Studio. Nous avons effectué ces exemples, qui sont donnés dans ce guide dans le Studio du code visuel. Nous avons discuté de la façon dont nous créons séparément les fichiers HTML et CSS, puis lions les deux fichiers pour utiliser le fichier de style CSS dans notre fichier HTML. Ce guide vous aidera à comprendre l'utilisation de «HTML» et «CSS."