An image free status indicator – using CSS3 and HTML5 alone.

When dealing with creating web applications, especially dashboards, there are many scenarios when one would like to visually represent the status of something. A nice “light bulb” or glass dot is great for this; a red or green status can easily be communicated this way.

When creating a web app, this can easily be done using an image of a colored dot. However, when dealing with mobile or modern web applications it can sometimes be desirable, or even necessary, to do this without the use of images. Luckily there is a way to accomplish this, and make it look great, without using any images at all; using HTML5 and CSS3 alone:


You can see a demo of this, and download the code, here:

To do this, first place this small amount of HTML on your page or in your app where you would like the status indicator to appear:

   <span class="dot"><span class="dot-inner"></span></span>

Second, copy and paste this CSS into your system’s style sheets:

.dot {
overflow: hidden;
border-style:solid;
border-width: 2px;
border-color: #666;
padding-top: 6px;
padding-left: 6px;
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
margin: 0.2em 0.4em 0.2em 0;
vertical-align:middle;
line-height: 32px;
background: #cccccc;
-webkit-box-shadow: inset 0 -6px 6px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 -6px 6px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.3), inset 3px 3px 6px rgba(255, 255, 255, 0.3);
}
.dot-inner {
background: white;
opacity:0.35;
filter:alpha(opacity=35);
-webkit-box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 1);
border-radius: 50%;
overflow: hidden;
width: 6px;
height: 6px;
display: block;
line-height: 0;
}
.dot-red {
background: #990000;
}
.dot-green {
background: #009900;
}
.dot-yellow {
background: #999900;
}
/** add more colors here if you need **/

That’s it, you are done. Refresh the page and you should see the glass dot. It will be gray (or “off”) by default. To change its color, simple add an extra class to the outer span as such:

Red - <span class="dot dot-red"><span class="dot-inner"></span></span>
Yellow - <span class="dot dot-yellow"><span class="dot-inner"></span></span>
Green - <span class="dot dot-green"><span class="dot-inner"></span></span>

One reason this may be preferred over images is in the case when a user may be zooming in or out of a page/application. Because this is not an image it will always look crisp and smooth, no image degradation. Also, you have the flexibility of changing the dot’s color simply by adjusting the style sheet, no need to create a new image to represent each new color. You can even do this programmatically using something like jQuery. This can be especially handy if you need to represent a wide range of colors.

I hope you find this helpful. Feel free to let us know if you use this technique in your own application.

Leave a Reply

Your email address will not be published.