Fw: 那些 CSS 偽元素可以幫你做的 10 個效果

http://blog.mukispace.com/pseudo-elements-10-examples/

那些 CSS 偽元素可以幫你做的 10 個效果

BY MUKI · 2013.04.19

偽元素這東西也不是近幾年才熱門起來的，很多簡單的 trick 都可以透過偽元素實現。而新手在初學 CSS 時，應該不會主動寫到偽元素，但我相信大家應該很常在網頁上看到用 HTML + CSS 做出的酷炫效果，今天就跟大家分享到底哪些是利用偽元素做成的，有興趣的朋友可以再深入研究。

甚麼是偽元素 (pseudo-element)

在分享偽元素可以做的事情之前，先簡單跟大家介紹甚麼是 CSS 的偽元素 ?
中國字博大精深，當我們看到「偽」這個字就可以猜想的出來，偽元素就表示這個元素是假的、不存在的、不真實的。他不像<a>,<p>,<br>…這些元素，只要打在 HTML 文件裡，就可以在瀏覽器看到他們，但是偽元素不同，就算你在HTML文件輸入<::after>或是<::before>… 瀏覽器也不會鳥你的。

因此簡單來說，當跟 CSS selector 匹配的元素底下的節點要做些特殊處理時，就可以利用偽元素來幫我們做到這些效果。

相信看到這邊，大家一定都看不懂，所以我先介紹四個偽元素代表的意義，並放上一張示意圖，這樣大家應該會比較懂 XD~ (假使在這邊的符合元素為 <p> )

• ::first-line：可以給<p>的第一行定義樣式 (瀏覽器會隨著放大或縮小來換行)
• ::first-letter：可以給<p>的第一個字母定義樣式 (以英文來看是第一個字母；中文就是第一個中文字)
• ::before：可以在<p>之前插入樣式/內容
• ::after：可以在<p>之後插入樣式/內容
• ::selection：定義當使用者反白<p>時的樣式

(為了區分偽元素和偽類，CSS3 的 guildline 將偽元素的寫法修正，以往只要加一個冒號「:」，現在則是加兩個冒號「::」，部分可支援的瀏覽器包含 webkit, firefox, opera。)

以下為示意圖：

1.Example: 調整反白顏色

這應該是個大家都已經看到爛掉、用到爛掉的特效，但你知道他是用偽元素::selection做出來的嗎 :)

範例：

請將這串文字以反白觀看效果，如果你的瀏覽器有支援，反白後你會看到文字變成灰色，背景變成黑色的效果。

語法：

<style>
span.hightlight::selection {
background: #333;
color: #eee;
}
</style>

<span class="hightlight">請將這串文字以反白觀看效果，如果你的瀏覽器有支援，反白後你會看到文字變成灰色，背景變成黑色的效果。</span>

2.Example: 一個 DIV 有多個背景與多個邊框

利用::before以及::after做出重疊多個背景，甚至多個邊框的效果。

• 多背景範例
• 多邊框範例
• 原文與應用: Multiple Backgrounds and Borders with CSS 2.1

3.Example: 清除浮動(float)

以往我們在清除 float 的時候，多半會使用<div style="clear: both"> </div>或是<br clear="all" />，但是這樣會造成過多無意義的容器產生，以及<br>的濫用，為了避免這樣的狀況，我們可以使用::before以及::after幫我們清除 float喔。

範例：

頁面底部

語法：

