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
JavaScript ES new feature block scope
Table of contents 1. What is block scope? 2. Why ...
SQL insert into statement writing method explanation
Method 1: INSERT INTO t1(field1,field2) VALUE(v00...
How a select statement is executed in MySQL
Table of contents 1. Analyzing MySQL from a macro...
Detailed explanation of how to clear a few pixels of blank space under an image using CSS
Recently, a friend asked me a question: When layo...
Website construction experience summary
<br />What principles should be followed to ...
JQuery implements hiding and displaying animation effects
This article shares the specific code of JQuery t...
A brief discussion on the characteristics of CSS float
This article introduces the characteristics of CS...
mysql executes sql file and reports error Error: Unknown storage engine'InnoDB' solution
Find the problem I recently encountered a problem...
How to query the latest transaction ID in MySQL
Written in front: Sometimes you may need to view ...
Detailed explanation of the simple use of MySQL query cache
Table of contents 1. Implementation process of qu...
Detailed explanation of the EXPLAIN command and its usage in MySQL
1. Scenario description: My colleague taught me h...
Example of deploying MySQL on Docker
Table of contents 1 What is container cloud? 2 In...
Vue3 encapsulates its own paging component
This article example shares the specific code of ...
MySQL 5.7.17 compressed package installation-free configuration process diagram
There are two versions of MySQL database manageme...
About dynamically adding routes based on user permissions in Vue
Display different menu pages according to the use...