Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Text Split effect using CSS?
Web design that is both beautiful and engaging has never been more valuable. There are numerous websites that may appear visually appealing. They are still not making a favourable impact on the audience. When a visitor arrives at your website, the first thing they notice is the appearance of your website. Typography is the visual representation of written text. It contains elements such as kerning and letter design.
In website design, fonts are more than just letters. The appearance of your website changes, just like it does when you alter the font color. Creating different effects like split to the text will create a great visual impact to the audience.
CSS offers various features and transition to the HTML elements like animations, hovering effect, neon effect etc., So, we will use these properties to create the text split effect. In this article, we will discuss about how to create split text effect using CSS.
Horizontal Split Effect on Text
Splitting of text while the cursor is hovered on it, is known as the split effect. Splitting the text horizontally will be done using :before and :after pseudo selectors as well as hover selector.
The “:before” pseudo selector − This is used to insert something before the contents of an element.
The “:after” pseudo selector − This is used to insert something after the contents of an element. The content property specifies the content to be written after or before a selected element
The “z-index” property − When there are overlapping elements, they appear in a stack. So, in order to decide which element will be present on the top of the stack, we give it a greater z-index.
Values can be 1, 2, 3…. Its value can be negative if you want to keep the element below the other one. So, you just need to assign a lower z-index value
Steps to be Followed
Write a text and place it in the center and style it.
Using :before selector, make the first half (top half) of the text to be gray.
Using :after selector, cover the gray content.
Give z-index to each selector so that the sequence of events is in order.
Uncover the content on hovering the text which gives 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>
Split Effect of the Text
Now, we will discuss about how to create split effect on the text vertically.
Steps to be Followed
Create a section element of class= “container”. Style the container accordingly.
Create a div element inside a section element. Create two p elements within it. Position and style according to your preferences. These p elements contain the text to be split. The text will be written once in each p element.
Use the clip-path property to give shape to the text. Then, use transform property to translate the text on hovering.
Example
<!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 clip-path property of CSS is used to create clipping region which is used to determine which part of the element will be displayed on the web page. Parts which are within the region will be displayed, whereas the parts outside the region are hidden.
Clip-path polygon () value is one of the shapes available in basic geometry. It enables us to manipulate several different sets of the values of x-axis and y-axis (in any unit).
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
One of the more crucial elements of usability in web design is readability. Users should be able to read and understand your material with ease. If the textual content of your website is unique, then then there are high chances of popularity of the website. This is because text is one the most common element which is left plain and dull in most of the websites. So, in order to grab users’ attention, the developers can try different and unique style of text writing. One of them is Split text effect.
In this article, we have discussed about the different methods to create split effect on the text in a web page. For creating horizontal split, we have used :before and :after pseudo selectors. For creating split in various shapes, we have used clip-path polygon () property of CSS.
1K+ Views
To Continue Learning Please Login