text-shadowを使ったおしゃれでかっこいいデザイン集！
text-shadowを使ったおしゃれでかっこいいデザイン集を紹介します。CSSのtext-shadowを使うことでおしゃれでかっこいいデザインを作成することができます。ここでは様々なおしゃれでかっこいいデザインを紹介します。
text-shadowを使っておしゃれでかっこいいデザインを作成したい
CSSのtext-shadowを用いるとおしゃれでかっこいいデザインを作成することができます。
今回はtext-shadowを使ったデザインについてサンプルコード付きで紹介していきます。
text-shadowのシミュレーションの仕方
今回紹介するコードはコピペですぐお試し頂けますが、text-shadowを調整するのはちょっとやり方が異なるので、Chromeのデベロッパーツールのtext-shadowのシミュレーションの仕方について最初に紹介しておきます。
まずはChromeのデベロッパーツールを開きましょう。
このようにtext-shadowの設定をCSSで適当に設定して、Chromeの検証ツールを用いて、text-shadowの横の二重四角ボタンを押すと上の画像のように、設定画面が開くので、そこでテキストにどのような影をつけるのか適宜調整してください。
それでは次の章からtext-shadowを使ったかっこいいエフェクトのデザインを紹介していきます。
text-shadowを使ったかっこいいエフェクトのデザイン集
ではコピペで使えるtext-shadowを使ったかっこいいエフェクトのデザイン集を紹介します。
色に関してはご自身の好みに合わせて適宜調整してください。
ネオンエフェクト
ネオンエフェクトがどのような感じなのかサンプルコードを用いて見てみましょう。
ネオンエフェクトを作成するためのCSSは以下のようになります。
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
font-size: 80px;
color: #fff;炎のエフェクト
炎のエフェクトを紹介します。
サンプルコードを用いてどのような挙動なのか見てみましょう。
炎エフェクトはかっこよくて個人的におすすめです。
炎エフェクトを作成するためのCSSコードはこちらになります。
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
font: 80px ‘League-Gothic’, Courier;
color: #fff;レトロなエフェクト
レトロなエフェクトについて紹介します。
まずサンプルコードを用いて、挙動を見てみましょう。
こちらのレトロなエフェクトのように文字を浮かび上がらせ、影をつけたようなテキストはよく使うのでおすすめです。
ではレトロなエフェクトを作成するためのCSSを紹介します。
text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
color: #d7ceb2;
font: 80px ‘BazarMedium’;
letter-spacing: 10px;文字を重ねるエフェクト
文字を重ねてヴィンテージ感を出したエフェクトについて紹介します。
ではサンプルコードを用いて挙動を見てみましょう。
文字を重ねるエフェクトのCSSは以下のようになります。
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
font: 80px ‘League-Gothic’, Courier;
color: #707070;ボードゲームのようなエフェクト
昔懐かしのボードゲームのようなエフェクトについて紹介します。
では実際にサンプルコードを用いて挙動を見てみましょう。
このように複雑に文字が重なり合ったエフェクトが出来ました。
ではCSSのコードを紹介します。
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
font: 80px ‘League-Gothic’, Courier;
text-transform: uppercase;
color: #fff;型押ししたようなエフェクト
最後に型押ししたようなエフェクトについて紹介します。
ではサンプルコードを用いて挙動を見てみましょう。
このように型押しされたようなエフェクトのCSSは以下のようになります。
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; color: #9c8468;
opacity: 0.3;
font: 80px ‘Museo700’;
background-color:#DEB887;まとめ
いかがでしたでしょうか？
text-shadowを用いることで、色んなパターンのおしゃれでかっこいいデザインを作成することができます。
ぜひここで紹介したデザインを試してみてください。
