CSS3 to achieve text relief effect, engraving effect, flame text

Time:2020-6-24

To achieve this effect, you must first know one property of CSS:

Text shadow: horizontal position vertical distance blur distance shadow color;

Values for horizontal and vertical positions can be negative

You can use two sets of values to achieve the bump effect, separated by commas “,” and

CSS3 to achieve text relief effect, engraving effect, flame text

<style>
        body{
            background: #ccc;     
            }
        div{
           font-size: 80px;      
           color: #ccc;         
        }
        .tu{       
           text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        .ao{        
           text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
        .fire{
            /* text-align: center; */
            Font: bold 60px Microsoft YaHei;
            color: #F00;
            padding: 30px;
            text-shadow: 0 0 4px #FFF, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 10px #f80, 2px -25px 20px #f20;
        }
    </style>
<body>
    <!-- box-shadow -->
    <!-- text-shadow -->
    <! -- relief -- >
    <! -- engraving -- >
    <! -- Flame text -- >
    < div class = "Tu" > raised text < / div >    
    < div class = "Ao" > concave text < / div >
    < div class = "fire" > flame text < / div >
    <!-- <div>TEXT SHADOW</div> -->
</body>

design sketch:

This article about CSS3 to achieve text relief effect, engraving effect and flame text introduces this. For more information about CSS3 text relief, please search previous articles of developepaer or continue to browse the following articles. I hope you can support developepaer in the future!

Recommended Today

What are the new methods of visual + map technology?

Last week, Ren Xiaofeng, chief scientist of Alibaba Gaode map, made a technical exchange with you on the development of computer vision related technology and the application in the field of map travel at the online live broadcast activity of “cloud dialogue” between senior students of Alibaba. The interaction between live broadcast is hot. Especially […]