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

CSSや画像などを使用して、透過性をウェブデザインに取り入れる方法をCSS-Tricksから紹介します。

Transparency in Web Design

Transparency in Web Design

下記は各ポイントを意訳したものです。

Photoshop

サイトのキャプチャ

Spectrum Theme

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

Opacity

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

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

RGBa / HSLa

サイトのキャプチャ

Like Architects

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

RGBaのサンプル

PNG

サイトのキャプチャ

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

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

sponsors

top of page

©2018 coliss