Standard way to draw images using only CSS3/HTML5 - case in point : HTML 5 logo ?

Question

What is the most academic way to construct the HTML 5 logo in HTML 5 without using an <img> element or using canvas drawImage, or otherwise using the bitmap data of the image resource.

In other words what is a way to exactly construct the HTML 5 logo using HTML 5, CSS3 and I would imagine DIVs and canvas draws? I'm not a CSS3 wizard and it looks pretty daunting, say 100+ lines, it would be good to know a standard way to break this problem down.

It's quite an interesting programming problem. The logo itself is pretty cool, and looks very HTML 5/CSS3.

Answer 1

This single tag logo will help you-

Pure css

<div id="css3icon" />

CSS-

#css3icon {
    outline:solid 1px transparent;
    display:inline-block;
    position:relative;
    height:0.8em; width:0.8em;
    background:transparent;
    color:transparent;
    line-height:0.8em;
    overflow:visible;
    box-shadow:
        0.8em  0 0 #38c,
        1.4em  0 0 #38c,
        2em 0 0 #38c,
        2.6em 0 0 #38c,
        3.2em 0 0 #38c,
        3.6em 0 0 #38c,
        4em 0 0 #38c,
        4em 0.65em 0 #38c,
        0.8em 1.3em 0 #38c,
        1.4em 1.3em 0 #38c,
        2em 1.3em 0 #38c,
        2.6em 1.3em 0 #38c,
        3.2em 1.3em 0 #38c,
        3.6em 1.3em 0 #38c,
        4em 1.3em 0 #38c,
        4em 1.9em 0 #38c,
        0.8em 2.6em 0 #38c,
        4em 2.6em 0 #38c;
    transform: skewX(-12deg);
    -webkit-transform: skewX(-12deg);
    -ms-transform: skewX(-12deg);   
}
#css3icon:before {
    position:absolute;
    content:''; 
    display:block;
    height:0.8em; width:2em;
    margin:3.4em 0 0 0.8em;
    background:#38c;
    transform: skew(-1deg,18.4deg); 
    transform-origin: 100% 100%;
    -webkit-transform: skew(-1deg,18.4deg); 
    -webkit-transform-origin: 100% 100%;
    -ms-transform: skew(-1deg,18.4deg); 
    -ms-transform-origin: 100% 100%;
    border-right:solid 1px #38c;
}
#css3icon:after {
    position:absolute;
    content:''; 
    display:block;
    height:0.8em; width:2em;
    margin:3.4em 0 0 2.8em;
    background:#38c;
    transform: skew(1deg,-18.4deg); 
    transform-origin: 0% 100%;
    -webkit-transform: skew(1deg,-18.4deg); 
    -webkit-transform-origin: 0 100%;
    -ms-transform: skew(1deg,-18.4deg); 
    -ms-transform-origin: 0 100%;
}


body {
 width:100%;
 padding-top:1em;
 font-size:3em;
 text-align:center;
}
body > * { position:relative; left:-2.4em; }

Click Here For live example.

Answer 2

The HTML5 logo is a graphic image. There is only one semantically correct way to display it, and that is with an image tag that points to an SVG format graphic:

<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo.svg">

It might be an academic programming exercise to display it in some other way — for example by abusing CSS — but that way will not be semantically correct. Canvas would also not be correct, unless the logo had some animation or other scripted behavior that required canvas.

Your question is the same as saying how can I insert a paragraph of body text in a semantically correct way without using a p tag? Answer: you can't. You can insert it in other ways, but those ways will not be semantically correct.