純CSS實現聊天泡泡

來源:互聯網
上載者:User
聊天泡泡做為一種UI表現形式是廣大網民群眾所喜聞樂見,但許多教程實現它卻總是需要上使用非語義的HTML或者JavaScript。

聊天泡泡做為一種UI表現形式是廣大網民群眾所喜聞樂見,但許多教程實現它卻總是需要上使用非語義的HTML或者JavaScript。而本教程中的各種聊天泡泡只需要使用到CSS2.1來構建,並用CSS3來增強效果。不使用圖片,也不使用JavaScript和更加不使用當前語義沒用到的HTML哦。
在CSS檔案中有大量對代碼的注釋,可以讓你方便的看懂這些代碼。(譯者:在翻譯時作者要求DEMO頁面要用原先的網址,所以這些注釋沒有翻譯,當然當你看完本文,瞭解清楚實現方式,哪麼不看注釋也是可以看懂代碼。)

查看DEMO:純CSS聊天泡泡

純CSS聊天泡泡
只需要簡單的HTML代碼: <div>Content</div> 或 <p>Content</p> 就可以做出以下的聊天泡泡效果:如果再添加一個子項目,例如 <blockquote>Quote</blockquote> 再可以做出這樣的聊天泡泡效果:我建議您使用偽類 :before 和(或者) :after 來建立HTML文檔中沒有寫入的DOM並且用CSS來控制他們的表現。(譯者:這裡就是本文最為關鍵的一句話了,偽類在非IE的瀏覽器中競然可以在HTML中建立一個DOM元素,並且可以用CSS來控制哦~哪麼為什麼偽類會表形成一個DOM元素呢,可能瀏覽器為了實現偽類的效果而產生的,這裡則被作者發現並利用了。)
再使用CSS3中的 border-radius 和 transform 就可以來表現更為複雜的圖形,更詳情的說明請看《CSS typography experiment》(譯者:本文未翻譯)
範例程式碼
以下代碼主要是建立一個有幾個最基本的漸進增強型聊天泡泡的DEMO。更多的DEMO請看 純CSS聊天泡泡 及在 相關CSS檔案 使用。

/* 泡泡及小三角
------------------------------------------ */
 
.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);
}
 
/* 建立三角形(譯者:請注意這裡,這裡就是在控制偽類所建立的DOM元素) */
.triangle-isosceles:after {
content:"0a0";
display:block; /* 針對 FF3.0 */
position:absolute;
z-index:-1;
bottom:-30px;
left:50px;
width:0;
height:0;
border-width:15px 15px;
border-style:solid;
border-color:#f3961c transparent transparent;
}

一些說明:
本方法是一個漸進增強過程。首先是建立一個簡單的層,然後是用偽類來實現泡泡的“小三角”,然後用CSS3來實現圓角及漸層背景。層、偽類、圓角、漸層背景這四個特性會根據瀏覽器的渲染能力而有不同的體驗。
所以,不充分支援CSS2.1(如IE6和IE7)或不充分支援的CSS3(如IE8)的瀏覽器,他們將無法讓使用者體驗到出最好的效果。

關於Firefox3.0的提示:
FF3.0支援的CSS2.1的偽類產生的DOM,但不支援對產生的元素的定位。DEMO中的一些例子我認為在FF3.0中是不能接受的,即FF3.0不能處理最基本的聊天泡泡。根據NetApplications公司2010年3月的統計,FF3.0瀏覽器目前約有2%〜4%的市場份額。所以應用本技術之前,應該考慮FF3.0在你的訪問者中的重要性。不過,最終它將成為一種罕見的瀏覽器。但對於FF3.0本文中的技術沒有更好的支援方案。



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。