Table des matières
Effet de division horizontale du texte
Étapes à suivre
Exemple
Example
Effet de segmentation de texte
Utiliser les propriétés du chemin de détourage
Grammaire
Clip-path Property
Diamond shape polygon
Star Shape Polygon
Conclusion
Maison 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 ?

Sep 13, 2023 am 10:33 AM

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>
Copier après la connexion

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>
Copier après la connexion

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);
}
Copier après la connexion

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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Travailler avec GraphQL Caching 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 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 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 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

Que diable sont les commandes NPM? 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.

Comment utilisez-vous CSS pour créer des effets de texte, tels que des ombres de texte et des gradients? 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)

Créer votre propre bragdoc avec Eleventy 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é 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

See all articles