Sliced text in CSS

20 Mar 2019

30 Jan 2020

Hi there,
This post will explain the creation of sliced texts in CSS as shown below

Sliced text preview

This is created using two span elements. The idea is to create a span element with 50% height and then expand its text to full height using pseudo-elements. overflow:hidden hides the overflowing part of the text.

The same step is repeated for the bottom part and it is moved a bit to the left, creating a sliced effect.

<div class="text">
    <span class="pseudo">Sliced</span>
    <span data-text="Sliced" class="part"></span>
    <span data-text="Sliced" class="part"></span>
</div>
.text {
    position: relative;
    display: inline-block;
    font-size: 3em;
    padding-right: 5px;
}

.text .pseudo {
    opacity: 0;
}

.text .part {
    width: 100%;
    position: absolute;
    height: 50%;
    overflow: hidden;
    top: 0;
}

.text .part:after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    
}

.text .part + .part {
    top: 50%;
}

.text .part + .part:after {
    top: -100%;
    left: 3px;
}

Which produces the below output.

A text-shadow can be added to the span to create a glitch like effect.

.text .part:after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    text-shadow: 2px 2px #ff0000, -2px -2px yellow;
}

Fiddle.

Comments

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Latest Posts

WordPress lazy load images with blur up technique

WordPress lazy load images with blur up technique

18 Mar 2020

Lazy loading images in WordPress with blur up technique.

Markdown comments in WordPress

Markdown comments in WordPress

18 Feb 2020

Implement markdown supported comments in WordPress using Parsedown.

Create options page in WordPress using free ACF

Create options page in WordPress using free ACF

17 Feb 2020

Create a custom settings page for your WordPress site using ACF free version.

Sidenav using pure css

Sidenav using pure css

20 Apr 2019

Pure CSS side nav with toggle controls.

Pure CSS modal

Pure CSS modal

19 Mar 2019

Pure CSS Modal with close/open buttons as well as click outside to close ability.

Create animated donut chart using SVG and javascript

Create animated donut chart using SVG and javascript

05 Feb 2019

Animated donut chart using SVG, javascript, and CSS.