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

すべてのメジャーブラウザに対応! と謳いたいところですが、CSS3の採用状況などにばらつきがあったりするので、
  • Firefoxで最適な表示。
  • Safari・Chrome・Internet Explorerで、それに限りなく近づけた表示。
  • Operaでは、最低限、元画像だけは表示されるようにする。
…という方針で行きます。

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

オリジナル画像はこれ。

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

htmlソース:
<div class="board">
 <img src="//freefielder.jp/pics/test4.jpg" class="originalphoto" />
 <div class="vignette_soft"></div>
</div>
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ソース:
<div class="board">
 <img src="//freefielder.jp/pics/test4.jpg" class="originalphoto" />
 <div class="vignette_hard"></div>
</div>
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ソース:
<div class="board">
 <img src="//freefielder.jp/pics/test4.jpg" class="originalphoto" />
 <div class="vignette_white"></div>
</div>
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では真っ白でも大丈夫。


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

カテゴリ: