纯CSS实现对话气泡

By Nicolas Gallagher

纯CSS实现的对话气泡的演示页面。

更详细的解释请看CSS文件,里面已经详细的注释了。

所有的实例都只使用了简单的语义化的HTML。没有空的元素,没有不必要的多余元素,也没有javascript跟图片(除了那张Twitter图标)。看看源代码吧。

The basic bubble variants

This could be any element you want

This could be any element you want

This could be any element you want

This could be any element you want

This could be any element you want

This could be any element you want

This could be any element you want

This could be any element you want

This could be any element you want

This could be any element you want

This could be any element you want

This could be any element you want

Simple examples

125 comments

Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.

Ivan Chermayeff

It’s not what you look at that matters, it’s what you see.

Henry David Thoreau

Takes me longer to write up blog posts on experiments or projects than to create them in the first place.

@necolas at 4:05 PM March 2nd 2010

57

More complex CSS3 examples

Some more experimental speech bubbles that try to limit the damage in browsers lacking the necessary CSS3 support.

It doesn’t matter what the first child element of this div is...but it does need a child element.

This is a blockquote that is styled to look like a speech bubble

This is a blockquote that is styled to look like a thought bubble

No, Donny, these men are nihilists, there’s nothing to be afraid of.

Walter Sobchak

This is a blockquote that is styled to look like a speech bubble

This is a blockquote that is styled to look like a speech bubble

This is a blockquote that is styled to look like a thought bubble

阅读文章:纯CSS实现的对话气泡.

原文:Progressive enhancement: pure CSS speech bubbles.