css3の簡単なグラフィック描画チュートリアル

CSS は Cascading Style Sheets (英語の正式名: Cascading Style Sheets) で、HTML (Standard Universal Markup Language のアプリケーション) や XML (Standard Universal Markup Language のサブセット) などのファイル スタイルを表現するために使用されるコンピューター言語です。 CSS は Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットすることもできます。 CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズ スタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能を備えています。

ここでは、CSS を使用してグラフィックを描画する方法を説明するいくつかの小さなケースを示します:

<style>
    #triangle {        width: 0;        border-style: solid;        border-width: 50px 50px 50px 50px;        border-color: red blue orange gray;
    }</style><div id="triangle"></div>

効果は次のとおりです:

<style>
    #triangle2 {        width: 0;        border-style: solid;        border-width: 50px 50px 50px 50px;        border-color: red red grey grey;
    }</style><div id="triangle2"></div>

効果は次のとおりです:

<style>
    #triangle3 {        width: 0;        border-top: 60px solid transparent;        border-right: 100px solid transparent;        border-bottom: 80px solid red;
    }</style><div id="triangle3"></div>

効果は次のとおりです表示:

<style>
    #triangle4 {        width: 0;        border-left: 50px solid transparent;        border-right: 50px solid transparent;        border-bottom: 100px solid red;
    }</style><div id="triangle4"></div>

効果は写真の通りです:

ハートの形を描きます

<style>
    #heart {        float: left;        width: 100px;        height: 90px;        position: relative;
    }    #heart:before,#heart:after {        position: absolute;        top: 0;        content: &#39;&#39;;        width: 50px;        height: 80px;        background: red;        border-radius: 25px 25px 0 0;
    }    #heart:before {        left: 14px;        transform: rotate(-45deg);
    }    #heart:after {        left: 36px;        transform: rotate(45deg);
    }</style><div id="heart"></div>

効果は写真の通りです:

矢印を描きます

<style>
    #arrow {        margin-top: 105px;        float: left;        width: 0;        border-left: 30px solid transparent;        border-right: 30px solid transparent;        border-top: 60px solid red;        position: relative;
    }    #arrow:before,#arrow:after {        position: absolute;        content: &#39;&#39;;
    }    #arrow:before {        border-left: 30px solid transparent;        border-right: 30px solid transparent;        border-top: 20px solid #fff;        left: -30px;        top: -61px;
    }    #arrow:after {        height: 120px;        border-left: 2px solid red;        border-right: 2px solid red;        left: -2px;        top: -161px;
    }</style><div id="arrow"></div>

効果は写真の通りです:

五芒星を描きます

<style>
    #star-five {        margin: 75px 0 55px 0;        float: left;        width: 0;        height: 0;        border-top: 66px solid red;        border-left: 100px solid transparent;        border-right: 100px solid transparent;        position: relative;
    }    #star-five:before,#star-five:after {        position: absolute;        content: &#39;&#39;;        border-top: 66px solid red;        border-left: 100px solid transparent;        border-right: 100px solid transparent;        top: -66px;        left: -100px;
    }    #star-five:before {        transform: rotate(-72deg);
    }    #star-five:after {        transform: rotate(72deg);
    }</style><div id="star-five"></div>

効果は写真の通りです:

バブルボックス/プロンプトボックスを描きます

<style>
    #prompt {        float: left;        width: 200px;        height: 100px;        margin: 20px 0 40px;        border-radius: 20px;        background: #669;        position: relative;
    }    #prompt:after {        position: absolute;        content: "";        width: 50px;        height: 120px;        border: 0 solid transparent;        border-right: 30px solid #669;        border-radius: 0 0 50px 0;        top: 0;        left: 0;
    }</style><div id="prompt"></div>

効果は次の通りです表示:

バルーンを描画します

<style>
   #balloon {        float: left;        width: 160px;        height: 160px;        background: #faf9f9;      
     border-radius: 160px 160px 64px 160px;        transform: rotate(45deg);      
       box-shadow: 0 0 100px 0 rgba(243,98,122,1) inset, 20px 20px 20px rgba(243,98,122,0.3);        position: relative;
   }    #balloon:after {        position: absolute;        content: &#39;&#39;;     
      border: 8px solid transparent;        border-right-color: rgba(243,98,122,0.88);    
          transform: rotate(45deg);        border-radius: 16px;     
             bottom: -2px;        right: -2px;
   }</style><div id="balloon"></div>

効果は次のようになります:

陰陽八卦を描画します

<style>
    #yin-yang {            float: left;            width: 48px;            height: 96px;            background-color: #fff;            border-style: solid;            border-color: #000;            border-width: 2px 50px 2px 2px;            border-radius: 50%;            -webkit-animation: Rotate 6s linear infinite; /*旋转*/
            position: relative;
        }        #yin-yang:before,#yin-yang:after {            position: absolute;            content: &#39;&#39;;
        }        #yin-yang:before {            width: 12px;            height: 12px;            background: #fff;            border: 18px solid #000;            border-radius: 50%;            top: 0;            left: 50%;
        }        #yin-yang:after {            width: 12px;            height: 12px;            background: #000;            border: 18px solid #fff;            border-radius: 50%;            top: 50%;            left: 50%;
        }
        @-webkit-keyframes Rotate {
            0%{transform: rotate(360deg)}
            100%{transform: rotate(0deg)}
        }
        @keyframes Rotate {
            0%{transform: rotate(360deg)}
            100%{transform: rotate(0deg)}
        }</style><div id="yin-yang"></div>

効果は次のようになります:

CSS は、次のスタイルの説明を提供します。 HTML マークアップ言語。その中の要素の表示方法を定義します。 CSS は Web デザインの分野における画期的な技術です。これを使用して小さなスタイルを変更し、それに関連するすべてのページ要素を更新できます。上に描かれた小さなグラフィックを見てください。すごいと思いませんか?これらのチュートリアルは非常にシンプルで、初心者が学ぶのに適しています。

関連チュートリアル:

CSSでテキストの色のグラデーションを実装する方法の例

CSSの詳細を詳しく説明

Webページの読み込み中にアニメーション効果を実装するCSSとJSの例

方法CSSを使って実装する 円形モーションボールの例

CSSでのセレクターの使い方のまとめ

以上がcss3の簡単なグラフィック描画チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。