interface Web
tutoriel CSS
Comment créer un effet de fractionnement de texte en utilisant CSS ?
Comment créer un effet de fractionnement de texte en utilisant CSS ?
Une conception Web à la fois belle et attrayante n'a jamais été aussi précieuse. Il existe de nombreux sites Web qui peuvent sembler attrayants. Ils n’ont toujours pas eu d’impact favorable sur le public. Lorsque les visiteurs arrivent sur votre site Web, la première chose qu’ils remarquent est l’apparence de votre site. La typographie est la représentation visuelle d'un texte écrit. Il comprend des éléments tels que le crénage et la conception des lettres.
Dans la conception de sites Web, les polices sont bien plus que de simples lettres. L’apparence de votre site Web changera, tout comme lorsque vous changez la couleur de la police. La création de différents effets, tels que le fractionnement du texte, peut donner à votre public un impact visuel énorme.
CSS fournit diverses fonctions et transitions vers les éléments HTML tels que des animations, des effets de survol, des effets néon, etc. Par conséquent, nous utiliserons ces propriétés pour créer l'effet de fractionnement du texte. Dans cet article, nous verrons comment créer un effet de texte fractionné à l'aide de CSS.
Effet de division horizontale du texte
Divisez le texte lorsque le curseur le survole, appelé Split Effect. Le fractionnement du texte horizontalement sera effectué à l'aide des pseudo-sélecteurs :before et :after ainsi que des sélecteurs de survol.
Pseudo-sélecteur « :before » - utilisé pour insérer quelque chose avant le contenu d'un élément.
Pseudo-sélecteur ":after" - utilisé pour insérer du contenu après le contenu de l'élément. L'attribut content spécifie le contenu à écrire après ou avant l'élément sélectionné
Attribut "z-index" - Lorsque des éléments qui se chevauchent sont présents, ils apparaissent sur la pile. Ainsi, pour décider quel élément apparaîtra en haut de la pile, nous lui attribuons un z-index plus grand.
Les valeurs peuvent être 1, 2, 3…. Sa valeur peut être négative si vous souhaitez conserver l'élément en dessous d'un autre élément. Vous attribuez donc simplement une valeur d'indice z inférieure
Étapes à suivre
Écrivez du texte, centrez-le et stylisez-le.
Utilisez le sélecteur :before pour définir la première moitié (moitié supérieure) du texte en gris.
Utilisez le sélecteur :after pour couvrir le contenu gris.
Donnez à chaque sélecteur un z-index afin que les événements soient classés séquentiellement.
Découvrez le contenu en survolant le texte, créant ainsi un effet de division horizontale.
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8">
<title>Split Horizontal Effect</title>
<style>
body{
margin: 10px;
padding: 0;
font-family: verdana, Helvetica, arial;
letter-spacing: 1px;
}
#Example {
position: absolute;
top: 50%;
left: 38%;
font-size: 60px;
z-index: -1;
color: red;
}
#Example::before {
content: attr(id);
position: absolute;
height: 60%;
color: gray;
z-index: 1;
top: 4px;
left: 1px;
overflow: hidden;
}
#Example::after {
content: attr(id);
position: absolute;
height: 60%;
top: 0;
left: 0;
overflow: hidden;
color: red;
border-bottom: 1px solid white;
z-index: 2;
transition: 1s;
}
#Example:hover::after {
border-bottom: 4px solid white;
top: -7px;
overflow: hidden;
}
</style>
</head>
<body>
<h1 id="Example"> Example </h1>
</body>
</html>
Effet de segmentation de texte
Voyons maintenant comment créer l'effet de division verticale du texte.
Étapes à suivre
Créez un élément de section avec class="container". Stylisez le conteneur en conséquence.
Créez un élément div à l'intérieur de l'élément section. Créez deux éléments p à l'intérieur. Position et style à votre goût. Ces éléments p contiennent le texte à diviser. Le texte sera écrit une fois par p élément.
Donnez une forme au texte en utilisant la propriété clip-path. Ensuite, utilisez la propriété transform pour traduire le texte au survol.
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8">
<title> Split effect </title>
<style>
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 35%;
left: 40%;
color: cyan;
}
.demo {
position: absolute;
text-transform: uppercase;
font-size: 50px;
letter-spacing: 1px;
transition: 4s ease-in;
}
.demo1 {
clip-path: polygon (0 10%, 30% 0, 100% 0, 100% 0%, 50% 0, 0 100%);
}
.demo2 {
clip-path: polygon (0 100%, 50% 0, 100% 100%, 100% 100%, 0 100%, 47% 0);
}
.box:hover .demo1 {
transform: translateY(-30px);
}
.box:hover .demo2 {
transform: translateY(20px);
}
</style>
</head>
<body>
<section class= "container">
<div class= "box">
<p class= "demo demo1"> Example </p>
<p class= "demo demo2"> Example </p>
</div>
</section>
</body>
</html>
Utiliser les propriétés du chemin de détourage
La propriétéclip-path de CSS est utilisée pour créer une zone de découpage utilisée pour déterminer quelle partie d'un élément sera affichée sur la page Web. Les pièces à l’intérieur de la zone seront affichées, tandis que les pièces en dehors de la zone seront masquées.
La valeurClipping Path Polygon () est l'une des formes disponibles dans la géométrie de base. Il nous permet d'opérer sur plusieurs ensembles différents de valeurs des axes x et y (dans n'importe quelle unité).
Grammaire
element{
clip-path: polygon (x y, x y, x y);
}
Nous pouvons comprendre cette propriété à l’aide de l’exemple suivant.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Clip-path Property</title>
<style>
h3{
color: red;
font-size: 30px;
text-decoration: underline;
}
.demo {
clip-path: polygon(30% 0%, 70% 30%, 50% 80%, 0% 40%);
}
.demo1{
clip-path: polygon(50% 10%, 61% 45%, 98% 30%, 68% 67%, 75% 91%, 48% 70%, 18% 91%, 32% 67%, 4% 45%, 42% 45%);
}
</style>
</head>
<body>
<center>
<h3 id="Clip-path-Property">Clip-path Property</h3>
<img src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo" alt="Comment créer un effet de fractionnement de texte en utilisant CSS ?" >
<h4 id="Diamond-shape-polygon"> Diamond shape polygon </h4>
<img src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo1" alt="Comment créer un effet de fractionnement de texte en utilisant CSS ?" >
<h4 id="Star-Shape-Polygon">Star Shape Polygon</h4>
</center>
</body>
</html>
Conclusion
L'un des éléments les plus importants de la convivialité dans la conception Web est la lisibilité. Les utilisateurs doivent être capables de lire et de comprendre facilement votre contenu. Si le contenu textuel de votre site Web est unique, les chances que le site Web soit populaire sont élevées. En effet, le texte est l’un des éléments les plus courants qui apparaît fade sur la plupart des sites Web. Par conséquent, afin d’attirer l’attention des utilisateurs, les développeurs peuvent essayer des styles d’écriture de texte différents et uniques. L’un d’eux est l’effet de texte divisé.
Dans cet article, nous avons discuté de différentes manières de créer des effets de fractionnement sur le texte des pages Web. Pour créer une division horizontale, nous utilisons les pseudo-sélecteurs :before et :after. Pour créer des divisions de différentes formes, nous avons utilisé la propriété clip-path Polygon () de CSS.
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)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Show, ne dit pas
Mar 16, 2025 am 11:49 AM
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Comment utilisez-vous CSS pour créer des effets de texte, tels que des ombres de texte et des gradients?
Mar 14, 2025 am 11:10 AM
L'article discute de l'utilisation de CSS pour les effets de texte comme les ombres et les gradients, les optimiser pour les performances et l'amélioration de l'expérience utilisateur. Il répertorie également les ressources pour les débutants (159 caractères)
Que diable sont les commandes NPM?
Mar 15, 2025 am 11:36 AM
Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Utilisons (x, x, x, x) pour parler de spécificité
Mar 24, 2025 am 10:37 AM
Je discutais avec Eric Meyer l'autre jour et je me suis souvenu d'une histoire d'Eric Meyer de mes années de formation. J'ai écrit un article de blog sur la spécificité CSS, et
