CSS3 Content Generation

Source: Internet
Author: User

Content is commonly used with: Before,:after to generate Content (IMG and input do not have this attribute), contents can generally be in the following four kinds:

    1. None: No value is generated.
    2. attr: inserting Tag property values
    3. URL: Inserts an external resource (image, audio, video, or any other resource supported by the browser) using the specified absolute or relative address
    4. String: Insert String
1 . Clearfix:after{2 content: "";3 Visibility:Hidden;4 Display:Block;5 font-size:0;6 Clear:both;7 Height:0;8}9 * HTML. Clearfix{Zoom:1; }/*IE6*/Ten *:first-child+html. Clearfix{Zoom:1; }/*IE7*/
attr: Insert tag attribute value Normal text demo

Green, take it to blue, and green Bluetooth, ice, water for it, and cold in water.

Css Code:

1 . Attr-title:after{ 2 content:attr (title); 3 color:#f00; 4 }

Picture slide over animation effect
#imghover Li{position:relative;Margin-right:20px;}#imghover A:after{content:attr (title);position:Absolute;Top:0; Left:0;width:100%;Background-color:Rgba (0,0,0,0.5);Line-height:30px;Color:#fff;text-align:Center;font-size:14px;Text-shadow:-1px-1px 0 Rgba (0,0,0,0.8);Opacity:0;-webkit-transition:All 0.3s Ease;-moz-transition:All 0.3s Ease;-ms-transition:All 0.3s Ease;-o-transition:All 0.3s Ease;transition:All 0.3s Ease;}#imghover A:hover:after{Top:50%;Margin-top:-15px;Opacity:1;}
View CodeURL: Inserts an external resource with the specified absolute or relative address
    • Source.txt
    • Source.doc
    • Source.pdf
    • Source.jpg
    • Mailto:marvin
#icon_list a{font-size:16px;}#icon_list A[href]:before{content:"';Margin-right:5px;}#icon_list a[href$= '. txt ']:before{content:URL (images/icon_txt.gif);}#icon_list a[href$= '. pdf ']:before{content:URL (images/icon_pdf.gif);}#icon_list a[href$= '. Doc ']:before{content:URL (images/icon_doc.gif);}#icon_list a[href$= '. jpg ']:before{content:URL (images/icon_pic.gif);}#icon_list a[href^= "mailto:"]:before{content:URL (images/icon_mailto.gif);}
View CodeString: Insert String

In fact, about the insertion string, the page structure has been applied a lot, the first is the H2 title to the left of the blue piece, the second is the mouse over the code area animation effect, the third is the footer part of the Emailto next to the small icon, if interested can be viewed with firebug view, This is mainly about how to use the content to do counter

    1. CSS3 New Selector
      1. Property Selector
      2. Structure pseudo-Class selector
    2. Enhanced text and color features
      1. Text shadow, text wrapping, overflow text
      2. RGBA Color Mode
    3. New Flexible box model
      1. Box layout
      2. Flexible layout combat
#counter Li{Margin-left:0;List-style:None outside None;counter-increment:Title1;}#counter Li:before{content:" counter (TITLE1)" chapter: ";font-size:14px;Color:#f00;}#counter Li Li{Margin-left:25px;counter-increment:Title2;}#counter Li Li:before{content:counter (title1) "." Counter (title2);}

    • The application of the Content counter can refer to these two articles CSS counters–the right-to Organize Your Ordered content,css Content, Counter-increment and Cou Nter-reset detailed

      inserting special characters

      At the end of this article, say how to insert special characters in the content, about the special characters can refer to here: HTML special characters, please first check the method, that is, the first column, the second column is used in HTML, you need to precede the &#; third row of CSS can be used, However, a backslash \ Escape is required. The following instance operation

      • CSS3 New Selector
      • Enhanced text and color features
      • New Flexible box model
      • Copyright
#special Li:before, #special li:after{Color:#f00;}#special Li:nth-child (2n+1): Before{Color:#ccc;}#special Li:first-child:before, #special li:first-child:after{content:"\25ba";}#special Li:first-child:after{-webkit-transform:Scale ( -1);-moz-transform:Scale ( -1);-ms-transform:Scale ( -1);-o-transform:Scale ( -1);Transform:Scale ( -1);}#special Li:nth-of-type (2): Before{content:"\2714";}#special Li:nth-child (3): after{content:"\00BB";}#special Li:last-of-type:before{content:"\00A9";Margin-right:5px;}

By the way, the sub-element selector for the next CSS3 is applied, and then for the first after arrow, by the scale of the transform-one turn around

More information
    • Pure CSS GUI Icons
    • Awesome:10 CSS3 Box Shadow experiments
    • Pure CSS speech bubbles
    • CSS3 ordered list styles
    • CSS3 breadcrumbs
    • Cool headings with pseudo-elements
    • A Whole Bunch of amazing Stuff Pseudo Elements Can do

This article excerpt from http://www.w3cplus.com/solution/css3content/css3content.html

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.