CSS3 realizes text relief effect, engraving effect, flame text
|
To achieve this effect, you must first know a property of CSS: text-shadow: horizontal position vertical distance blur distance shadow color; The horizontal and vertical position values can be negative. You can use two sets of values to achieve a concave and convex effect, separated by a comma "," CSS3 realizes 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>Effect picture:
This concludes this article about how to use CSS3 to achieve text relief effects, engraving effects, and flame text. For more relevant CSS3 text relief content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: How to design MySQL statistical data tables
>>: Description of the execution mechanisms of static pages and dynamic pages
Recommend
React Router 5.1.0 uses useHistory to implement page jump navigation
Table of contents 1. Use the withRouter component...
Use the Linux seq command to generate a sequence of numbers (recommended)
The Linux seq command can generate lists of numbe...
Docker configuration Alibaba Cloud Container Service operation
Configuring Alibaba Cloud Docker Container Servic...
Sample code for programmatically processing CSS styles
Benefits of a programmatic approach 1. Global con...
Example code for using Nginx to implement 301 redirect to https root domain name
Based on SEO and security considerations, a 301 r...
A Guide to Optimizing High-Performance Websites
Golden Rules of Performance: Only 10% to 20% of e...
Introduction to Semantic XHTML Tags
The first point to make is that people can judge t...
How to remove the underline of a hyperlink using three simple examples
To remove the underline of a hyperlink, you need t...
An example of the difference between the id and name attributes in input
I have been making websites for a long time, but I...
Use of Linux date command
1. Command Introduction The date command is used ...
The iframe child page operates the parent page and implements the effect of shielding the page pop-up layer
Question: In index.html, iframe introduces son.htm...
JavaScript ES6 Module Detailed Explanation
Table of contents 0. What is Module 1.Module load...
Set the width of the table to be fixed so that it does not change with the text
After setting the table width in the page to width...
How to connect Django 2.2 to MySQL database
1. The error information reported when running th...
How to deploy stand-alone Pulsar and clustered Redis using Docker (development artifact)
Table of contents 1. Introduction: 2. Docker: 1 C...