CSS3 new properties Text-shadow detailed and burning font combat development

Today we have a lot of programmers in the text to set the style, all feel no way. There are generally two situations:

1) Do not know what the text is about the style attributes;

2) Even with the help of the development tools, the specific meaning of the style attribute is still unclear, and the specific usage.

Today this article, I will lead you to receive CSS3 in the text style application of the super ability. Through wonderful examples, so that we re-understand the CSS3 text style, sincerely hope that everyone through this article, even if not proficient in CSS3 Text style application, will also be proficient in the application.

Example: How to use CSS3 to make burning fonts?

Before, if we want to display a burning text on the Web page, everyone's first reaction is to find the art, let the artist PS a picture. Although can be done, but this has brought a limitation is, if you want to another paragraph of text is the same burning style, it is not to find art? Furthermore, having one more picture means that the server request must be one more time, which also has some impact on the server.

CSS3 out, let the program ape very pleasantly surprised, we can directly use the CSS3 style attribute Text-shadow effect to achieve the same function, no longer need to bother art.

First of all, I'm going to take a look at what the text-related styling attributes are in CSS3 :

1. To set the text, the first thought must be font-related, such as I want to Arial, bold style of text, in fact, these are refers to the font style.

The font styles supported in CSS3 are shown in the following table:

Font-family	Font	Define the font type, and even with what font
Font-style	Font	Defines the style of the font, such as normal (default), Italic (italic, and so on)
Font-variant	Font	Defines the case of the font. such as normal (default), Small-caps (small caps font), etc.
Font-weight	Font	Define font weights, such as bold (bolded)
Font-size	Font	Defines the size of the font, such as 0.8em, 10px, etc.
Font	Font composite type	Of course, if you feel that the settings are annoying, you can directly use the font to set, the font can contain all the above style
Font-size-adjust	Font	Defines whether to force the same size for text
Font-stretch	Font	Define whether to stretch the deformed font horizontally

The style of the font, which begins with the font, is the basis for setting the text style.

2. When we set the basic style of the text according to the above style, but now I want to underline a piece of text, or let the distance between the text is a little bit farther, how to do it?

The following table is a text style property:

Word-spacing	Text	As the name implies, this is the set of clustering between the text
Letter-spacing	Text	This is the setting of the distance between characters.
Text-decoration	Text	We translate this word into Chinese as text-decoration, so if you want to underline or strikethrough the text, it is set by this property.
Vertical-align	Text	As the name implies, vertical-layout, meaning it is to set the text in the vertical direction of the layout, such as Middle,text-top,bottom,text-bottom, etc.
Text-align	Text	With vertical horizontal orientation, this property sets the layout of the text in the horizontal direction, such as left (aligned, default), center (center aligned), justify (justified)
Text-transform	Text	Set the case of text, such as uppercase (uppercase), lowercase (lowercase)
Text-indent	Text	Defines the first line indent of text
Line-height	Text	Sets the height of the text line, which is very effective in applying the vertical center of the element
Text-shadow	Text	Defines the text shadow or blur effect, which is introduced in Css2, CSS3 the property and adds an opacity style
Text-overflow	Text	Define how omitted text is handled
Direction	Text	Sets the flow direction of text, such as RTL (right-to-left inflow), inherit (obtained by inheritance)
Word-wrap	Text	Defines whether line wrapping is displayed when the text exceeds the width of the specified container

3. These are currently set text or text layout and display method, but now if you want to let the font display color, then how to do it?

The following is an enhancement of the processing of text colors in CSS3:

Color	Color	sets the color of the text display ( This is already available in Css1 )
Hsl	Color representation	HSL is the hue (H), saturation (S), luminance (L), which represents a wide variety of colors through the changes of these 3 color channels and their superposition
HSLA	Color representation	Hsla is based on HSL with transparency.
RGBA	Color representation	RGBA adds transparency processing on an RGB basis
Opacity	Color	Define the opacity of a color

Through the above, we have some basic understanding of the Text style properties, and now formally carry out today's burning font instance decomposition step trip.

Burning font, mainly used in CSS style Text-shadow shadow effect to achieve.

Text-shadow property, introduced in the CSS2, CSS3 and redefined it, increased the fuzzy radius, which gives us the convenience of flame effect.

The Text-shadow syntax is as follows:

Text-shadow: Offset on <x axis > <y Offset in axis direction > < Blur radius (can be omitted) > < shadow color (can be omitted) >;

Through its syntax, we know that if we don't need blur effects and colors, we can write text-shadow:1px 1px, which means that the shadow is offset by a distance of 1 pixels along the positive direction of the X, Y axis.

Here I would like to state that the position of the color value is not necessarily in the back, but can be placed in front, but the order of the offset and blur radius cannot be changed.

OK, let's start our Code tour, create the HTML page first, and the code looks like this:

<! DOCTYPE html> <meta charset= "utf-8″> <link rel= "stylesheet" href= "Styles.css" > <title> Shadow Effects </title> <body> <div class= "Container" > <a href= "http://www.itdriver.cn" > Actual combat Internet </a> </div> </body>

Next, we set the following style code in the external style file (I have commented on each line in the style):

body{/* set the background to black for easy viewing of flame effects */ Background-color:black; } . container{ font-family:serif,sans-serif,cursive; /* Set Font type */ height:400px;/* set height and line-height, is the text centered in the vertical direction of the container */ line-height:400px; font-size:80px; /* Set the font size */ Font-weight:bold; /* Bold font display */ Color:black; /* Set the text color to black to create a night effect */ Text-align:center; /* Set the text to be centered in the horizontal direction */ text-shadow:0 0 4px White, 0-5px 6px #FFE500, 2px-10px 6px #FFCC00, -2px-15px 11px #FFCC00, 2px-25px 18px #FF8000; }

Run the code, the burning text effect is out.

Using Text-shadow, we can also achieve the text protruding effect or luminous font effect and so on, we can start the brain, try it.

I will give you a more detailed explanation of the various properties of the font effects in the later chapters.

welcome everyone to join the Internet Technology Exchange Group: 62329335  

Personal statement: Share the blog, absolutely original, and strive to each knowledge point through the actual demonstration to verify.

This article is from the "http://itdriver.blog.51cto.com/9109476/1535765" blog, please make sure to keep this source.