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
Talking about the practical application of html mailto (email)
As we all know, mailto is a very practical HTML ta...
HTML implements a fixed floating semi-transparent search box on mobile
Question. In the mobile shopping mall system, we ...
Example of how to mosaic an image using js
This article mainly introduces an example of how ...
Detailed explanation of function classification and examples of this pointing in Javascript
Three ways to define functions in JS Let me expla...
Solution for Vue routing this.route.push jump page not refreshing
Vue routing this.route.push jump page does not re...
How to configure Tomcat and run your first Java Web project on IntelliJ IDEA 2018
1 Download and start Tomcat Go to the official we...
Detailed tutorial on configuration method of Mysql 5.7.19 free installation version (64-bit)
Download mysql-5.7.19-winx64 from the official we...
How to completely uninstall Docker Toolbox
Docker Toolbox is a solution for installing Docke...
JavaScript implements large file upload processing
Many times when we process file uploads, such as ...
Implementing image fragmentation loading function based on HTML code
Today we will implement a fragmented image loadin...
Install Python 3.6 on Linux and avoid pitfalls
Installation of Python 3 1. Install dependent env...
Detailed explanation of the role of explain in MySQL
1. MYSQL index Index: A data structure that helps...
Detailed explanation of the use of MySQL group links
Grouping and linking in MYSQL are the two most co...
Detailed steps for installing nodejs environment and path configuration in Linux
There are two ways to install nodejs in linux. On...
Summary of CSS gradient effects (linear-gradient and radial-gradient)
Linear-gradient background-image: linear-gradient...