偽元素在IE8之後全面都有支援,而這樣功能在CSS3可以創造出更多的效果。
圖片來源:動畫 火影忍者
本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-09-22 (建議使用Chrome瀏覽器)
偽元素在IE8之後全面都有支援,而這樣功能在CSS3可以創造出更多的效果。
偽元素介紹
在火影忍者中的鳴人,在劇情開始不久學會了強大的影分身術,透過影分身術這個忍術,鳴人可以額外創造出有戰鬥力的分身。而偽元素也是類似影分身術,在一個html的標籤內在新增至多兩個元素,透過這個元素我們可以做許多額外的變化,就像上面這個範例,鳴人是一個元素,在hover後可以再產生兩個元素,並且利用動畫來增加視覺效果。
偽元素的用法
<!--HTML-->
<div class="naruto"></div>
鳴人這一個範例中,只使用了一個div標籤,而左右兩個鳴人是是利用偽元素產生,如果需要使用偽元素,content: ""屬性則是重點,他可以產新的元素來使用。
/*重點css code/*
.naruto{
background-image: url("/images/naruto.png")
position: relative; /*相對位置*/
...
}
.naruto:before,.naruto:after{ /*選取.naruto的前方偽元素及後方偽元素*/
content: ""; /*產生一個空的元素*/
position: absolute; /*利用absolute定位*/
left: 150px; /*調整位置*/
background-image: (...) /*插入圖片*/
...
}
偽元素的位置
歌詞引用自:五月天 入陣曲
<!--HTML-->
<div class="mayday">心未涼</div>
在這個部分我用純文字作範例,偽元素我們可以假想它是在div標籤中新增before及after標籤,而它的位置會是在div標籤內的最前方及最後方,所以在使用必須切記它的位置,或者是用position: absolute,來忽略它所存在的位置。
<div class="mayday">
<before>淚未乾 </before>
心未涼
<after> 是什麼依然在滾燙</after>
</div>
偽元素的範例
歌詞引用自:五月天 入陣曲
//對話框
//sass code
$color: #f74b48
.box-withArrow
background: $color
color: white
+border-radius(5px)
position: relative
...
&:after
content: ""
width: 0
height: 0
position: absolute
left: 10px
bottom: -20px
border: transparent 10px solid
border-top: $color 10px solid
//繪製小箭頭,並且定位置左下方
//讓這一個框框就像是對話框呈現
偽元素的用途多不勝數,且只要在ie8以上就能夠執行,而在本篇會特別提及的原因,就是偽元素能夠過CSS3做相當多的變化,例如旋轉、陰影、漸層色甚至是結合動態效果,且偽元素也能適當的減少html的標籤使用,讓html的維護更輕鬆。