[18-3] CSS3で、テキストにシャドウをつけよう(text-shadow)

今日は、テキストにシャドウをつけてみましょう。
テキストシャドウはとっても簡単です。(IEは9まで未対応です)

CSSプロパティ text-shadow

本日のサンプルは [ 18-1 ] と同じです

★サンプルは [ 18-1 ] と同じです。
★このサンプル画像をクリックすると、HTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample18set.zip (4k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

テキストにシャドウの指定をしよう

サンプルではこのように、
<header>の<h1>のテキストにシャドウの指定をしています。

サンプルのテキストシャドウのCSSの指定はこのようにしています。

header h1 {
	color: #FFF;
	font-size: 2.8em;
	margin:5px;
	padding:0px;
	text-shadow: 0px 5px 5px #333;
}

ここでは、右方向へは0px、下へ5pxの位置に5pxの幅でぼかし、色は濃いグレー(#333)と指定。

テキストシャドウの指定のルール [ 1 ] 必要最低限の値

●必要最低限の指定
「(1) 右への水平方向」「(2) 下への垂直方向」「(3) 色指定」 この3つが最低必要な数値。
(1)と(2)はマイナスの値もOKです。(1)(2)は絶対この順に書きます。(3) は(1)(2)の前でも後でもOK。
3つの値で指定すると、こんなかんじ。ぼかしの無いシャドウです。

#samp1

上のサンプルのCSSの指定は下記。

#samp1 {
	color:#0CF;
	text-shadow: 2px 2px #333;
}

これが、下記のように色指定が最初に来てもOK。

#samp1 {
	color:#0CF;
	text-shadow: #333 2px 2px;
}

「(3) 色指定」は、省略も可能という資料もありましたが、省略すると webkit系の最新バージョン(2011年7月現在)で、テキストシャドウそのものが表示されなくなってしまうので、色も必要条件として参加させました。

ここで、ボックスのシャドウのように「拡張する幅」があると「袋文字」が簡単にできるのでイイ!と思ったけど、どうも無いみたいなんですよぉ〜拡張する幅は。あるといいのにね。

テキストシャドウの指定のルール [ 2 ] ぼかす幅

●ぼかす幅は3番目に書きます
「(1) 右への水平方向」「(2) 下への垂直方向」の直後に「ぼかす幅」という順番。
この3つの並び方は絶対不動このセットの前か後に色指定を入れます。

#samp2

上のサンプルのCSSの指定は下記。ぼかし幅を5pxにする事によって、文字が読みやすくなりました。

#samp2 {
	color:#0CF;
	text-shadow: 2px 2px 5px #333;
}

noneで影なしに戻せます

text-shadowも「none」を指定してあげれば、影なしに戻ります。

	text-shadow: none;

次回予告

いかがでしたか?
実はこのブログのタイトルもシャドウがついてたんですよ。 IEで見てる人は「読みにくいブログタイトルだなー」と思ってたかもですね。

次回は、円形(放射状)グラデーションをやってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.