什么是在HTML5中构造HTML 5徽标而不使用<img>元素或使用画布drawImage或以其他方式使用图像资源的位图数据的最理想方式。仅使用CSS3/HTML5绘制图像的标准方法 - 例如：HTML 5徽标？

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

enter image description here

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

2013-03-11 Cris Stringfellow

你可以看看[this]（http://girliemac.com/blog/2012/03/24/making-chupa-chups-using-css3-pseudo-elements/）文章。会给你一些想法。 – Peon 2013-03-11 07:44:02

@DainisAbols这是一篇很棒的文章。 – 2013-03-11 07:45:13

达西克拉克纯css html5 logo http://darcyclarke.me/design/pure-css-html5-logo/ – Tomarinator 2013-03-11 08:50:51

这种单一的标签标志将帮助你 -

纯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对于活生生的例子。

来源

2013-03-11 07:44:34 Manoj

这就是一个非常棒的演示。倾斜给出想法。 – 2013-03-11 07:46:53

HTML5徽标是一个图形图像。只有一个显示其语义正确的方式，这是一个指向SVG格式的图形图像标签：

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

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

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

来源

2013-03-11 07:59:20

优秀点。我想我需要改变这个问题。 – 2013-03-11 08:02:00

注意：您也可以将SVG标记内嵌在HTML5文档中 – robertc 2013-03-11 11:30:36

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

回答

纯CSS

相关问题