短くて超簡単!CSS「text-shadow」で3Dテキストを作る方法を教えるよ。



  • css3dtte



css3dtte

CSSだけで3Dテキストを作る方法を教えるよ。誰でも理解できるように細かく書くのでこれで理解できなかったら諦めてね!(笑)

いきなりSourceコード! バンッ!

Baidu-IME_2014-8-31_17-45-25

いきなりSourceコードです!上記の3Dテキストなら、たったこれだけの短いCSSで作る事が可能です。
コピペして自由に使っちゃってください。この記事ではCSSの基本的な事は省きます。

今回は「text-shadow」でテキストに影を付ける事で3Dテキストを作っているので下記の「text-shadow」の部分を説明をします。



  • 「text-shadow」を詳しく

    ✔ アングル – 影効果のアングルです。

    aidu-IME_2014-8-31_17-45-25

    上記画像の青い部分をどの角度からにょろっと出すかというCSSは下記です。光と影(太陽と影)だと思っていいです。

    ・ 0°

    ・ 45°

    ・ 90°

    ・ 135°

    ・ 180°

    ・ 225°

    ・ 270°

    ・ 315°

    ・ 360°




    ✔ 影の透明度 – 影効果の透明度です。 – rgba(0,0,0,0.1)

    影の透明度を指定します。数が小さい程、透明に近く大きい程、非透明です。
    また、100の場合、下記の様に指定しなくても問題ないです。

    ・ 透明度 0

    ・ 透明度 100

    今回、シャドウのグラデーションは記事が長くなりそうだった為書きませんでした、要望があれば書きます。


    コメントしてね!