Text Slice Effect with HTML and CSS @rayen-code

Rayen

Delve into the realm of visual storytelling as we explore the art of creating a Text Slice Effect using HTML and CSS. In this tutorial, we'll unravel the secrets behind slicing text into pieces, adding a touch of flair and intrigue to your web design arsenal.




Step 1: HTML Markup:

Begin by structuring your HTML to incorporate the text element you wish to slice. Define the container and the text element, laying the foundation for your CSS magic.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 data-name="SLICE ME">SLICE ME</h1>
</body>
</html>

Step 2: Styling with CSS:

Infuse life into your text slice effect by adding styles with CSS. Customize the appearance and add animations to achieve a captivating slice effect.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #7ff8e4;
}
h1 {
    position: relative;
    font-size: 5rem;
    color: transparent;
}

h1::before,
h1::after {
    transition: 0.2s;
    content: attr(data-name);
    position: absolute;
    color: #ac4242;
    top: 0;
    left: 0;
    width: 100%;
}
h1::before {
    -webkit-clip-path: polygon(60% 0, 0 0 , 0 100%, 18% 100%);
    clip-path: polygon(60% 0, 0 0 , 0 100%, 18% 100%);
    /* background: red; */

}
h1::after {
    -webkit-clip-path: polygon(60% 0, 100% 0 , 100% 100%, 18% 100%);
    clip-path: polygon(60% 0, 100% 0 , 100% 100%, 18% 100%);
    /* background: green; */
}
h1:hover::before {
    top: -15px;
    rotate: -8deg;
}
h1:hover::after {
    top: 15px;
    left: 8px;
    rotate: 3deg;
}

In conclusion, the Text Slice Effect project adds a dash of visual flair to your web design, captivating your audience with its dynamic appeal. With the power of HTML and CSS, you can effortlessly elevate your website's aesthetics.

0 Comments