前沿設計推薦-純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文件，

/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
   content:"";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   bottom:-15px;
   left:50px;
   width:0;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#f3961c transparent;
}

逐步增強的注意事項

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

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

關於Firefox 3.0的警告

Firefox 3.0雖然支持CSS2.1偽元素但不支持其定位。

 

123

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