仅使用CSS3 / HTML5绘制图像的标准方法 - 例如：HTML 5徽标？

Question

在不使用<img>元素或使用canvas drawImage或使用图像资源的位图数据的情况下，在HTML 5中构建HTML 5徽标的最佳学术方法是什么。

换句话说，使用HTML 5，CSS3构建HTML 5徽标的方式是什么？我会想象DIV和画布是什么？我不是一个CSS3向导，它看起来相当令人生畏，比如100多行，知道一种解决这个问题的标准方法会很好。

这是一个非常有趣的编程问题。徽标本身非常酷，看起来非常HTML 5 / CSS3。

Answer 1

此单标记徽标可以帮助您 -

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; }

点击Here了解实时示例。

Answer 2

HTML5徽标是图形图像。只有一种语义正确的显示方式，即带有指向SVG格式图形的图像标记：

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

以某种其他方式显示它可能是一种学术编程练习 - 例如滥用CSS - 但这种方式在语义上是不正确的。画布也不正确，除非徽标有一些需要画布的动画或其他脚本行为。

您的问题与如何在不使用p标签的情况下以语义正确的方式插入正文的段落相同？答：你不能。您可以通过其他方式插入它，但这些方式在语义上不正确。