How to create CSS Mirror reflection Text [2022]

by stackdeveloping
0 comment 142 views
CSS Mirror reflection Text


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>
        <title>Text Reflect</title>
                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));
        <h1 class="title">Text Reflect</h1>

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

CSS Mirror reflection Text

Thank you for reading our posts!

Do like find more about Mobile Gamming Website

Soon you will see post related with:

  1. CSS shine effect
  2. Hamburger menu animation React
  3. tailwind hamburger menu animation

Other examples you may find on:

  1. CSS reflection generator
  2. text reflection css w3schools

You may also like

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More