シンプルウェイ制作班|WEB制作スタッフブログ

text-shadowを使ってテキストを装飾

2015年08月24日

CSS3のtext-shadowを使って、文字に影をつけたり、縁取りをする方法をご紹介します豆電球

text-shadowは文字に影を付けるプロパティです。
text-shadow: 横方向 縦方向 ぼかし 影の色;

【影】
text-shadow: 2px 2px 4px #000;
simple way


【文字の縁取り】
text-shadow:
1px 1px 1px #444,
1px -1px 1px #444,
-1px 1px 1px #444,
-1px -1px 1px #444;
simple way

【縁取り+影】
text-shadow:
1px 1px 0 #bfbfbf,
1px -1px 0 #bfbfbf,
-1px 1px 0 #bfbfbf,
-1px -1px 0 #bfbfbf,
4px 4px 4px #000;
simple way

【光る文字】
text-shadow: 0 0 10px #fff;
simple way

【浮き出る文字】
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
simple way

【へこんだ文字】
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
simple way

工夫次第で、色々な装飾が実現できそうですハート

同じカテゴリー(CSS)の記事画像
世界各国のwebデザイン~バレエ団編~
GIFじゃなくてもアニメーションができる!CSS3のキーフレームを使ったコマ送りアニメーション
サイトにひと手間!CSS3アニメーション
Webフォントを使ってみませんか
英数字で途中改行するスタイル
同じカテゴリー(CSS)の記事
 世界各国のwebデザイン~バレエ団編~ (2016-03-28 15:58)
 三角形の作り方 (2015-04-21 08:11)
 GIFじゃなくてもアニメーションができる!CSS3のキーフレームを使ったコマ送りアニメーション (2014-09-16 17:47)
 transformで回転したとき、ジャギるのを直す方法 (2014-09-01 12:12)
 サイトにひと手間!CSS3アニメーション (2014-02-17 18:18)
 Webフォントを使ってみませんか (2011-09-06 16:21)
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。

コメントフォーム

名前:
メール:
URL:
コメント:
上の画像に書かれている文字を入力して下さい

<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 1人
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。

このページの先頭へ