漸進增強:純CSS聊天泡泡 [css3]

來源:互聯網
上載者:User

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

查看DEMO:純CSS聊天泡泡

原文:http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.