css3 content 產生內容

標籤：des   style   blog   http   color   使用   os   io   

content一般和:before,:after一起使用，用來產生內容(img和input沒有該屬性)，content的內容一般可以為以下四種：

1. none： 不產生任何值。
2. attr： 插入標籤屬性值
3. url： 使用指定的絕對或相對位址插入一個外部資源（映像，聲頻，視頻或瀏覽器支援的其他任何資源）
4. 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 */10 *:first-child+html .clearfix { zoom: 1; } /* IE7 */

attr： 插入標籤屬性值普通文字demo

青，取之於藍，而青於藍；冰，水為之，而寒於水。

Css Code:

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

 

圖片滑過動畫效果

#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： 使用指定的絕對或相對位址插入一個外部資源

• 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： 插入字串

其實關於插入字串，這個頁面結構已經應用了很多了，第一個是h2標題左邊的藍色一塊，第二個是滑鼠滑過代碼區的動畫效果，第三個就是footer部分的emailto旁邊的小表徵圖，如果有興趣可以用firebug查看查看，這個主要說下如何應用content做計數器

1. css3新增的選取器
   1. 屬性選取器
   2. 結構偽類別選取器
2. 增強文本和顏色功能
   1. 文本陰影，文本換行，溢出文本
   2. rgba色彩模式
3. 新增的彈性盒模型
   1. box布局
   2. 彈性布局實戰

#counter li{    margin-left:0;    list-style:none outside none;    counter-increment: title1;}#counter li:before{    content:"第"counter(title1)"章：";    font-size:14px;    color:#f00;}#counter li li{    margin-left:25px;    counter-increment: title2;}#counter li li:before{    content:counter(title1)"."counter(title2);}

 

• 關於content計數器的應用可以參考這兩篇文章CSS Counters – The Right Way to Organize Your Ordered Content，CSS content, counter-increment 和 counter-reset詳解

  插入特殊字元

  在這篇文章的最後，說下如何在content裡面插入特殊字元，關於特殊字元可以參考這裡：html特殊字元，請先查閱其實用方法，即第一列為符號；第二列為html中使用的，需在前面加上&#；第三排css中可以使用，不過需要反斜線\轉義。下面執行個體操作下

  • css3新增的選取器
  • 增強文本和顏色功能
  • 新增的彈性盒模型
  • 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;}

順便多應用了下css3的子項目選取器，然後對於第一的after箭頭，通過transform的scale為-1來左右調轉

更多資料

• 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

本文摘抄自http://www.w3cplus.com/solution/css3content/css3content.html