3

什么是在 HTML 5 中构建HTML 5徽标而不使用<img>元素或使用 canvasdrawImage或以其他方式使用图像资源的位图数据的最具学术性的方法。

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

在此处输入图像描述

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

4

2 回答 2

8

这个单标签徽标将帮助您-

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

单击此处查看实时示例。

于 2013-03-11T07:44:34.903 回答
4

HTML5 徽标是图形图像。只有一种语义正确的方式来显示它，那就是使用指向 SVG 格式图形的图像标签：

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

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

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

于 2013-03-11T07:59:20.913 回答