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. Generally there are two situations: 1) Do not know what the text in the end of the style attributes, 2) Even with the help of the development tool automatic reminders, still unclear the specific meaning of the style attributes, and specific usage. Today this article, I will lead you to receive CSS3The ability to apply a text style. Through wonderful examples, to make everyone re-understand CSS3Text style, sincerely hope that everyone through this article, even if not proficient CSS3The application of text style will also be used skillfully. Instance: 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. CSS3Come out and let the program ape very pleasantly surprised that we can directly use CSS3Style attributes Text-shadow effect to achieve the same function, no longer bother the artwork. First of all, I'm going to take a look at CSS3, which text-related style attributes are supported in the end: 1. To set the text, the first thought must be the font-related, such as I want to Arial, bold style of text, in fact, these are refers to the font style. CSS3The following table shows the font styles supported in:

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
HSL	color notation	HSL is Hue (H), saturation (S), Brightness (L), A wide variety of colors are represented by the changes of these 3 color channels and their overlays
HSLA	color presentation Square Type	hsla is transparent processing on HSL basis
RGBA	color representation	rgba is added transparency processing on RGB
opacity	color	Define the opacity of the 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 * / } . 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 Font size * /* * Font-weight:bold font Bold * /color:black;/* Set text color to black to create night effect * /text-align:center;/* Sets 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.