スタイルシートだけで画像にさまざまな効果をプラスしてみる。その1。

すべてのメジャーブラウザに対応! と謳いたいところですが、CSS3の採用状況などにばらつきがあったりするので、

Firefoxで最適な表示。
Safari・Chrome・Internet Explorerで、それに限りなく近づけた表示。
Operaでは、最低限、元画像だけは表示されるようにする。

…という方針で行きます。

まずはトイカメラなどでよくある「周辺露光落ち」のようなエフェクト。

オリジナル画像はこれ。

軽く周辺露光落ち。Operaでは元画像そのままが表示されます。

htmlソース：

CSS：

div.board{
position: relative;
width: 480px;
height: 420px;
background-color: #000;
overflow: hidden;
}

.originalphoto{
position: absolute;
top: 10px;
left: 90px;
width: 300px;
height: 400px;
}

.vignette_soft{
position: absolute;
top: 10px;
left: 90px;
width: 300px;
height: 400px;
/* IE 8,9 */
background-color: #000;
filter:Alpha( opacity=0 , finishOpacity=85 , style=2 );
/* Firefox */
background: -moz-radial-gradient(
   rgba( 0 , 0 , 0 , 0 ) ,
   rgba( 0 , 0 , 0 , 0.1 ) 40%,
   rgba( 0 , 0 , 0 , 0.7 ) 75% ,
   rgba( 0 , 0 , 0 , 1 ) );
/* Safari , Chrome */
background : -webkit-gradient( radial , center center , 0 ,
   center center , 250 ,
   from( rgba(0 ,0 ,0 ,0) ),
   to( #000 ));
/* Opera */
-o-transform:scale(0);
}

元画像の真上に、

このような、背景を透過させた div を重ねてマスキングしています。

☆ブラウザごとの表示の違い☆

Safari・Chromeでは、現在のところ「楕円形のグラデーション」をサポートしていないので「円形グラデーション」で代替。
IEでは gradient をサポートしていないので、filter: Alpha() で代替。
Operaでは gradient がサポートされていないので、マスキング領域の大きさをゼロに指定します。結果、元画像がそのまま表示されます。

もうすこし周辺を絞り込んでみる。

htmlソース：

CSS：

.vignette_hard{
position: absolute;
top: 10px;
left: 90px;
width: 300px;
height: 400px;
/* IE 8,9 */
background-color: #000;
filter:Alpha( opacity=0 , finishOpacity=100 , style=2 );
/* Firefox */
background: -moz-radial-gradient( ellipse closest-side ,
   rgba( 0 , 0 , 0 , 0 ) ,
   rgba( 0 , 0 , 0 , 0.1 ) 40%,
   rgba( 0 , 0 , 0 , 0.5 ) 70% ,
   rgba( 0 , 0 , 0 , 1 ) );
/* Safari, Chrome */
background : -webkit-gradient( radial , center center , 0 ,
    center center , 190 ,
    from( rgba( 0 ,0 ,0 ,0 ) ),
    color-stop( 40% , rgba( 0 , 0 , 0 , 0.1 ) ),
    color-stop( 70% , rgba( 0 , 0 , 0 , 0.5 ) ),
    to( #000 )),
   -webkit-gradient( linear , left center , right center ,
    from( #000 ) ,
    color-stop( 12% , rgba( 0,0,0,0 )),
    color-stop( 88% , rgba( 0,0,0,0 )),
    to( #000 ) );
/* Opera */
-o-transform:scale(0);
}

これも、Operaではエフェクトが掛かりません。

上で書いたように、Safari・Chromeでは「楕円形のグラデーション」ができないので、「円形で切り取り + 左右を切り取り」というズルをしています。

Webkit系ブラウザの gradient の指定の仕方が全くもって直感的ではないのですが、近いうちに Firefoxのような書式が採用されそうだ、との話もありますね。→ Surfin' Safariの記事(英語)。

おまけで、背景が白のときの絞り込み。

htmlソース：

CSS：

.vignette_white{
position: absolute;
top: 10px;
left: 90px;
width: 300px;
height: 400px;
/* IE 8,9 */
background-color: #fff;
filter:Alpha( opacity=0 , finishOpacity=100 , style=2 );
/* Firefox */
background: -moz-radial-gradient( ellipse closest-side ,
   rgba( 255 , 255 , 255 , 0 ) ,
   rgba( 255 , 255 , 255 , 0.1 ) 40%,
   rgba( 255 , 255 , 255 , 0.5 ) 70% ,
   rgba( 255 , 255 , 255 , 1 ) );
/* Safari, Chrome */
background : -webkit-gradient( radial , center center , 0 ,
    center center , 190 ,
    from( rgba( 255 ,255 ,255 ,0 ) ),
    color-stop( 40% , rgba( 255 , 255 , 255 , 0.1 ) ),
    color-stop( 70% , rgba( 255 , 255 , 255 , 0.5 ) ),
    to( #fff )),
   -webkit-gradient( linear , left center , right center ,
    from( #fff ) ,
    color-stop( 12% , rgba( 255,255,255,0 )),
    color-stop( 88% , rgba( 255,255,255,0 )),
    to( #fff ) );
/* Opera */
-o-transform:scale(0);
}

Safari 4.xでは、

-webkit-gradient( linear , left center , right center ,
    from( #fff ) ,
    color-stop( 12% , rgba( 255,255,255,0 )),
    color-stop( 88% , rgba( 255,255,255,0 )),
    to( #fff ) );

がうまく効かない不具合があるっぽいので、色指定を「白に限りなく近いグレー( rgba( 240,240,240,0 )とか)」にしたほうが安全かも。Safari 5.xでは真っ白でも大丈夫。

…ということで、まだまだ続きます。

freefielder.jp

スタイルシートだけで画像にさまざまな効果をプラスしてみる。その1。

カテゴリ:

タグ:

コメント