Barker Library - TA357.5.M84 Y46 2014

Dewey Library - HC79.T4 G645 2019

Astronauts aboard the International Space Station are using an ultra HD 4K camera to record experiments like this water bubble with an antacid inside.

UCLA’s Dr. Dennis Hong gives us a glimpse into a new project that could change the way we think about interactive gaming.

Melody Yang and her family hold numerous world records for their bubbles. She shows us how she makes some of the fun creations from their stage performance, the Gazillion Bubble Show.

Twitter and Square Cofounder and CEO Jack Dorsey spoke with WIRED’s Editor-in-Chief Nicholas Thompson as part of WIRED25, WIRED’s 25th anniversary celebration in San Francisco.

Sumpter, David J. T., 1973- author

This week we have stories on blocking dangerous or annoying distractions in augmented reality, gene therapy applied with ultrasound to heal bone breaks, and giving robots geckolike gripping power with Online News Editor David Grimm. Deputy News Editor Elizabeth Culotta joins Sarah Crespi to discuss a special package on human migrations—from the ancient origins of Europeans to the restless and wandering scientists of today. Listen to previous podcasts. Download the show transcript. Transcripts courtesy of Scribie.com. [Image: Public domain; Music: Jeffrey Cook]

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for each part of the effects.

Demo: Pure CSS speech bubbles

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

Progressive enhancement with pseudo-elements

With HTML as simple as <div>Content</div> or <p>Content</p> you can produce speech bubble effects like this:

Add a child element, for example, <blockquote><p>Quote</p></blockquote> and you can even produce speech bubble effects like this:

I’d encourage you to adapt the examples to your needs and use any other associated elements available to you in your existing HTML document. The key is to use the :before and/or :after pseudo-elements to produce basic shapes.

By applying CSS3 properties such as border-radius and transform you can produce more complex shapes and orientations. This is how the heart-shape in my CSS typography experiment was created.

Example code

This is an example of how to create a basic speech bubble with a few enhancements. For further examples see the demo page and the heavily commented CSS file that it uses.

/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background: linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}

A note on progressive enhancement

This approach is one of progressive enhancement. Styles are built up in layers from simple coloured boxes, to boxes with a “speech tick” of some kind, to rounded rectangles or circles with gradient backgrounds. Browsers render the styles that they are capable of rendering.

Browsers (such as IE6 and IE7) that do not adequately support CSS 2.1 or those (such as IE8) without support for the necessary CSS3 properties will not look broken; they will simply not get the full speech bubble effect. However…

A warning about Firefox 3.0

Firefox 3.0 supports the necessary CSS 2.1 pseudo-elements but does not support the positioning of generated content.

Some of the examples are close to what I consider to be unacceptably broken in Firefox 3.0. It is the only browser above 2% market share — currently at ~4% as of March 2010 according to NetApplications — that cannot handle even the basic speech bubble effects.

Before applying this technique, consider the importance of Firefox 3.0 support and the percentage of your visitors currently using this browser. Eventually it will become a rare browser but due to it’s partial CSS 2.1 support you should be aware that there is no graceful fallback for Firefox 3.0 when using this technique.

Textured metal surface could help control foams in industrial processes, like in bioreactors