Click here to Skip to main content
15,867,453 members
Articles / Web Development / HTML5
Tip/Trick

Advanced CSS3: pseudo-icons made of HTML5 div Elements

Rate me:
Please Sign up or sign in to vote.
4.59/5 (10 votes)
8 May 2015CPOL6 min read 40.3K   15   11
CSS3 technique utilizes HTML5 div elements to produce compact pseudo-graphics

Introduction

This advanced HTML5/CSS3 technique was briefly discussed in the IoT (i.e. "Internet of Things") contest submission article 'enRoute: Real-time NY City Bus Tracking Web App' [1], which describes real-time NY City bus monitoring web app.

Compact, Scalable and Flexible solution

Due to the real-time nature of the City bus tracking app [1], it was quintessentially important to minimize the web data traffic (inbound/outbound), thus it was highly desirable to avoid any use of graphic files and limit the data communication exclusively to the text. As a good auld saying goeth - 'the picture is worth a thousand words', but it also weighs lots a kilobytes (that part was omitted from the original word of wisdom). Even in a highly-compressed form, the image file could outweigh the entire textual communication packet by order of magnitude or more.

Ideally, the real-time data communication exchange would be comprised just of text; no graphic files transmitted to the client. In order to produce some aesthetic enhancement, certain grahic images are available as Unicode characters: the use of them will solve the problem in the best possible way. In case of no appropriate Unicode character available, the other two options would be either creating a custom graphic image file (bad from size/flexibility perspective), or to apply advanced CSS3 technique, which in many cases is capable to produce a desirable compact pseudo-icon graphic enhancements. Scalability and ease of modification via CSS3 statements (rather that image editing) are additional advantages of proposed solutions over the use of graphic files, as discussed below.

Background

The original CSS technique used to produce a bus pseudo-icon for a real-time City bus tracking application [1] is shown below:

Listing 1. Bus "pseudo-icon" made of HTML5 div and CSS3 (original solution)

HTML
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>BUS ICON</title>
    <style type="text/css">
        /* BUS ICON: SIZE 16PX, COLOR-BLUE */
        .b16 {
            width:12px;
            height:14px;
            border-top: 2px solid #000099;
            border-left: 2px solid #000099;
            border-right: 2px solid #000099;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            background:#f0f0f0;
        }
        .b16 .b {
            width:100%;
            height:4px;
            margin-top:4px;
            border-top: 2px solid #000099;
            border-bottom: 2px solid #000099;
            background:#ffff00;
        }
        .b16 .b .bb {
            background:#000099;
            width:6px;
            margin:0 auto;
            height:4px;
        }
    </style>
</head>
<body>
    <!-- BUS ICON 16px -->
    <div class="b16"><div class="b">
    <div class="bb"></div></div></div>
</body>
</html>

Corresponding to the Listing 1, "CSS3-synthesized" bus pseudo-icons look like the following:

""

Figure 1: Bus pseudo-icons made of HTML5 <div> elements w/CSS3 styling technique

Desirable bus pseudo-icon can be added to HTML5 document with this simple line:

HTML
<div class="b16"><div class="b">
<div class="bb"></div></div></div>

In addition to small digital footprint, this compact solution provides tremendous flexibility over the graphic-file counterpart: color theme and overall appearance can be easily changed by modifying just couple lines within HTML5/CSS3, instead of going to image editing for every change needed. This technique is further extended with advanced use of CSS3:before and :after pseudo-elements.

Using the Code

The refined CSS3 styling technique that allows creation of the bus 'pseudo-icons' by using :before and :after pseudo-elements is shown in the following Listing:

Listing 2. Bus pseudo-icon: HTML5 div w/CSS3 pseudo-elements (better solution)

HTML
 /* BUS ICON, HEIGHT 12PX */
.b12
{
    width                   : 8px;
    height                  : 10px;
    border-top              : 2px solid #000099;
    border-left             : 2px solid #000099;
    border-right            : 2px solid #000099;
    border-top-left-radius  : 3px;
    border-top-right-radius : 3px;
    background              : none;
    display                 : inline-block;
    vertical-align          : middle;
}

