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

PC版へ 2011年02月17日
すべてのメジャーブラウザに対応! と謳いたいところですが、CSS3の採用状況などにばらつきがあったりするので、
…という方針で行きます。

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

オリジナル画像はこれ。

軽く周辺露光落ち。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 を重ねてマスキングしています。
☆ブラウザごとの表示の違い☆

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

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では真っ白でも大丈夫。


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

関連記事

コメント

現在、コメント機能は停止しています。