CSS3 Bubble with no Images

Just like the ribbon banner from last month, this little tutorial doesn't serve much of a practical purpose—at least not on its own. I simply wanted to see if I could accomplish the task of illustrating a bubble (think soap bubble, not speech bubble) using only CSS3 and extremely minimal markup. Success was only a few box-shadows and pseudo-elements away.

I'm not the most practical of tutorialists, and I apologize in advance for that. There may be very little use for a CSS3 bubble (although it looks gorgeous on high-resolution screens, and is definitely a usable graphic), but the fact that it can be accomplished is a great thing in and of itself, as it shows that we web folks have the tools in hand now to be designing for the resolution-independent web of the future.

Also worth noting: I'm not bothering to make this thing scalable, so if you would like a different sized bubble, you can feel free to alter the CSS to your liking. Let's get going on this sucker.

First off, we're going to need some extremely basic markup. Literally one div with a class, folks.

html
<div class="bubble"></div>

See the Pen ce2d7b6584609adf3107502ec986a5fb by Jesse Couch (@designcouch) on CodePen.

Aww. Isn't it cute? I sincerely hope that doesn't need much explaining. On to the CSS.

As mentioned above, we're going to lean heavily on a few different CSS3 properties, and the pseudo-elements ":before" and ":after". Here's the code.

css
body {
background:#d7d7d7; /* a light gray background so that we can see the bubble in good contrast */
  display:flex;
  align-items: center;
  justify-content: center;
}

.bubble {
   width:200px; /* Our bubble will be 200px wide and 200px tall */
   height:200px;
   margin:50px auto;
   box-shadow:inset 30px 30px 75px rgba(0,0,0,.1), /* this gives us our subtle light gray background gradient */
              inset 0px 0px 15px rgba(0,0,0,.5), /* this gives us the darker gray border around the whole bubble */
              inset 0px 0px 55px rgba(255,255,255,.5), /* this gives us the more subtle white gradient all around the edge of the bubble */
              inset 3px 3px 5px rgba(0,0,0,.5), /* this gives us the slightly darker top left edge */
              0 0 50px rgba(255,255,255,.75); /* this puts a white glow all around the outside of the bubble to better contrast the edge */
   border-radius:100px; /* making our border-radius half the width/height ensures a perfectly round circle */
   background:rgba(255,255,255,.4); /* makes our bubble slightly lighter in color than the background */
   position:relative; /* allows us to absolutely position the pseudo elements within the bubble */
}

.bubble:before { /* adds the white highlight on the top left of the bubble */
   content:"";
   display:block;
   position:absolute;
   width:100px;
   height:100px;
   top:15px;
   left:15px;
   border-radius: 150px 50px;
   box-shadow:inset 10px 10px 50px rgba(255,255,255,.6);
}

.bubble:after { /* adds the darker lowlight on the bottom of the bubble */
   content:"";
   display:block;
   position:absolute;
   width:170px;
   height:170px;
   border-radius:170px;
   left:15px;
   top:15px;
   box-shadow:inset 0px -10px 10px rgba(0,0,0,.05);
}

See the Pen ce2d7b6584609adf3107502ec986a5fb by Jesse Couch (@designcouch) on CodePen.

Not too complex, right? The basic concept is that we're using box-shadow for the subtle gradients in the bubble, and then using the :before and :after pseudo-elements to add the highlight and lowlight. Do you follow? Good.

It's demo time.

demo

See the Pen ce2d7b6584609adf3107502ec986a5fb by Jesse Couch (@designcouch) on CodePen.

The support for this is not complete, so don't rely on it if you're beholden to Internet Explorer or older versions of the other big 3. Also, I've left vendor-prefixes for box-shadow and border-radius out (for the sake of keeping the code succinct) but you should definitely add them. Also, we're using rgba (for its transparency) and the support for this is not total either. Consider yourself warned!

Those of you practical folks who have made it this far are possibly asking yourself "why would I bother to use CSS when I have Photoshop?" Here's my answer. In case you haven't gathered, I'm all in when it comes to device-independence. I don't like having to code for any one browser, phone, computer or calculator (hehe) so I code for the most device support with one method. Using CSS for this illustration eliminates a request (the image we'd otherwise use) and it also provides us with a clean, crisp image regardless of the display resolution it's rendered on. In other words, the small amount of extra coding is worth it.

Any questions, comments, complaints—have at it below.

Did I help you out?

Read More

←  Moving from Print to the Web Why not Wordpress?  →

There are 4 comments. Add Yours.

A Note from the Moderator

Thanks for taking the time to comment! I'll respond as quickly as possible if necessary. In the meantime, please keep the following in mind:

  • All comments must be appropriate. I'll delete 'em if you get nasty.
  • Please allow for response time. I'm here as much as possible, but can't always respond as quickly as some would like.
  • Please stay on topic.
  • I don't work for free—if you want custom work, feel free to get in touch and I'll write up a quote!
  1. Princi Narula

    Princi Narula

    Jun 08, 2014

    Great Work..!!

    Awesome piece of CSS...

    Reply to Princi

    1. Jesse

      Jesse

      Jun 10, 2014

      Thanks, Princi. This was a lot of fun to figure out, even if it doesn't have much practical use.

    2. Princi Narula

      Princi Narula

      Jun 14, 2014

      Hey! Jesse, I agree css3 is complete fun.

      Your this piece of tutorial really helped me a lot and I am using it practically.

      Whenever I will be done I will surely share it with you.

      Thank You so much.. :)

  2. Tina

    Tina

    Mar 24, 2016

    Thanks for sharing this code! I used it to create silly bubble navigation:

    http://www.tinamkister.com/homework/p3_kister_tina/

    Reply to Tina