Wie erstelle ich mit CSS einen Textteilungseffekt?
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 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="Wie erstelle ich mit CSS einen Textteilungseffekt?" >
<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="Wie erstelle ich mit CSS einen Textteilungseffekt?" >
<h4 id="Star-Shape-Polygon">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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Was zum Teufel haben NPM -Befehle?
Mar 15, 2025 am 11:36 AM
NPM-Befehle führen verschiedene Aufgaben für Sie aus, entweder als einmalige oder als kontinuierlich ausgeführter Vorgang für Dinge wie das Starten eines Servers oder das Kompilieren von Code.
