CSS3でスーパー戦隊ロゴ風の文字に装飾する方法
クリスマスシーズンを前に今年は高価な獣電竜「DXギガンドブラギオー」を投入してきました。昨年の「DXタテガミライオー」もこの季節でバスターマシンの中では一番高かったです。
そんなスーパー戦隊ですが、CSS3でそのロゴ風な文字を表現する方法を書いてみたいと思います。
スーパー戦隊のロゴとは？
そもそもスーパー戦隊のロゴとは、下記のようなものです。
スーパー戦隊シリーズのロゴの作り方 « OhayoThanks
スーパー戦隊のロゴの特徴
上記のリンクを眺めての特徴は下記の通り
- ぶっとい文字フォント
- 文字に縁取りがある
- 文字に奥行きがある
- 文字に傾きがある（文字の中央から端にかけて徐々に傾いていく）
- ●●戦隊の部分は黄色、●●マンとか●●ジャーの部分は赤が多い
1のフォント部分以外はCSS3で再現できそうですね。
以上を踏まえて、実際に文字を装飾していきます。
文字の縁取り
文字の縁取りはtext-shadowで行います。
text-shadow: -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff;
これで1pxの白い縁ができます。実際に表示してみると、こんな感じです。
テ
文字の奥行き
文字の奥行きもtext-shadowで行いますので記述を追加します。
text-shadow: -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff, 1px 1px 0px #000, 2px 2px 0px #000, 3px 3px 0px #000, 4px 4px 0px #000, 5px 5px 0px #000, 6px 6px 0px #000, 7px 7px 0px #000, 8px 8px 0px #000;
テ
文字の傾き
文字の傾きはtransform: skew(deg)で行います。
transform: skew(-15deg); -webkit-transform: skew(-15deg); -moz-transform: skew(-15deg); -o-transform: skew(-15deg); -ms-transform: skew(-15deg);
transform:rorateではなくskewなのがポイント。この場合x軸のみ-15度傾けています。
テ
文字を伸ばしてみる
さらにtransformにscaleを使えば文字を伸ばすことができます。
transform: skew(-15deg) scaleX(1.5) scaleY(1.2); -webkit-transform: skew(-15deg) scaleX(1.5) scaleY(1.2); -moz-transform: skew(-15deg) scaleX(1.5) scaleY(1.2); -o-transform: skew(-15deg) scaleX(1.5) scaleY(1.2); -ms-transform: skew(-15deg) scaleX(1.5) scaleY(1.2);
この場合X軸1.5倍、Y軸1.2倍です。
テ
これで1文字分は完成です。
あとは他の文字も同様にして色、傾き、大きさ等を変えていけばこんな感じのものができあがります。
還
暦
戦
隊
テ
ー
ネ
ン
ジ
ャ
ー
いかがでしょうか。戦隊っぽくなったでしょう。letter-spacingの調整もいれて余分な隙間もなくしています。
特徴その1のぶっとい文字だけは、あれこれフォントを試してもしっくりきませんでした。
そこで、カタカナ部分だけWEBフォントを頑張って作って、角度とかも勝手に調整してくれるこんなサイトを作りました。
どうぞよろしく。
