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

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

元画像はこれ。

床面反射。

html：

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：

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の色の指定を変えるだけです。

freefielder.jp

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

関連記事

コメント