聊聊如何实现纯CSS聊天泡泡

view plaincopy to clipboardprint?
01./* 泡泡及小三角  
02.------------------------------------------ */  
03. 
04..triangle-isosceles {  
05.position:relative,老站长给09年的站长六个建议;  
06.padding:15px;  
07.margin:1em 0 3em;  
08.color:#000;  
09.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);  ,翻译google高效css 写法;
16.background:linear-gradient(top, #f9d835, #f3961c);  
17.}  
18. 
19./* 创立三角形（译者：请留神这里，这里就是在把持伪类所创建的DOM元素） */  
20..triangle-isosceles:after {  
21.content:"0a0";  
22.display:block; /* 针对 FF3.0 */  
23.position:absolute;  
24.z-index:-1;  
25.bottom:-30px;  
26.left:50px;  
27.width:0;  
28,群发外链和短期内增加大量外链其实不会被K.height:0;  
29.border-width:15px 15px;  
30.border-style:solid;  
31.border-color:#f3961c transparent transparent;  
32.} 
/* 泡泡及小三角
------------------------------------------ */

对于Firefox3.0的提醒：
FF3.0支撑的CSS2.1的伪类天生的DOM，但不支持对生成的元素的定位。DEMO中的一些例子我以为在FF3.0中是不能接收的，即FF3.0不能处置最基础的聊天泡泡。根据NetApplications公司2010年3月的统计，FF3.0浏览器目前约有2％〜4％的市场份额。所以利用本技巧之前，应当斟酌FF3.0在你的拜访者中的主要性。不外，终极它将成为一种常见的浏览器。但对FF3.0本文中的技术没有更好的支持计划。

/* 这里是用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);
}

假如再增加一个子元素，例如 <blockquote>Quote</blockquote> 再可以做出这样的聊天泡泡效果：

聊天泡泡看着是不是很美丽，这样的后果做为一种UI表示情势，宽大网民大众所脍炙人口，但很多教程实现它却老是须要上应用非语义的HTML或者JavaScript。而本教程中的各种聊天泡泡只要要使用到CSS2.1来构建，并用CSS3来增强效果。不使用图片，也不使用JavaScript跟更加不使用当前语义没用到的HTML哦。
在CSS文件中有大批对代码的解释，可以让你便利的看懂这些代码。（译者：在翻译时作者请求DEMO页面要用本来的网址，所以这些注解不翻译，当然当你看完本文，懂得明白实现方法，哪么不看正文也是能够看懂代码。）

查看DEMO：纯CSS聊天泡泡
纯CSS聊天泡泡
只需要简单的HTML代码： <div>Content</div> 或 <p>Content</p> 就可以做出以下的聊天泡泡效果：

/* 创建三角形（译者：请注意这里，这里就是在掌握伪类所创建的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,美观整洁的网页设计4原则.1（如IE6和IE7）或不充分支持的CSS3（如IE8）的浏览器，他们将无奈让用户体验到出最好的效果。

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

 
我倡议你使用伪类 :before 和（或者） :after 来创建HTML文档中没有写入的DOM并且用CSS来控制他们的表现。（译者：这里就是本文最为要害的一句话了，伪类在非IE的浏览器中竞然可以在HTML中创建一个DOM元素，并且可以用CSS来控制哦~哪么为什么伪类会表构成一个DOM元素呢，可能浏览器为了实现伪类的效果而发生的，这里则被作者发明并应用了。）
再使用CSS3中的 border-radius 和 transform 就可以来表现更为庞杂的图形，更详情的解释请看《CSS typography experiment》（译者：本文未翻译）

示例代码
以下代码重要是创建一个有多少个最根本的渐进增强型聊天泡泡的DEMO。更多的DEMO请看 纯CSS聊天泡泡 及在 相干CSS文件 使用。