CSSのみでアナグリフ3D文字もどきを作る方法を解説 | 今更アナグリフ3Dとか言わないで・・・



  • 3dcss



3dcss

CSSのみでアナグリフ3D文字もどきを作ってみたので使う機会は少ないかもしれないですが紹介させて頂きます。※「もどき」です。アナグリフ3Dを完全再現ではありません。

では作っていきます。

アナグリフ3D文字の作り方

CSSの「text-shadow」を使えば簡単にできます。

フォントのサイズ35px・太さをboldに。文字間隔は5pxにしています。次に文字に影を付ける「text-shadow」を使います。「text-shadow」は「text-shadow: 横方向 縦方向 ぼかし 影の色;」の様に指定します。また、複数指定する場合カンマ「,」で区切ることで繋げて書くことができます。
左に4pxの#E80503・右に9pxの#05E9E3 を指定すると以下の様になります。


CSSのみでアナグリフ3D文字


色は「赤が2・青が5」の2px対5pxくらいがアナグリフ3Dに近い感じにできます。

  • ✔ 斜めにシャドウを入れる場合 (2px)

    CSSのみでアナグリフ3D文字

    ✔ ぼかしを入れる場合 (2px)

    CSSのみでアナグリフ3D文字

    ✔ 斜め・ぼかしを入れる場合 (2px)

    CSSのみでアナグリフ3D文字

    文字の間隔や文字の太さを変えていくと更にアナグリフ3D文字に近い物ができます。

    ✔ normalフォント

    CSSのみでアナグリフ3D文字

    フォントによって微調整が必要なので自分で調整するのが良いと思います。最近アナグリフ3Dを見なくなりましたね。時代の変化ってやつですかねぇ・・・

    以上、CSSのみでアナグリフ3D文字もどきを作る方法を解説でした。


    コメントしてね!