How to create overlapping effect using HTML and CSS.

Hello besties, In this blog I'll be talking about how to create an overlapping effect using HTML and CSS. (this article is written with the new developer in mind)

Let's get into it, Open your code editor and save the files using their different code extensions. Don't forget to link your CSS file to your HTML file using the link tag. For the HTML part, create a div tag, then create span tags in it, like this;

<div>
    <span>E</span>
    <span>X</span>
    <span>T</span>
    <span>E</span>
    <span>N</span>
    <span>S</span>
    <span>I</span>
    <span>O</span>
    <span>N</span>
    <span>S</span>
 </div>

We are done with the HTML part, now we add a few styles using CSS,

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body{
    background-color: rgb(138, 48, 6);
}

div{
    position: absolute;
    color: rgb(199, 179, 182);
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
} 

div span{
    font-size: 15vw;
    font-weight: 900;
    text-shadow: 10px 5px 12px rgba(0, 0, 0, 1);
}

div span:not(:first-child) {
    margin-left: -40px;
}

This should be what your result looks like;

to give it a more overlapping effect, you can reduce the margin left; -38px, -36px.

div span:not(:first-child) {
    margin-left: -40px;
}

Super easy right? you can use styles like this on the Home page of your website, or on your login page, whatever suits you. I hope you learnt something new or refreshed your mind on something you already know. See you on the next beginner friendly article.

How To Create An Overlapping Letter Effect Using Html And Css.