[CSS]CSS3の効果的な使い方と陥りやすいワナ

CSS3で何ができるのかという「CSS3で何ができるの? という時にみておきたいサイト集」という記事をとりあげました。

今回は、そのCSS3を実際どのように使うのか? ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。

サイトのキャプチャ

CSS3 Examples and Best Practices

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

はじめに

CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。

しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。
だからといって、CSS3を使うべきではないことを意味するものではありません。ではCSS3の新しい機能をどのように使用するべきでしょうか? ここにあげた優れたいくつかの例をみてください。

テキストのエンボス効果

グリーンの円はCSS3対応で、テキストに1pxのシャドウを適用して、さりげなくエンボス効果をつけています。
レッドの円は非対応ブラウザのものです。

サイトのキャプチャ

Analog

繊細な角丸とシャドウ

グリーンの円はCSS3対応ブラウザで、ボックスに角丸とシャドウを適用しています。
レッドの円は非対応ブラウザのものです。

サイトのキャプチャ

Colly

アニメーションで回転するDVD

グリーンの円はCSS3対応ブラウザで、DVDがアニメーションで回転しながら飛び出してきます。
Firefoxではパッと飛び出すだけで、非対応ブラウザではスタティックなイメージが表示されます。

サイトのキャプチャ

for a beautiful web

半透明のバー

このエフェクトを見るためには少しスクロールさせてください。上部の検索バーと重なったコンテンツが半透明で表示されます。

サイトのキャプチャ

Mercy

角丸

CSS3のborder-radiusに対応したブラウザでは、レッドの円の箇所には角丸が適用されます。

サイトのキャプチャ

Future of Web Design

微妙なテキストのシャドウ

グリーンの円はCSS3対応ブラウザで、ほんのわずかにシャドウを適用しています。

サイトのキャプチャ

cccccccccccc

陥りやすいワナと対処方法

No:画像の回転

画像にボーダーを適用している場合、画像の回転は注意深くしてください。下記のように汚くみえることがあります。

サイトのキャプチャ

Booyant

Yes:画像は回転させておく

上記の汚くみえるのを避けるために、あらかじめPhotoshopで画像を回転させたものを作成し、それを使用します。

サイトのキャプチャ

Chirp

Yes:一つの大きい画像を回転させる

CSS3に対応したwebkit系のブラウザでみてください。地球がアニメーションでゆっくり回転しています。

サイトのキャプチャ

Future of Web Design

No:多くの大きい画像を回転させる

回転している画像が多いと、気持ちがわるくなるかもしれません。

サイトのキャプチャ

24ways

No:CSS3に頼る

下記のサイトをCSS3対応ブラウザで見るととても素晴らしく見えます。しかしながら、非対応ブラウザでみると崩れてしまいます。CSS3やHTML5でレイアウトをする際は、非対応ブラウザも考慮にいれて、非常に注意深くおこなってください。

サイトのキャプチャ

cccccccccccc

Yes:カスタムフォントには代替を

カスタムフォントを使用する際は、多くの人がインストールしているであろう似た他のフォントを包含して指定するのを忘れないでください。下記のサイトではカスタムフォントを使用していますが、代替フォントも似たようなものを指定しています。

サイトのキャプチャ

Bobulate

sponsors

top of page

©2018 coliss