3

要素やキャンバスを使用せずに、または画像リソースのビットマップデータを使用せずに、HTML5でHTML5ロゴを作成する最も学術的な方法は何ですか。<img>drawImage

言い換えれば、HTML 5、CSS3を使用してHTML 5ロゴを正確に作成する方法は何ですか？DIVとキャンバスの描画を想像しますか？私は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ロゴはグラフィック画像です。それを表示するための意味的に正しい方法は1つだけです。それは、SVG形式のグラフィックを指す画像タグを使用することです。

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

たとえばCSSを悪用するなど、他の方法で表示するのは学術的なプログラミング演習かもしれませんが、その方法は意味的に正しくありません。ロゴにキャンバスを必要とするアニメーションまたはその他のスクリプト化された動作がない限り、キャンバスも正しくありません。

あなたの質問は、apタグを使用せずに本文テキストの段落を意味的に正しい方法で挿入するにはどうすればよいかということと同じです。回答：できません。他の方法で挿入することもできますが、それらの方法は意味的に正しくありません。

于 2013-03-11T07:59:20.913 に答える