第10回　CSS3はここがすごい【プロパティ編2】テーブルレイアウトを卒業しよう

CSS3はここがすごい【プロパティ編2】

全2回で予定していましたが、もう少し続きます。

今回はCSS3から定義されたセレクタをご紹介する予定でしたが、もうちょっとプロパティについて取り扱います。

opacity

opacityプロパティは、不透明度を定めるプロパティです。値は、0で完全な透明、1で完全な不透明となります。対象は基本的になんでもOKです。（もちろん目に見える要素が対象です）

使い方はこんな感じ。

<div id="container">
    <div id="box1">
        box1
    </div>
    <div id="box2">
        box2
    </div>
    <div id="box3">
        box3
    </div>
    <div id="box4">
        box4
    </div>
</div>

#container {
    background: url(bg.gif);
    width: 400px;
    height: 200px;
}

#box1,#box2,#box3,#box4 {
    background: #333;
    color:#FFF;
    padding: 12px;
    float: left;
    width: 76px;
    height: 76px;
}
#box1 {
    opacity: 1;
}

#box2 {
    opacity: .7;
}

#box3 {
    opacity: .2;
}

#box4 {
    opacity: 0;
}

Firefox 3でCSS3のopacityプロパティ

Google Chrome 2でCSS3のopacityプロパティ

Safari 4でCSS3のopacityプロパティ

IE8でCSS3のopacityプロパティ

4つのボックスを並べて見え方を比較しています。左から、100%不透明、70%、20%、0%です。中身のテキストも透明になっていることがわかります。画像さえも透明にすることができるので、これは使えれば透過pngなんていらなくなる！？のかも。Safariは4のパブリックβを使用していますが、3も対応しています。

text-shadow

text-shadowプロパティは、文字（テキスト）に影をつけることができるプロパティです。CSS2.1では一度廃止となりましたが、3で復活予定です。いわゆるドロップシャドウの効果が画像なしで実現できる、これまたとても便利そうなプロパティです。たとえばこんな風な使い方がアリガチですね。

<ul>
    <li><a href="#">講座一覧</a></li>
    <li><a href="#">おすすめ</a></li>
    <li><a href="#">アクセス</a></li>
    <li><a href="#">問合わせ</a></li>
</ul>

ul li {
	display: inline;
	border-left: 3px double #333;
}

ul li:last-child {
	border-right: 3px double #333;
}

ul li a {
	padding: 10px;
	color:#CCC;
	text-decoration: none;
}

ul li a:hover {
  text-shadow: #000 1px 1px 1px;
}

Google Chrome 2でCSS3のtext-shadowプロパティ

Safari 4でCSS3のtext-shadowプロパティ

a:hoverのみテキストに影をつけています。

さらにはこんな使い方も出来ます。

<p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>

p {
    width: 500px;
    padding: 10px;
    font-family: Georgia, "Times New Roman", Times, serif;
    background: #CCC;
    color: #FFF;
    text-shadow: #666 0px -1px, #666 1px 0px, #666 0px 1px, #666 -1px 0px;
}
p:first-letter {
    font-size: 3em;
    line-height: 1;
    float: left;
    margin: 0 .2em 0 0;
    padding: .1em 0;
}

Google Chrome 2でCSS3のtext-shadowプロパティ