Contents
CSS Mirror reflection Text
Hi everyone form our team of Stack developing today we are showing to you a simple CSS trick to make your code looking wonderful. In this post we are making an demonstration of CSS Mirror reflection Text effect, this will be possible only if you use some CSS3 skills.
Since we have choose not use too much resource, for this simple effect, we have used only one file .html, and the style we have included or imported in the internal type, by entering the <style> tag. Also our HTML Document has only one element that has the text which we are about to style it, with this king of effect.
HTML and CSS Code Overall
<!DOCTYPE html>
<html>
<head>
<title>Text Reflect</title>
<style>
body{
background: #000;
}
.title {
color: #fff;
font-size: 100px;
font-family: sans-serif;
line-height: 80%;
font-weight: normal;
text-align: center;
margin-top: 13%;
-webkit-box-reflect: below 2px linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
</style>
</head>
<body>
<h1 class="title">Text Reflect</h1>
</body>
</html>Try It Now
The element that we are styling is <h1 class=”title”>Text Reflect</h1>, selecting by his class named class=’title’. The reflection style is almost like text-shadow css, but also you can find as text invert css. Since that the effect looks good on the dark background we have made the Parent element in this document, with background:#000 which mean Dark Absolute. Then we have styled the title class that in CSS we use the selector with point character so .title{}
We have gave to this element some properties, such as : color – white, the size of the font – 100px(Pixel). The type of font Sans-serif, a font that is rounded font, and its regular font, the distance between lines 80% of the total height of the self element, so the height of H1 element, the weight of element we gave the normal weight, the distance with top elements like 13% of total height of Body element.
The reflection effect will make it the CSS3 Property -webkit-box-reflect: below 2px linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.4)); The below means the direction of reflection, 2px means the distance of original and the reflection, and the 3rd attribute is the color which we have made to looks like the half of text is almost transparent.
CSS Mirror reflection Text
Thank you for reading our posts!
Do like find more about Mobile Gamming Website
Also you will find
- CSS shine effect
- Hamburger menu animation React
- tailwind hamburger menu animation