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
How to disable the automatic password saving prompt function of Chrome browser
Note: In web development, after adding autocomplet...
Even a novice can understand the difference between typeof and instanceof in js
Table of contents 1. typeof 2. instanceof 3. Diff...
Implementation of Redis master-slave cluster based on Docker
Table of contents 1. Pull the Redis image 2. Crea...
Example of MySQL slow query
Introduction By enabling the slow query log, MySQ...
Several ways to improve the readability of web pages
1. Use contrasting colours. The contrast here ref...
CSS example code to hide the scroll bar and scroll the content
Preface When the HTML structure of a page contain...
Solve the error "Can't locate ExtUtils/MakeMaker.pm in @INC"
When installing mha4mysql, the steps are roughly:...
In-depth analysis of Vue's responsive principle and bidirectional data
Understanding object.defineProperty to achieve re...
Example of downloading files with vue+django
Table of contents 1. Overview 2. Django Project 3...
How to clean up the disk space occupied by Docker
Docker takes up a lot of space. Whenever we run c...
Detailed explanation of Nginx Location configuration (Location matching order)
Location means "positioning", which is ...
A brief discussion on the problem of forgotten mysql password and login error
If you forget your MySQL login password, the solu...
8 tips for Vue that you will learn after reading it
1. Always use :key in v-for Using the key attribu...
Introduction to HTML link anchor tags and their role in SEO
The <a> tag is mainly used to define links ...
Vue+spring boot realizes the verification code function
This article example shares the specific code of ...