In this tutorial ,how to create a overlap effect using html and css. An element with the position absolute is related to nearest position and can overlap the elements in simply method.


overlap effect using html and css


Html Code:



<div class="sh_design">
<span>S</span>
<span>T</span>
<span>R</span>
<span>A</span>
<span>N</span>
<span>G</span>
<span>E</span>
<span>R</span>
</div>
<div class="th_design">
<span>T</span>
<span>H</span>
<span>I</span>
<span>N</span>
<span>G</span>
<span>S</span>
</div>



Style:


  
*
{
margin:0;
padding:0;
}

body
{
background-color:#1f1c32;
font-family: 'Poppins', sans-serif;
}
.sh_design{
position:absolute;
transform:translate(-50%,-50%);
top:32%;
left:50%;
width:100%;
text-align:center;
color:#fff;
}
.Th_design{
position:absolute;
transform:translate(-50%,-50%);
top:65%;
left:50%;
width:100%;
text-align:center;
color:#fff;
}
.sh_design > span{ 
color:transparent;
font-size:16em;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
 text-shadow:
            0.2rem 0.2rem 0.5rem rgba(255,255,255,0.3),
            0.2rem 0.2rem 0.5rem rgba(255,255,255,0.3),
            0 0 2rem  #FF4400,
            0 0 4rem  #FF4400,
            0 0 6rem,
            0 0 8rem,
            0 0 10rem;

}

.th_design > span{ 
color:transparent;
font-size:15em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
 text-shadow:
            -0.2rem -0.2rem 0.5rem rgba(255,255,255,0.3),
            0.2rem 0.2rem 0.5rem rgba(255,255,255,0.3),
            0 0 2rem  #FF4400,
            0 0 4rem  #FF4400,
            0 0 6rem ,
            0 0 8rem  ,
            0 0 10rem ;
}

.sh_design > span:not(:first-child){
margin-left:-0.15em;
}
.th_design > span:not(:first-child){
margin-left:-0.12em;
}
  
  


overlap effect using html and css


overlap Strokes:




.sh_design > span{ 
color:transparent;
font-size:16em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff; 
text-shadow: -0.08em 0.03em 0.10em rgba(0,0,0,0.9);
}

.th_design > span{ 
color:#transparent;
font-size:16em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
text-shadow: -0.08em 0.03em 0.10em rgba(0,0,0,0.9);

}


overlap effect using html and css


Overlap shadow Effect:



.sh_design > span{ 
color:#fff;
font-size:16em;
text-shadow: -0.08em 0.03em 0.10em rgba(0,0,0,0.9);
}

.th_design > span{ 
color:#fff;
font-size:16em;
text-shadow: -0.08em 0.03em 0.10em rgba(0,0,0,0.9);

}


overlap effect using html and css

Post a Comment

Previous Post Next Post