:[Technical dry goods] CSS3 realizes text 3D effect-knowledge base免费ppt模版下载-道格办公

Some properties and tricks in CSS3. The following is a method to achieve text 3D effect: 1. First, create an HTML element containing text, which can be a`

We are in some In animated websites, some text with 3D effect is often seen, which can make the page more three-dimensional. Let's introduce how to make text with 3D effects on the page.

3D requires the use of CSS3text-shadow attribute, through which multiple shadows are added to the text, separated by commas, so that 3D Effect text.

text-shadowThe syntax of the attribute is as follows:

text-shadow: h-shadow v-shadow blur color;

Parameter description:

◇ h-shadow: Mandatory parameter, used to set the position of the horizontal shadow, can be negative.

◇ v-shadow: Required parameter, used to set the position of the vertical shadow, can be negative.

◇ blur: Optional parameter, used to set the blur distance.

◇ color: Optional parameter, used to set the color of the shadow.

For example, to display the 3Deffect of "tomorrow will be better" on the page, the implementation process is as follows:

（1）Create a new HTML file, write HTML code in the file, define a class< The span > attribute value is threeD<div> tag, set the text in this tag, the code is as follows:

01 <divclass='threeD'>

02 Tomorrow will be better

03 </div>

（2）Write CSS code in the page, first for The span>body element sets the style, defines the page background color and text color, and then sets the style for the div element, throughtext-shadow The attribute sets the shadow list to achieve the 3Deffect of the text. The key code is as follows:

01 < styletype='text/css'>

02 body {

03 background:#CCCCCC; /*Set page background color */

04 color:#FFFFFF; /*Set text color*/

05 text-align :center/* Set text to center*/

06 }

07 .threeD {

08 font-size:80px; /* Set font size */

09 font-weight:800;/*Set font weight*/

10 text-shadow: 1px 0px #009916, 1px 2px #006615, 3px 1px #009916,

11 2px 3px #006615 , 4px 2px #009916, 4px 4px #006615,

12 5px 3px #009916 , 5px 5px #006615, 7px 4px #009916,

13 6px 6px #006615 , 8px 5px #009916, 7px 7px #006615,

14 9px 6px #009916, 9 px 8px #006615, 11px 7px #009916 /*Set text shadow*/

15 }

16 </style>

The result of the operation is shown in the figure below.

Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Technical%20dry%20goods%20CSS3%20realizes%20text%203D%20effect.html