cssの進化が凄まじい昨今。cssだけで作ったスロットゲームなんてのもあったりします。
私は加工の施された見出しを実装する際、基本はSVGやPNGで書き出す事が多いのですが、これはcssで出来るのだろうか?とふと疑問に思ったものが出てきました。
それが縁取り文字。
調べてみたら3パターン見つかったのですが、今回はcssだけでサクッと実装できる方法を2つご紹介します!
その①「text-stroke」を使って文字を縁取る
text-stroke: 1px #000;
-webkit-text-stroke: 1px #000;
白文字に黒のtext-strokeをかけています。
こちらは文字の内側に縁取られるため、太さを5pxにすると以下のようにつぶれてしまうので注意が必要ですね。
ちなみに、IEは非対応だそう…。
その②「text-shadow」を使って文字を縁取る
text-shadow: 1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;
文字の上下左右に影をつける方法です。
よーく見ると文字の角の線が繋がっていません。ちょっと不自然かも。
先程のコードの「text-shadow」1行目を3pxにして、右下に影を落としてみました。これは遊べる!
IE10以降であれば対応しているようなので、意外と実用的かもしれませんね。
text-strokeとtext-shadowをかけ合わせておしゃれな版ズレ文字を作っている方もいました。
おわりに
工夫次第で色んな表現ができるんだな〜と改めてcssに無限の可能性を感じ、感心してしまいました。
非対応ブラウザなどの制限はありますが、そのうち実務で役立つ日がくるかもしれません。
▼ Webデザインもコーディングもこれ1冊で学べます!オススメ。
created by Rinker
¥2,585
(2024/09/07 15:11:57時点 楽天市場調べ-詳細)
コメント