How to create text segmentation effect with CSS
How to Create a Text Breakup Effect with CSS
Web design that’s both aesthetically pleasing and appealing has never been more valuable. There are many websites that might be visually appealing, yet still fail to create a favorable impact on viewers. When visitors arrive at your website, the first thing they notice is your site’s appearance. Typography is the visual representation of written text. It encompasses elements like kerning and letter design.
In website design, fonts are more than just letters. Your website’s appearance can change, just like when you change the color of the font. Creating different effects for text, such as text segmentation, will create a strong visual impact for your audience.
CSS provides various functions and transitions for HTML elements, such as animations, hover effects, and neon effects. Therefore, we will use these properties to create text segmentation effects. In this article, we will discuss how to create text segmentation effects using CSS.
Horizontal Text Splitting Effect
Text splits when the cursor hovers over it. This is called a splitting effect. Use the :before and :after pseudo-selectors along with the hover selector to achieve horizontal text splitting.
- The :before pseudo-selector is used to insert something before an element’s content.
-
The :after pseudo-selector is used to insert something after an element’s content. The content property specifies the content to be written before or after the selected element.
-
**z-index ” property – **When there are overlapping elements, they appear in a stack. So, to determine which element will appear on top of the stack, we give it a higher z-index.
The value can be 1, 2, 3…. If you want this element to stay below the others, it can have a negative value. So, you just need to assign a lower z-index value.
Steps to follow
- Write a text, position it in the center, and style it.
-
Use the :before selector to make the first half (top half) of the text gray.
-
Use the :after selector Selectors, covering the gray content.
-
Give each selector a z-index so that the events are in order.
-
On hovering the text, reveal the content, creating a horizontal split effect.
Example
<!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>
Text Breakup
Now, we’ll discuss how to create a vertical breakup effect for text.
Steps to Follow
- Create a section element with class=”container”. Style the container accordingly.
-
Create a div element inside the section element. Create two p elements inside it. Position and style them to your liking. These p elements will contain the text you want to divide. The text will be written once within each p element.
-
Use the clip-path property to give the text shape. Then, use the transform property to translate the text on hover.
<!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>
Using the clip-path Property
The CSS clip-path property is used to create a clipping region, which determines which part of an element is displayed on a web page. The portion inside the region is displayed, while the portion outside the region is hidden.
The clip-path polygon() value is one of the shapes available in basic geometry. It allows us to manipulate several different values (in any unit) for the x and y axes.
Syntax
element{
clip-path: polygon (x y, x y, x y);
}
We can understand this property with the help of the following example.
Example
<!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">
<h4> Diamond shape polygon </h4>
<img src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo1">
<h4>Star Shape Polygon</h4> </center>
</body>
</html>
Conclusion
In web design, one of the most critical factors for usability is readability. Users should be able to easily read and understand your material. If your website’s textual content is unique, its chances of success are significantly higher. This is because text, while one of the most common elements, is often seen as bland and unremarkable on most websites. Therefore, to capture user attention, developers can experiment with different and unique text writing styles. One such approach is text segmentation.
In this article, we’ve discussed different ways to create text segmentation effects on web pages. To create horizontal segments, we used the :before and :after pseudo-selectors. To create segments of various shapes, we used the CSS clip-path polygon() property.