<style>
    #wrap {background: #ccc;padding: 5px;}
    .left {background: #abcdef;float: left;width: 30%;height: 50px;}
    .right {background: #996600;float: right;width: 70%;height: 105px;}
    .footer {background: #800000;}
    /*clear float*/
    .clear::before, .clear::after {
        content: "";
        display: table;
    }
    .clear::after {
        clear: both;
    }
    .clear {
        zoom:1; /*IE6, IE7*/
    }
</style>
<div id="wrap" class="clear">
    <div class="left">左邊的 DIV</div>
    <div class="right">右邊的 DIV</div>
</div>
<div class="footer">
    頁面底部
</div>

4.Example: CSS GUI icons

利用::before以及::after做出一大堆 CSS GUI icons。跟前面提到的多邊框、多背景是同個作者，等等會再介紹他的另外一項神作。

• 範例
• 原文與應用: Pure CSS GUI icons

5.Example: 多種 CSS 對話框樣式

我真的覺得他很神，可以用::before以及::after做出那麼多好玩有趣的功能，簡直把偽元素用的出神入化。

• 範例
• 原文與應用: Pure CSS speech bubbles

6.Example: 隨著瀏覽器大小改變的偽元素

同樣也是用::before以及::after在人名的前、後加入 E-mail 的聯絡方式以及 icon，比較特別的地方是他還有結合 Media Queries，所以當瀏覽器改變大小時，所出現的樣式也不一樣。

• 範例 (記得調整視窗大小看效果)
• 原文與應用: CSS Media Queries & Using Available Space

7.Example: 透明漸變的按鈕

這效果有些像以前在作 Flash Button 時的滑入跟滑出，運用透明 & 漸變來達成「gleaming」的感覺。我們在偽元素::before裡面加入一個透明至白色的線性漸變(linear-gradient)，然後利用transition產生滑動效果，以及用absolute定位。
具體的效果與原始碼請看： Example of the gleaming button

8.Example: 來做一個彩帶吧

彩帶是一個可以廣泛運用在復古風網站，或者是小清新風格的網站上，如果可以利用偽元素 & CSS3 來實現，作成專屬於自己的 function 也很不錯喔！
在這個範例我們使用了 2 個 CSS selector: .ribbon以及.ribbon-content；前者用來作兩邊的三角彩帶，後者製作正方形框框下面的那個三角陰影。另外也用了z-index讓偽元素往下一層，造成視覺的三維效果。
具體的效果與原始碼請看： Example of the Ribbon

9.Example: 用偽元素作 tooltip

想要在文字段落裡面做個簡單的 tooltip 功能，不用去找 jQuery 套用半天啦，利用偽元素就可以輕鬆做到囉 :D

範例：

果利音找稱縣爸去資器首內己手處是，兩於花也不院利要被界相都會；請將滑鼠移到我身上小務客想節國術助命內見究樣。

語法：

<style>
    .tooltip a {position: relative;}
    .tooltip a::before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #abcdef;
        position: absolute;
        left: 0%;
        bottom: 90%;
        content: "";
        height: 0;
        width: 0;
        opacity: 0;
        margin:0 0 20px 15px;
        transition: all 0.4s ease;
    }
    .tooltip a::after {
        border-radius: 5px;
        background: #abcdef;
        color: #000;
        position: absolute;
        left: 0%;
        bottom: 130%;
        content: attr(data-tooltip);
        white-space: nowrap;
        padding: 5px 15px;
        margin-bottom: 15px;
        opacity: 0;
        transition: all 0.4s ease;
    }
    .tooltip a:hover::before {bottom: 65%;}
    .tooltip a:hover::after {bottom: 90%;}
    .tooltip a:hover::after, .tooltip a:hover::before {opacity: 1;}
</style>
<p class="tooltip">
果利音找稱縣爸去資器首內己手處是，兩於花也不院利要被界相都會；<a data-tooltip="可以放簡單的文字說明" href="#">請將滑鼠移到我身上</a>小務客想節國術助命內見究樣。</p>

10.Example: 用偽元素作 CSS 按鈕

最後呢，我們也可以用偽元素作出很多不同形狀的按鈕(請看圖片範例)，像是利用::before作出外框之外，還有凹凸效果的按鈕 (有點類似前面提到多邊框的變化)，或是疊了多層的立體陰影按鈕，有興趣的朋友可以直接連到原作者的文章學習喔。

• 範例
• 原文與應用: CSS BUTTONS WITH PSEUDO-ELEMENTS

以上十種偽元素的用法，不知道你曾經實做過幾個? 又會著聽過幾個呢? 如果還有其他更多的偽元素運用，也歡迎一起分享給大家喔 :DDDD