In This Tutorial We Will Create Reflective Text Effect Using CSS
Getting started
It’s pretty easy to get started with Statusfy.
Create a new index.html file with this HTML code..
<div class="wrapper">
<div class="glow">Success</div>
<div class="glow-shadow">Success</div>
</div>
Create a style.css file with this CSS code.
*{
box-sizing: border-box;
}
body {
overflow: hidden;
margin: 0;
padding: 0;
}
.wrapper {
background-image: url(road.jpg);
background-color: #00000069;
background-blend-mode: color;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
aspect-ratio: 16/9;
position: relative;
width: 100%;
height: 100%;
overflow-x: clip;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 900;
font-size: 13rem;
font-weight: 700;
text-transform: uppercase;
perspective: 2.5em;
}
.glow, .glow-shadow {
position: absolute;
inset: 0;
display: grid;
place-content: center;
}
.glow {
background: inherit;
background-size: cover;
background-position: center;
background-clip: text;
-webkit-background-clip: text;
color:#00000000;
mix-blend-mode: plus-lighter;
-webkit-text-stroke: 0.012em #a87522;
filter: drop-shadow(0px 0px 5px hsl(248, 16%, 39%)) drop-shadow(0px 0px 10px hsl(248, 16%, 39%));
}
.glow-shadow {
color: #fff8f5;
mix-blend-mode: soft-light;
filter: brightness(2);
transform:translateY(10%) rotateX(81deg) scaleY(-1) translateY(-15%) scaleY(1.35)
}
then,
connect the style.css file in index.html file
I hope you know how to add css and js file in html. Or follow tutorial video..
0 Comments