Créer un portrait textuel en utilisant CSS ?
Ajouter du style à votre site Web est la partie la plus importante de la création d'un site Web, car il sert de point d'attraction pour les utilisateurs lorsqu'ils visitent votre site Web pour la première fois. Nous pouvons créer de nombreux types de conceptions et d'expériences interactives en utilisant CSS. Des portraits textuels peuvent être créés à l’aide d’Illustrator ou de Photoshop pour rendre le design plus attrayant.
Dans cet article, nous allons voir comment générer et créer un portrait textuel en utilisant CSS et certaines fonctions JavaScript afin de réaliser notre portrait textuel.
Création du portrait textuel
Un portrait textuel est une image qui semble contenir du texte, aboutissant à l'apparence d'un objet ou d'une personne. Nous utiliserons CSS pour implémenter ce portrait textuel. Parlons des méthodes que nous allons utiliser pour les portraits textuels.
Voici les étapes que nous suivons lors de la création d'un portrait textuel :
Étape 1 - Nous commençons par créer un document avec le texte requis que vous souhaitez ajouter. Supposons que nous ajoutions le texte « bonjour » et que nous répétions le mot à l'aide de la fonction répétition() de JavaScript.
Étape 2 - La deuxième chose que nous allons faire sera de rendre l'arrière-plan plus attrayant en définissant sa couleur sur noir et nous définirons également l'image d'arrière-plan à l'aide de la fonction URL. Nous utiliserons la propriété « répétition d'arrière-plan » et. définissez sa valeur sur « pas de répétition » afin que l'image ne soit pas répétée.
Étape 3 - Nous allons maintenant imprimer notre texte dans l'image, nous allons donc découper le texte et ajouter d'autres propriétés comme changer la police et redimensionner, etc.
Pour utiliser la fonction de répétition JavaScript.
Grammaire
Jetons un coup d'œil à la syntaxe de la fonction de répétition Javascript.
string.repeat(count);
La variable count utilisée dans la syntaxe est une valeur qui indiquera à la fonction combien de fois répéter la chaîne donnée, et le nombre va de 0 à l'infini.
Exemple
Pour mieux comprendre cela, regardons un exemple de création de portrait textuel en utilisant CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of a text-potrait using CSS</title>
<style>
p{
background: url(
"https://cdn.pixabay.com/photo/2015/10/01/17/17/car-967387_960_720.png");
-webkit-background-clip: text;
line-height: 16px;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
line-height: 16px;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
background-size: 76vh;
}
body {
overflow: hidden;
background: rgb(236, 236, 236);
font-family: "Segoe UI", sans;
}
h1{
text-align: center;
}
h2{
text-align: center;
}
</style>
</head>
<body>
<h1 id="Welcome-to-tutorial-s-point"> Welcome to tutorial's point </h1>
<h2 id="This-is-an-Example-of-a-text-portrait">This is an Example of a text portrait </h2>
<p id="repeat"></p>
<script>
let str = "Yellow Car ";
document.getElementById("repeat").innerHTML = str.repeat(487);
</script>
</body>
</html>
Dans le code ci-dessus, nous avons créé un paragraphe et lui avons donné un identifiant, puis nous avons écrit la chaîne à répéter en utilisant JavaScript, puis nous l'avons répété 500 fois en utilisant la fonction getElementByid, puis nous sommes passés à la partie CSS en ajoutant The L'image d'arrière-plan est supprimée et le texte est recadré afin que seul le texte au premier plan de l'image soit visible. Nous obtiendrons un portrait de voiture avec un texte de remplissage de "Bonjour, comment vas-tu". Jetons un coup d'œil à la sortie du code suivant.
Dans la sortie ci-dessus, vous pouvez voir que le texte est au premier plan et l'image de la voiture est en arrière-plan. Nous avons obtenu notre sortie en utilisant la répétition JavaScript et en définissant la valeur sur 500, ce qui signifie que le texte sera répété 500 fois dans son ensemble. toile.
La fonction string.repeat() est une fonction intégrée qui construit une nouvelle chaîne en utilisant un nombre spécifié de copies d'une chaîne, comme le montre l'exemple ci-dessous
<script> A = "hello"; a=A.repeat(2); document.write(a); </script>
Le code ci-dessus produira le résultat suivant.
Voici un exemple montrant comment nous pouvons utiliser la propriété string.repeat.
Exemple
Regardons un autre exemple de portrait textuel créé en utilisant CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of a text-potrait using CSS</title>
<style>
p{
background: url(
"https://cdn.pixabay.com/photo/2016/02/23/17/42/orange-1218158__340.png");
-webkit-background-clip: text;
line-height: 16px;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
line-height: 16px;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
background-size: 76vh;
}
body {
overflow: hidden;
background: rgb(236, 236, 236);
font-family: "Segoe UI", sans;
}
.tut{
text-align: center;
background-color:green;
color:white;
}
</style>
</head>
<body>
<div class="tut">
<h1 id="Welcome-to-tutorial-s-point"> Welcome to tutorial's point </h1>
<h2 id="This-is-an-Example-of-a-text-portrait">This is an Example of a text portrait </h2>
</div>
<p id="repeat"></p>
<script>
let str = "Orange is a fruit ";
document.getElementById("repeat").innerHTML = str.repeat(600);
</script>
</body>
</html>
Dans le code ci-dessus, nous avons utilisé plusieurs propriétés CSS pour montrer comment créer un portrait textuel. Le JavaScript dans le code ci-dessus utilise la fonction str.repeat afin d'imprimer le texte plusieurs fois dans l'image.
Vous pouvez voir dans le résultat ci-dessus que le texte a pris la forme d'une orange qui était notre image réelle. Passons maintenant à la conclusion de ce didacticiel.
.Conclusion
En créant un portrait de texte en utilisant CSS et quelques lignes de code et en utilisant la fonction JavaScript string.repeat, nous obtenons notre résultat, nous écrivons d'abord le texte que nous voulons voir apparaître au premier plan et décidons combien de fois le texte est répété. Le résultat que nous obtiendrons dépend également de la longueur des caractères dans le texte.
Dans cet article, nous avons vu comment créer du texte en utilisant seulement quelques lignes de code CSS et des fonctions JavaScript.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
