DIV CSS 佈局教程網

css3提示框
編輯:HTML5特效代碼     
請使用支持CSS3的浏覽器查看本頁。

Pure CSS speech bubbles

By Nicolas Gallagher

All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.

The basic bubble variants

This only needs one HTML element.

For example, <p>[text]</p>.

But it could be any element you want.

The entire appearance is created only with CSS.

This only needs one HTML element.

For example, <p>[text]</p>.

But it could be any element you want.

The entire appearance is created only with CSS.

This only needs one HTML element.

For example, <p>[text]</p>.

But it could be any element you want.

The entire appearance is created only with CSS.

This only needs one HTML element.

For example, <p>[text]</p>.

But it could be any element you want.

The entire appearance is created only with CSS.

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved