• css3

    box-reflect(反射)

    2012/09/05

    css3でリフレクション効果。

    fl02.png

    -webkit-box-reflectで、反射効果を適用できます。

    ※webkitブラウザのみ適用可能です

     

     

    書き方はこれ。

    
    -webkit-box-reflect: 反射方向 反射までの距離 imgの指定; 
    
    

     

    方向の指定は以下になります。

    上: above
    右: right
    下: left
    左: below

     

     

    例えばborderで作った右向きの三角形に対して、

    fl.png

    
    -webkit-box-reflect: right;
    
    

    この1行を追加すると、このように右方向に反射します。

     

     

    img の指定部分には、webkit-gradientを指定することもできます。

    これによって、マスク効果で鏡面反射を表現することができます!

     

     

    kanapple.png

     

    おおおー!!かっこいいじゃないの!!

    書き方はこれ

     

    
    -webkit-box-reflect: below 4px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.5, transparent), to(rgba(0,0,0,0.8)));
    
    

     

    このテキストには、text-strokeも使っています。(これについてはまた別で書きます)

     
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:#999;
    
    

     

     

    透明からのグラデーションをかけることでマスク効果になります。

    imageも綺麗に反射されます。

    pic.png

     
    -webkit-box-reflect: below 4px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.5, transparent), to(rgba(0,0,0,0.8)));
    
    

     

     

    しかし。。。

    Android2.1、2.2では-webkit-box-reflectの中でのグラデーションが効きません。。。

     

     

    でも大丈夫!

    グラデーションの透過pngを用意すれば、同様の鏡面効果をつけることができます!

    さきほどのグラデーション指定と同じグラデーションをかけた透過png画像を作成し、このように読み込みます。

     

    
    -webkit-box-reflect: below 0 url"reflect.png");
    
    

    すると、このように。

     

    fl02.png

     

    同様の鏡面効果が、Androidでも表示可能になります!

     

    すんばらし!

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back