.b12:before
{
    content                 :'';
    display                 : block;
    height                  : 2px;
    margin-top              : 3px;
    border-top              : 2px solid #000099;
    border-bottom           : 2px solid #000099;
    background              : #ffff00;
}

.b12:after
{
    content                 :'';
    display                 : block;
    background              : #000099;
    width                   : 4px;
    height                  : 4px;
    margin                  : -5px auto;
}
/*circle to use w/b12*/
.b12C
{
    width                   : 18px;
    height                  : 18px;
    line-height             : 16px;
    vertical-align          : middle;
    text-align              : center;
    border-radius           : 12px;
    border                  : 2px solid #000099;
    background              : #fafafa;
}

Corresponding to the Listing 2, the bus pseudo-icons can be added to the Bing Map or any HTML5 document with a simple line:

HTML
<div class='b12'></div>

or, included in the circle:

HTML
<div class='b12C'><div class='b12'></div></div>

Suggested technique provides flexible and rather compact CSS3 alternative to graphic files. The following demo screenshot is linked to the real-time fully-operational web app utilizing the described technique.

Demo

The following sample screenshot of the real-time City buses tracking web application shows bus pseudo-icons produced by the advanced CSS3 technique described above in Listing 2 . Click on the image link to view the live demo of real-time NY City bus tracking app:

Image 2

Figure 2: Real-time NY MTA bus tracking app utilizes CSS3-generated bus pseudo-icons (shown in circles)

Flexibility and Scalability

Pseudo-icon solution is scalable and allows ease of customization: for example, the color theme can be changed just by couple lines in CSS stylesheet as shown in the following Listing 3 (HTML5+CSS3 encapsulated in a single file):

Listing 3. Bus pseudo-icon, flexible HTML5/CSS3 solution

HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ADVANCED HTML5/CSS3: BUS PSEUDO-ICONS MADE OF DIV</title>
    <style type="text/css">
        /* BUS PSEUDO-ICON, HEIGHT 1EM */
        .b1
        {
            display                 : inline-block;
            vertical-align          : middle;
            width                   : 0.8em;
            height                  : 0.8em;
            border                  : 0.2em solid;
            border-bottom           : none;
            border-radius           : 0.3em 0.3em 0em 0em;
        }
        .b1:before
        {
            content                 :'';
            display                 : block;
            height                  : 0.2em;
            padding                 : 0;
            margin-top              : 0.25em;
            border-top              : 0.15em solid;
            border-bottom           : 0.15em solid;
         }
        .b1:after
        {
            content                 :'';
            display                 : block;
            width                   : 0.4em;
            height                  : 0.4em;
            margin                  :-0.4em auto;
        }
        /*bus icon color*/
        .b1, .b1:before { border-color: #000099; }
        .b1:after {background : #000099; }

        /* BUS PSEUDO-ICON, HEIGHT 2EM */
        .b2
        {
            display                 : inline-block;
            vertical-align          : middle;
            width                   : 1.7em;
            height                  : 1.7em;
            border                  : 0.3em solid;
            border-bottom           : none;
            border-radius           : 0.4em 0.4em 0em 0em;
        }
        .b2:before
        {
            content                 :'';
            display                 : block;
            height                  : 0.4em;
            margin-top              : 0.6em;
            border-top              : 0.3em solid;
            border-bottom           : 0.2em solid;
         }
        .b2:after
        {
            content                 :'';
            display                 : block;
            width                   : 0.9em;
            height                  : 0.8em;
            margin                  :-0.8em auto;
        }
        /*bus icon color*/
        .b2, .b2:before { border-color: darkgreen; }
        .b2:after {background : darkgreen; }

        /*optional: headlights color*/
        .b2:before { background : Yellow;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Bus pseudo-icon, 1em, blue w/white headlights</td>
            <td><div class="b1"></div></td>
        </tr>
        <tr>
            <td>Bus pseudo-icon, 2em, green w/yellow headlights</td>
            <td><div class="b2"></div></td>
        </tr>
    </table>
</body>
</html>

The solution is using CSS3 'em' units for better scalability. Bus pseudo-icon color can be easily changed by the following two lines:

CSS
/*bus icon color*/
.b2, .b2:before { border-color: darkgreen; }
.b2:after {background : darkgreen; }

Optionally, headlights color can be specified via CSS3 property as following:

CSS
/*optional: headlights color*/
.b2:before { background : Yellow;}

The corresponding sample screenshot follows:

Image 3

Figure 3: Bus pseudo-icons sample screenshots

Points of Interest

I was very excited about exploring a seemingly limitless opportunity of the advanced CSS3 styling technique, particular important in a real-time web apps where data traffic/packet size is rather critical. More on this topic in my previous articles/tips [2,3].

Practical consideration

For didactic purpose the entire solution (see the code snipet in Listing 3) is encapsulated in a single HTML file with CSS stylesheet structured for a better readability with tab/spaces and additional comments. There are couple important practical consideration pertinent to a production-level implementation of this solution. First, all comments and extra tab/spaces can be removed in order to further reduce the overall size. Also, it's quite important to split the file into two: HTML file providing the content and a CSS file included into the main one w/ link rel statement as shown in the following Listing 4a,b:

Listing 4a: HTML file

HTML
<!DOCTYPE html>
<html>
<head>
    <title>ADVANCED HTML5/CSS3: BUS PSEUDO-ICONS MADE OF DIV</title>
    <link rel="stylesheet" type="text/css" href="BusIcon.css" />
</head>
<body>
    <table>
        <tr>
            <td>Bus pseudo-icon, 1em</td>
            <td><div class="b"></div></td>
        </tr>
        <tr>
            <td>Bus pseudo-icon, 2em</td>
            <td><div class="b" style="font-size:2em;"></div></td>
        </tr>
    </table>
</body>
</html>

Listing 4b: CSS style sheet in a separate file

CSS
/******************************************************************************
Module           :   BusIcon.css
Description      :   Bus pseudo-icon CSS3 style sheet
-------------------------------------------------------------------------------
Author           :   Alexander Bell
Copyright        :   2015 Infosoft International Inc
******************************************************************************/
.b
{
    display                 : inline-block;
    vertical-align          : middle;
    width                   : 0.8em;
    height                  : 0.8em;
    border                  : 0.2em solid;
    border-bottom           : none;
    border-radius           : 0.3em 0.3em 0em 0em;
}
.b:before
{
    content                 :'';
    display                 : block;
    height                  : 0.2em;
    padding                 : 0;
    margin-top              : 0.25em;
    border-top              : 0.15em solid;
    border-bottom           : 0.15em solid;
    }
.b:after
{
    content                 :'';
    display                 : block;
    width                   : 0.4em;
    height                  : 0.4em;
    margin                  :-0.4em auto;
}
/*bus icon color*/
.b, .b:before { border-color: #000099; }
.b:after {background : #000099; }

Separation of programming concerns, i.e. content (HTML) from presentation layer (CSS) is a well-known programming paradigm, particular important in this use-case. Major web browsers implement efficient caching technique, so the external CSS3 file (Listing 4b) typically will be cached upon first request, thus reducing the web traffic and giving  performance boost to the consequent data requests.

Another advantage of the proposed solution, as discussed above, lies in its flexibility/scalability: it's sufficient to specify just a single pseudo-icon CSS3 style, easily modifiable through the code, as shown in this example. In order to increase the size of bus pseudo-icon (to make it, for e.g. 2x of the base one) just apply a single CSS statement: font-size:2em; to the container div element: it could be done in the main HTML file (as shown here for the didactic purpose), or in the external CSS file, which is more appropriate for a production release.

Possible alternatives

As stated in a previous subchapter, the best possible scenario would be using ASCII or Unicode character if any appropriate one exists. Otherwise, this advanced CSS3 technique is an option providing rather compact, flexible and scalable solution. Other alternative exists, in particular, the ones discussed in comments thread. The first suggestion of using highly compressed graphic image/files lacks flexibility/scalability and adds significant labor overhead dealing with image editing. Using canvas drawing is another suggested alternative, which also lacks of any tangible merits: it requires additional javascripting and raises web browser compatibility issues. Beyond those suggestions, it seems like SVG could be a valid alternative to this CSS3-based pseudo-graphic solution (SVG topic  will be covered in a separate tip).

History

  • Mar 2015: First draft solution released as described in [1] (contest article)
  • Apr 2015: Advanced CSS3 technique applied to the original code in order to produce more flexible/compact solution
  • Apr 2015: Another sample code added providing increased flexibility (using 'em' units and simplified CSS3 color theming)
  • May 2015: Added code and guideliness pertinent to a production-grade solution.

References

  1. A.Bell, "enRoute: Real-time NY City Bus Tracking Web App" (Codeproject IoT contest submission)
  2. Advanced CSS3 Styling of HTML5 SELECT Element
  3. Toggle Button built on ASP.NET CheckBox and HTML5/CSS

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Engineer
United States United States
Dr. Alexander Bell (aka DrABell), a seasoned full-stack Software (Win/Web/Mobile) and Data Engineer holds PhD in Electrical and Computer Engineering, authored 37 inventions and published 100+ technical articles and developed multiple award-winning apps (App Innovation Contests AIC 2012/2013 submissions) Alexander is currently focused on Microsoft Azure Cloud and .NET 6/8 development projects.

  1. HTML5/CSS3 graphic enhancement: buttons, inputs
  2. HTML5 Tables Formatting: Alternate Rows, Color Gradients, Shadows
  3. Azure web app: Engineering Calculator VOLTMATTER
  4. Azure: NYC real-time bus tracking app
  5. Quiz Engine powered by Azure cloud
  6. 'enRoute': Real-time NY City Bus Tracking Web App
  7. Advanced CSS3 Styling of HTML5 SELECT Element
  8. Aggregate Product function extends SQL
  9. YouTube™ API for ASP.NET

Comments and Discussions

 
QuestionAlready Done (better?) Pin
Member 1157340812-May-15 0:02
Member 1157340812-May-15 0:02 
This is subject was already done by Twitter Bootstrap 3. They have many icons, which are just CSS3 Hex-Codes to get them. You should rather search the web before posting something like self-made CSS3 icons. I mean, there is a simplier method to get the same solution.
AnswerRe: Already Done (better?) Pin
DrABELL19-May-15 14:32
DrABELL19-May-15 14:32 
QuestionInteresting technique but does not solve the declared problem of minimizing web traffic Pin
shevyrov21-Apr-15 15:42
shevyrov21-Apr-15 15:42 
AnswerRe: Interesting technique but does not solve the declared problem of minimizing web traffic Pin
DrABELL28-Apr-15 10:50
DrABELL28-Apr-15 10:50 
GeneralRe: Interesting technique but does not solve the declared problem of minimizing web traffic Pin
jfriedman28-Apr-15 12:54
jfriedman28-Apr-15 12:54 
GeneralRe: Interesting technique but does not solve the declared problem of minimizing web traffic Pin
DrABELL28-Apr-15 13:23
DrABELL28-Apr-15 13:23 
GeneralRe: Interesting technique but does not solve the declared problem of minimizing web traffic Pin
jfriedman6-May-15 2:49
jfriedman6-May-15 2:49 
GeneralRe: Interesting technique but does not solve the declared problem of minimizing web traffic Pin
DrABELL6-May-15 7:18
DrABELL6-May-15 7:18 
GeneralRe: Interesting technique but does not solve the declared problem of minimizing web traffic Pin
jfriedman6-May-15 10:06
jfriedman6-May-15 10:06 
GeneralRe: Interesting technique but does not solve the declared problem of minimizing web traffic Pin
DrABELL6-May-15 15:37
DrABELL6-May-15 15:37 
GeneralRe: Interesting technique but does not solve the declared problem of minimizing web traffic Pin
jfriedman7-May-15 3:30
jfriedman7-May-15 3:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.