CSS3のtext-shadowで色々な文字デザインを試してみる
久しぶりのcssネタです。
今回はcss3から追加されたtext-shadowを使って、画像を使わずにタイトルなどに使えそうな文字デザインを学んでみたいと思います。
遊んでみよう
text-shadowはcss3で追加されたプロパティです。
記述方法は下記の通りです。
text-shadow : 5px 10x 15px #666;
左から横方向へのズレ、縦方向へのズレ、ボカシ度合い、影の色を指定します。
＊1横方向は右がプラス、左がマイナスです。
＊2縦方向は下がプラス、上がマイナスです。
#text-shadowの指定方法 text-shadow : [横方向] [縦方向] [ボカシ具合] [色];
下準備
ベースとなるhtmlとcssを準備します。
webフォントを利用していますが、必須ではありません。
<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <link rel="stylesheet" media="all" href="style.css"/> <script>var __adobewebfontsappname__ = "code"</script> <script src="http://use.edgefonts.net/goblin-one:n4:all.js"></script> </head> <body> <article> <div class="box"><p class="title">NORMAL</p></div> <div class="box-one"><p class="title-one">ONE</p></div> <div class="box-tow"><p class="title-tow">TOW</p></div> <div class="box-three"><p class="title-three">THREE</p></div> </article> </body> </html>
@font-face {
font-family: 'goblin-one';
}
/*
* BASE STYLE
*/
.box,.box-one,.box-tow,.box-three{
border:1px solid #ccc;
font-family: 'goblin-one';
height:100px;
margin:20px;
position:relative;
width:200px;
}
.title,.title-one,.title-tow,.title-three{
font-size:26px;
position:absolute;
line-height:1;
margin-top:-10px;
text-align:center;
top:50%;
width:100%;
}
/*
* STYLE ONE
*/
.box-one{
}
.title-one{
}
/*
* STYLE TOW
*/
.box-tow{
}
.title-tow{
}
/*
* STYLE THREE
*/
.box-three{
}
.title-three{
}
色々追加してみる
text-shadowの追加を行って色々変化させてみます。
色情報はお好みで変えてみてください。
@font-face {
font-family: 'goblin-one';
}
・・省略
/*
* STYLE ONE
*/
.box-one{
background-color:#75e8f7;
}
.title-one{
color:#ddd;
text-shadow:0 1px 1px #000;
}
/*
* STYLE TOW
*/
.box-tow{
background-color:#5651db;
}
.title-tow{
color:#ddd;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #3bffe8,
0 0 40px #3bffe8,
0 0 50px #3bffe8,
0 0 80px #3bffe8;
}
/*
* STYLE THREE
*/
.box-three{
background-color:#61db61;
}
.title-three{
color : rgba(255, 255, 255, 0.2);
text-shadow:
0 0 5px rgba(255,255,255,.7),
0 0 15px rgba(255,255,255,.5),
0 0 25px rgba(255,255,255,.4),
0 0 100px rgba(255,255,255,.3);
}
プロパティの変化だけで色々なタイプの文字デザインを行うことが出来ました。
色々なデバイスに対応するのが当たり前になってきているので、出来るだけ活用したいプロパティですね!
google検索で調べるとサンプルがすぐに見つかるので、色々試してみてください。
このページを読んだ人にオススメのブログ記事です！
About The Author
