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

來源:互聯網
上載者:User

語音氣泡是一種很流行的效果,在很多社交網站上可以看到評論使用這樣的效果來實現,對於遊客來說非常有吸引力,但我發現很多這樣的效果都是依賴於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打造的非常流行的講話氣泡效果

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。