CSS3のアドバイス、画像がありません。ちょうどCSSです。

Question

css3を使用するだけで、画像を使わずに次のように作成できますか？

Answer 1

うん。ルックアップする必要のあるものは、グラデーション、テキストシャドー、2D変換です。

あなたは質問した質問に対する回答を受け入れることでよりうまく対応する必要があります。あなたが自分でそれをやろうとする努力を示していないなら、人々はあなたにコードを与えるつもりはありません。

Answer 2

はい、可能です。

CSSのボーダー半径、グラデーション、テキストシャドー、および@ font-faceは、あなたにはかなり邪魔になります。

これらの角度のついたタブは、正しく動作するには大変な苦痛になり、ブラウザ間の問題が発生する可能性があります。おそらくCSS transformを使用してそれらを取得することはできますが、エッジに別々のDOM要素が必要です。そうしないと、テキストも同様に変換されます。

タブの下部にある外向きのカーブも厄介です。私はそれを達成するための簡単な方法を見ることができません。

単純にCSSエクササイズではなく、イメージなしでそれを行うことを前提とすると、SVGを使用してより良い解決策を行うことができます。 SVGをページ内の要素として組み込むことができますので、別々のダウンロードは必要ありません。純粋なCSSよりもはるかに簡単な、望ましい結果を達成するにはかなり簡単です。

SVGはIEの以前のバージョン（IE8以下）では動作しませんが、CSS3について質問しているので、これは問題ではないと思います。問題がある場合は、RaphaelまたはSVG2VMLのようなライブラリを使用して、IEのためにSVGをオンザフライでVMLに変換することができます。