Maison > Article > interface Web > Comment créer un effet de fractionnement de texte en utilisant CSS ?

Comment créer un effet de fractionnement de texte en utilisant CSS ?

WBOYavant: 2023-09-13 10:33:031093parcourir

$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 valeur

Clipping 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>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> 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>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!

css html 栈堆 class 事件选择器

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：CSS Viewport : Comment utiliser vmax et vw pour implémenter une largeur de texte adaptativeArticle suivant：CSS Viewport : Comment utiliser vmax et vw pour implémenter une largeur de texte adaptative

Articles Liés

Voir plus