透過性をウェブデザインに取り入れる方法

Post on:2010年6月8日

Photoshop

どんなウェブデザインでも最終形では基本的に目の錯覚を巧みに利用しています。Photoshopをはじめ他のグラフィック用のアプリケーションで透過性のエフェクトを作成し、フラットな画像として書き出すことができます。
Photoshopで透過性のある画像を作成するには、レイヤーの不透明度、塗りの度合い、ブレンドモードなどで可能です。

Opacity

<textarea name="code" class="css" cols="60" rows="5">
transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
</textarea>

transparent_class {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

</textarea>

CSS Transparency Settings for All Browsers
主要ブラウザの全てに対応したOpacityの指定方法

CSSの「opacity」を使用することで、ページ上のエレメントに透過性を与えることができます。
使用する際には、エレメントの子孫も透過性が適用されることに注意してください。

RGBa / HSLa

Like Architects

CSSでは「opacity」だけでなく、「RGBa」「HSLa」を使用して透過性のレベルをあらゆるカラーに合わせて設定できます。カラーを指定した後、透明度を指定するだけで簡単に利用できます。

<textarea name="code" class="css" cols="60" rows="5">
#anything {
  background: rgba(0,0,0,0.5);  /* 50% transparent */
}
</textarea>

#anything {

background: rgba(0,0,0,0.5); /* 50% transparent */

}

</textarea>

RGBaのサンプル

PNG

Dribbble
透過性にシャドウとテクスチャを組み合わせたデザイン。

PNGをPhotoshopで使用する際には、PNG-8, PNG-24の二種類があります。PNG-8はGIFのようにピクセルに透明度を持たせることが可能ですが、1ピクセルが完全に透明か不透明であるかのどちらかになります。PNG-24はファイルサイズが大きくなりますが、透過性をフルにサポートしています。