前沿設計推薦-純CSS打造的非常流行的講話氣泡效果

語音氣泡是一種很流行的效果，在很多社交網站上可以看到評論使用這樣的效果來實現，對於遊客來說非常有吸引力，但我發現很多這樣的效果都是依賴於HTML或JavaScript來實現的非常麻煩。本教程包含各種形式的使用CSS 2.1與CSS3建立的漸進增強氣泡效果。純CSS3打造，沒有使用映像，沒有JavaScript，它可以應用到您現有的HTML當中。

示範：純CSS氣泡

支援：Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.。

漸進增強與虛擬元素

簡單的<div>Content</div>或 <p>Content</p>代碼，您可以產生語音泡沫的效果，如：

添加一個子項目，例如<blockquote><p>Quote</p></blockquote>你甚至可以產生語音泡沫的效果，如：

你可以根據自己的需要在現有的例子基礎上進行改造打造自己的元素代碼。關鍵是使用 :before和:after虛擬元素產生基本形狀。

通過應用CSS3屬性，如border-radius屬性和transform就可以產生更複雜的形狀和方位。

範例程式碼

這是一個例子，如何建立一個基本的語音泡沫形狀。進一步的樣本，可以查看示範頁和CSS檔案，

 1 /* Bubble with an isoceles triangle 2 ------------------------------------------ */ 3  4 .triangle-isosceles { 5    position:relative; 6    padding:15px; 7    margin:1em 0 3em; 8    color:#000; 9    background:#f3961c;10 11    /* css3 */12    -moz-border-radius:10px;13    -webkit-border-radius:10px;14    border-radius:10px;15    background:-moz-linear-gradient(top, #f9d835, #f3961c);16    background:linear-gradient(top, #f9d835, #f3961c);17 }18 19 /* creates triangle */20 .triangle-isosceles:after {21    content:"";22    display:block; /* reduce the damage in FF3.0 */23    position:absolute;24    bottom:-15px;25    left:50px;26    width:0;27    border-width:15px 15px 0;28    border-style:solid;29    border-color:#f3961c transparent;30 }

逐步增強注意事項

這個方法是漸進增強。我們看到的樣式層：“簡單的彩色框，，圓角矩形或圓形的漸層背景。這些瀏覽器的樣式，他們是能夠呈現的。

IE6和IE7不支援CSS2.1虛擬元素，將會忽略所有:before和:after聲明。它們沒有任何增強，但保留著基本的使用習慣。..

關於Firefox 3.0的警告

Firefox 3.0雖然支援CSS2.1虛擬元素但不支援其定位。

 

123

本文連結：前沿設計推薦-純CSS打造的非常流行的講話氣泡效果