什麼是在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

相關問題