Heim > Artikel > Web-Frontend > Wie erstelle ich mit CSS einen Textteilungseffekt?
Wie erstelle ich mit CSS einen Textteilungseffekt?
- WBOYnach vorne
- 2023-09-13 10:33:031093Durchsuche
Webdesign, das sowohl schön als auch ansprechend ist, war noch nie so wertvoll. Es gibt viele Websites, die attraktiv aussehen können. Sie hatten immer noch keine positive Wirkung auf das Publikum. Wenn Besucher auf Ihre Website gelangen, fällt ihnen als Erstes auf, wie Ihre Website aussieht. Typografie ist die visuelle Darstellung geschriebener Texte. Es umfasst Elemente wie Kerning und Buchstabendesign.
Beim Website-Design sind Schriftarten mehr als nur Buchstaben. Das Erscheinungsbild Ihrer Website ändert sich, genau wie wenn Sie die Schriftfarbe ändern. Durch das Erstellen verschiedener Effekte, wie z. B. das Teilen von Text, können Sie Ihrem Publikum eine enorme visuelle Wirkung verleihen.
CSS bietet verschiedene Funktionen und Übergänge zu HTML-Elementen wie Animationen, Hover-Effekte, Neoneffekte usw. Daher werden wir diese Eigenschaften verwenden, um den Textaufteilungseffekt zu erstellen. In diesem Artikel besprechen wir, wie man mit CSS einen Split-Text-Effekt erstellt.
Horizontaler Textteilungseffekt
Teilen Sie Text, wenn der Cursor darüber schwebt. Dies wird als Teilungseffekt bezeichnet. Die horizontale Aufteilung des Textes erfolgt mithilfe von :before- und :after-Pseudoselektoren sowie Hover-Selektoren.
Pseudo-Selektor „:before“ – wird verwendet, um etwas vor dem Inhalt eines Elements einzufügen.
„:after“ Pseudoselektor – wird verwendet, um Inhalte nach dem Inhalt des Elements einzufügen. Das Inhaltsattribut gibt den Inhalt an, der nach oder vor dem ausgewählten Element geschrieben werden soll
„z-index“-Attribut – Wenn überlappende Elemente vorhanden sind, werden sie auf dem Stapel angezeigt. Um also zu entscheiden, welches Element oben im Stapel erscheint, geben wir ihm einen größeren Z-Index.
Werte können 1, 2, 3… sein. Sein Wert kann negativ sein, wenn Sie das Element unter einem anderen Element halten möchten. Sie weisen also einfach einen niedrigeren Z-Index-Wert zu
Schritte, die Sie befolgen müssen
Schreiben Sie Text, zentrieren Sie ihn und gestalten Sie ihn.
Verwenden Sie den :before-Selektor, um die erste Hälfte (obere Hälfte) des Textes auf Grau zu setzen.
Verwenden Sie den :after-Selektor, um graue Inhalte abzudecken.
Geben Sie jedem Selektor einen Z-Index, damit Ereignisse der Reihe nach geordnet werden.
Entdecken Sie Inhalte, indem Sie mit der Maus über den Text fahren und so einen horizontalen Split-Effekt erzeugen.
Beispiel
<!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>
Textsegmentierungseffekt
Lassen Sie uns nun besprechen, wie Sie den Effekt einer vertikalen Textteilung erzielen.
Schritte, die Sie befolgen müssen
Erstellen Sie ein Abschnittselement mit class="container". Gestalten Sie den Behälter entsprechend.
Erstellen Sie ein div-Element innerhalb des Abschnittselements. Erstellen Sie darin zwei p-Elemente. Position und Stil nach Ihren Wünschen. Diese p-Elemente enthalten den zu teilenden Text. Der Text wird einmal pro p-Element geschrieben.
Geben Sie dem Text mithilfe der Eigenschaft clip-patheine Form. Verwenden Sie dann die Transformationseigenschaft, um den Text beim Schweben zu übersetzen.
Beispiel
<!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>
Beschneidungspfadeigenschaften verwenden
Dieclip-path-Eigenschaft von CSS wird verwendet, um einen Beschneidungsbereich zu erstellen, der verwendet wird, um zu bestimmen, welcher Teil eines Elements auf der Webseite angezeigt wird. Die Teile innerhalb des Bereichs werden angezeigt, während die Teile außerhalb des Bereichs ausgeblendet werden.
Der WertClipping Path Polygon () ist eine der Formen, die in der Grundgeometrie verfügbar sind. Es ermöglicht uns, mit mehreren verschiedenen Sätzen von x- und y-Achsenwerten (in jeder beliebigen Einheit) zu arbeiten.
Grammatik
element{
clip-path: polygon (x y, x y, x y);
}
Anhand des folgenden Beispiels können wir diese Eigenschaft verstehen.
Beispiel
<!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="Wie erstelle ich mit CSS einen Textteilungseffekt?" >
<h4> Diamond shape polygon </h4>
<img src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo1" alt="Wie erstelle ich mit CSS einen Textteilungseffekt?" >
<h4>Star Shape Polygon</h4>
</center>
</body>
</html>
Fazit
Eines der wichtigeren Elemente der Benutzerfreundlichkeit im Webdesign ist die Lesbarkeit. Benutzer sollten Ihr Material leicht lesen und verstehen können. Wenn der Textinhalt Ihrer Website einzigartig ist, sind die Chancen hoch, dass die Website beliebt ist. Dies liegt daran, dass Text eines der häufigsten Elemente ist und auf den meisten Websites langweilig erscheint. Um die Aufmerksamkeit der Benutzer zu erregen, können Entwickler daher verschiedene und einzigartige Textschreibstile ausprobieren. Einer davon ist der Split-Text-Effekt.
In diesem Artikel haben wir verschiedene Möglichkeiten besprochen, um Split-Effekte für Text auf Webseiten zu erzeugen. Um eine horizontale Aufteilung zu erstellen, verwenden wir die Pseudoselektoren :before und :after. Um Teilungen verschiedener Formen zu erstellen, haben wir die CSS-Eigenschaft clip-path Polygon () verwendet.
Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Textteilungseffekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Warum gibt „element.style“ „Leer“ zurück, wenn Stile in einer externen CSS-Datei definiert werden?
- Ist es zulässig, Absatzelemente in Header-Tags in HTML5 zu verwenden?
- Wie füge ich mithilfe von CSS Abstand zwischen Zeilen in einer Tabelle hinzu?
- Wie erstelle ich ein responsives quadratisches Div mit gleicher Höhe und Breite?
- Wie erstelle ich ein Mehrfachauswahl-Dropdown mit Kontrollkästchenoptionen?