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

Source: Internet
Author: User
Tags color representation

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:
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.