CSSでテキストのデザインとしてどんなものができるか? 書きためていく感じで、作っていきたいと思います。text-shadowや回転関係はモダンブラウザにしか対応していませんので、ご注意ください、。
基本スタイル
まずは、何もなしの基本的な文字を設定しましょう。
CSSのコードはそれぞれ、デザインされた文字の下につけておきますから、適宜参考にしてください。
文字のデザイン
.kihon {font-family: "メイリオ", sans-serif; font-size: 40px; color: #339;}
右に傾けた文字
文字をイタリックのように右に少し傾けてみましょう。(英文字などはイタリックのフォントがあったりしますので、英文字の場合はそれを使うほうが良いかもしれません。)
この目的のためには、transormでskewXを使って角度を指定します。
文字のデザイン
.italic {font-family: "メイリオ", sans-serif; font-size: 40px; color: #339; transform: skewX(-20deg);}
縦長の文字
今度は文字を縦長にしてみましょう。これもやはりtransformでscaleを使います。scale(0.7,2)であれば、横方向は0.7倍、縦方向は2倍の意味です。小数も使うことができます。横方向を1以外にすると、横位置がずれますので、margin-leftを付けて調整しました。
文字のデザイン
.long {margin-left: -100px; font-family: "メイリオ", sans-serif; font-size: 40px; color: #393; transform: scale(0.7,2);}
下線を付けた文字
文字に下線をつけるのは、text-decorationを用います。text-decoration-colorで色が指定できます。
文字のデザイン
.underline {font-family: "メイリオ", sans-serif; font-size: 40px; color: #339; text-decoration: underline;}
中央に二重線を付けた文字
中央に取り消すように線をつける場合は、text-decorationで、line-throughを用います。そして、二重線の場合は、text-decoration-styleをdoubleにします。中央より少ししたの位置ですが、これが元の仕様です。
文字のデザイン
.through {font-family: "メイリオ", sans-serif; font-size: 40px; color: #37B; text-decoration: line-through; text-decoration-style: double; text-decoration-color: #2E2;}
影を付けた文字
文字に影をつけてみましょう。text-shadowを使います。ただし、これはモダンブラウザのみです。IEでは効きませんので注意してください。全てに効くようにするには、文字を二重に重ね合わせると良く似た効果が出せます。
文字のデザイン
.shadow {font-family: "メイリオ", sans-serif; font-size: 40px; color: #339; text-shadow: 4px 4px 2px #AAA;}
光彩を付けた文字
文字を少し光らせた感じにしてみましょう。text-shadowで、最初の二つの数値を0にすれば、ズレがなくなるため、文字の周りに均等に放射させることができます。
文字のデザイン
.kosai {font-family: "メイリオ", sans-serif; font-size: 40px; color: #339; text-shadow: 4px 4px 2px #AAA;}
白抜きにした文字
文字を白抜きにしてみましょう。しかし、正確には、ここでは縁取りをします。上下左右、それぞれの斜め方向の併せて8方向に縁取りを同時にするという考え方です。ここでは、映えるように背景の下半分を赤色にしました。
文字のデザイン
.white {font-size: 40px; font-weight: bold; width: 280px; color: rgb(255, 255, 255); text-shadow: 2px 2px 1px #333, -2px 2px 1px #333, 2px -2px 1px #333, -2px -2px 1px #333, 2px 0px 1px #333, 0px 2px 1px #333, -2px 0px 1px #333, 0px -2px 1px #333; background: linear-gradient(transparent 50%, #F00 50%);}
金色の文字
ゴールドの金属光沢のある文字です。ONE NOTESさんのサイトを参考にさせていただきました。文字の色をまず透明を意味するtransparentとして背景色の設定をしています。
文字のデザイン
.gold {font-size: 40px; font-weight: bold; color: transparent; background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); -webkit-background-clip: text;}
二重縁取りの文字
今度は縁取りを二重にしてみます。text-shadowで、8方向の縁取りに対して、さらに外側に8方向の縁取りを付け加えました。ピクセル数が大きくなると、少しずれるようですので、小さい値が良いようです。
文字のデザイン
.double {font-size: 40px; color: #F04; text-shadow: 2px 2px 0px #FFF, -2px 2px 0px #FFF, 2px -2px 0px #FFF, -2px -2px 0px #FFF, 2px 0px 0px #FFF, 0px 2px 0px #FFF, -2px 0px 0px #FFF, 0px -2px 0px #FFF, 4px 4px 1px #FC4, -4px 4px 1px #FC4, 4px -4px 1px #FC4, -4px -4px 1px #FC4, 4px 0px 1px #FC4, 0px 4px 1px #FC4, -4px 0px 1px #FC4, 0px -4px 1px #FC4;}
ラインマーカーのついた文字
ラインマーカーで強調した文字です。背景色の下半分を黄色にしました。
.marker {fwidth: 280px; height: 40px; line-height: 40px; font-size: 40px; color: #333; background: linear-gradient(#FFF 50%, #FF0 50%);}
奥行きのある文字
左端を起点として、Y軸の周りを回転させた作った奥行きのある文字です。
.wrap {perspective: 500;}
.perspect {width: 380px; height: 70px; line-height: 70px; font-size: 50px; color: #333; transform: rotateY(70deg); transform-origin: left; background: linear-gradient(90deg, #38F, #5AF);border: 2px #3CF solid;}
回転させた文字
文字を10度だけ回転させてみます。
文字のデザイン
.rotate {width: 300px; font-size: 40px; color: #333; background: #FF6; transform: rotate(20deg);}
X軸方向に回転させた文字
ちょうど道路に書かれた文字のように、文字を、底を起点として、X軸の周りに80度ほど回転させています。親要素で、perspectiveにより奥行きを与えています。
.wrap2 {perspective: 500;} .xrotate {padding-left: 10px; width: 300px; height: 80px; font-size: 40px; color: #333; line-height: 80px; background: #EDB; transform: rotateX(80deg) scale(1,3); transform-origin: bottom;}
上下二色に分けた文字
斜めの線の上下二色に色分けした文字です。何も指定しなければ水平線で分割されますが、ここでは5度の傾斜をつけてみました。
文字のデザイン
.two {padding-left: 10px; font-size: 40px; font-weight: bold; color: transparent; background: repeating-linear-gradient(20deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em);}
青白く光る文字
青白く光る文字です。text-shadowでマイナスの値を使って、文字の内側に白い部分を入れることで少し光っている感じを出してみようとしました。
文字のデザイン
.bluelight {padding-left: 10px; font-size: 40px; font-weight: bold; color: #CEF; text-shadow: -2px -2px 2px #FFF, -2px 2px 2px #FFF, 2px -2px 2px #FFF, -2px 0 2px #FFF, -2px 0 0 #FFF, 0 0 2px #FFF, 0 0 30px #00F}
浮き上がって見える文字
浮き上がって見える文字です。
文字のデザイン
.relief {padding-left: 10px; font-size: 40px; font-weight: bold; width: 300px; color: #AFC; text-shadow: -2px -2px 0 #FFF, 2px 2px 0 #4F6; background-color: #DFE;}
沈み込んで見える文字
沈み込んで見える文字です。。
文字のデザイン
.emboss {padding-left: 10px; font-size: 40px; font-weight: bold; width: 300px; color: #F8E; text-shadow: -1px -1px 1px #000, 1px 1px 0 #FFF; background-color: #FF99F5;}
まとめ
いかがでしたでしょうか。
モダンブラウザにしか対応しませんが、text-shadowを使うと、テキストの表現の幅は群と広がります。
イラストレーターほどではないとしても、しかし、それにかなり近づいた表現が可能となったのではないでしょうか。
また、CSSでデザインを行うと、同じクラス名のところは、一斉にデザインを変えられるというメリットがあります。
さらに、ホーバーエフェクトやCSSアニメーションで、効果自体を変更させることができれば、さらに新しいデザインの世界を切り開くことができます。
良いデザインを思いつけば、時々追加・修正していきますので、また再訪していただければ幸いです。