iT邦幫忙

DAY 7
3

CSS沒有極限系列 第 7

CSS沒有極限 - 別忘了偽元素

偽元素在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的維護更輕鬆。


上一篇
CSS沒有極限 - CSS3的色彩
下一篇
CSS沒有極限 - text-shadow初試身手
系列文
CSS沒有極限41

1 則留言

我要留言

立即登入留言