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


ということで今回は、iTunesなどでお馴染みのcoverflow風に「画像が床面で反射しているようにみせる」スタイルシート。面倒な画像の加工をしなくても、元画像1枚あれば、あとはCSSを設定するだけです。

元画像はこれ。

床面反射

html:
<div class="coverflow">
 <img src="http://freefielder.jp/pics/phototest04.jpg" class="original" />
 <img src="http://freefielder.jp/pics/phototest04.jpg" class="mirror" />
 <div class="mask01"></div>
 <div class="mask02"></div>
 <div class="mask03"></div>
</div>
CSS:
div.coverflow{
  position:relative;
  width:480px;
  height:470px; /* original top + original height + mask height */
  background-color:#000;
  overflow:hidden;
}

.original{
  position:absolute;
  top:10px;
  left:40px;
  width:400px;
  height:300px;
}

.mirror{ /* オリジナルを180度回転+左右反転してオリジナルの下に表示 */
  position:absolute;
  top:312px;
  left:40px;
  width:400px;
  height:300px;
 /* Firefox */
  -moz-transform:matrix(1, 0, 0, -1, 0, 0);
 /* Safari , Chrome */
  -webkit-transform:matrix(1, 0, 0, -1, 0, 0);
 /* Opera */
  -o-transform:matrix(1, 0, 0, -1, 0, 0);
 /* IE 8 , 9 */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
}

.mask01{ /* ミラーにマスクをかける */
  width:400px;
  height:160px;
  position:absolute;
  top:312px;
  left:40px;
 /* IE 8 , 9 */
  background-color:#000;
  filter:Alpha( opacity=30 , finishOpacity=100 , style=1 , startX=50 , startY=0 , finishX=50 , finishY=90 );
 /* Firefox */
  background : -moz-linear-gradient( top ,
    rgba( 0 , 0 , 0 ,0.4 ) ,
    rgba( 0 , 0 , 0 ,0.8 ) 60% ,  #000 );
 /* Safari , Chrome */
  background : -webkit-gradient( linear , left top , left bottom ,
    from( rgba( 0 , 0 , 0 ,0.4 )) ,  to( #000) );
 /* Opera */
    -o-transform:scale(0);
}

.mask02{ /* ミラーにマスクをかける */
  width:400px;
  height:160px;
  position:absolute;
  top:312px;
  left:40px;
 /* IE 8 , 9 */
  background-color:#000;
  filter:Alpha( opacity=100 , finishOpacity=0 , style=1 , startX=0 , startY=100 , finishX=30 , finishY=70 );
 /* Firefox */
  background : -moz-linear-gradient( left bottom ,
    rgba( 0 , 0 , 0 ,1 ) ,
    rgba( 0 , 0 , 0 ,0 ) 30% ,
    rgba( 0, 0 , 0 ,0 ) );
 /* Safari , Chrome */
  background : -webkit-gradient( linear , left bottom , right top ,
   from( rgba( 0 , 0 , 0 ,1 )) ,
   color-stop( 30% , rgba( 0 , 0 , 0 ,0 ) ) ,
   to( rgba( 0 , 0 , 0 ,0 ) ) );
 /* Opera */
  -o-transform:scale(0);
}

.mask03{ /* ミラーにマスクをかける */
  width:400px;
  height:160px;
  position:absolute;
  top:312px;
  left:40px;
 /* IE 8 , 9 */
  background-color:#000;
  filter:Alpha( opacity=100 , finishOpacity=0 , style=1 , startX=100 , startY=100 , finishX=70 , finishY=70 );
 /* Firefox */
  background : -moz-linear-gradient( right bottom ,
    rgba( 0 , 0 , 0 ,1 ) ,
    rgba( 0 , 0 , 0 ,0 ) 30% ,
    rgba( 0, 0 , 0 ,0 ) );
 /* Safari , Chrome */
  background : -webkit-gradient( linear , right bottom , left top ,
    from( rgba( 0 , 0 , 0 ,1 )) ,
    color-stop( 30% , rgba( 0 , 0 , 0 ,0 ) ) ,
    to( rgba( 0 , 0 , 0 ,0 ) ) );
 /* Opera */
  -o-transform:scale(0);
}

わはは、ちょっと冗長ですが、クロスブラウザを実現するためには仕方がないのだ。

オリジナル画像の下に反射画像を表示して、その反射画像に
…という背景を透過させたdivを3枚、重ねています。Operaでは見えないですね。

元画像を四角く切り取って、カバーフロウ風。

imgタグではなく、divの背景画像として写真を読み込んでいます。
いろいろなブラウザで試してみたところ、Opera10.6xだと反射画像が表示されないバグがありそうです。Opera11 なら大丈夫。いずれにせよ、Operaではマスキングは効きません。

html:
<div class="coverflow">
 <div class="square" style="background:url('http://freefielder.jp/pics/phototest04.jpg');left:90px;background-position:right bottom;"></div>
 <div class="mirror_sq" style="background:url('http://freefielder.jp/pics/phototest04.jpg');background-position:right bottom;"></div>
 <div class="mask01" style="width:300px;left:90px;"></div>
 <div class="mask02" style="width:300px;left:90px;"></div>
 <div class="mask03" style="width:300px;left:90px;"></div>
</div>
CSS:
.square{
  position:absolute;
  top:10px;
  left:90px;
  width:300px;
  height:300px;
}

.mirror_sq{
  position:absolute;
  top:312px;
  left:90px;
  width:300px;
  height:300px;
 /* Firefox */
  -moz-transform:matrix(1, 0, 0, -1, 0, 0);
 /* Safari , Chrome */
  -webkit-transform:matrix(1, 0, 0, -1, 0, 0);
 /* Opera */
  -o-transform:matrix(1, 0, 0, -1, 0, 0);
 /* IE 8 , 9 */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
}

ホワイトバックでは、こんな感じ。

.maskxxの色の指定を変えるだけです。

カテゴリ: