爱奇思

学习就是——从糊涂中慢慢走向清醒,然后再从清醒中慢慢走向糊涂,所以说我说它是一个O,只是圆的半径慢慢的扩大罢了!
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

渐进增强:纯CSS聊天泡泡 [css3]

Posted on 2010-06-04 10:44  牛牛博客  阅读(1859)  评论(0编辑  收藏  举报

聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见,但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript。而本教程中的各种聊天泡泡只需要使用到CSS2.1来构建,并用CSS3来增强效果。不使用图片,也不使用JavaScript和更加不使用当前语义没用到的HTML哦。
在CSS文件中有大量对代码的注释,可以让你方便的看懂这些代码。(译者:在翻译时作者要求DEMO页面要用原先的网址,所以这些注释没有翻译,当然当你看完本文,了解清楚实现方式,哪么不看注释也是可以看懂代码。)

查看DEMO:纯CSS聊天泡泡

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