Clever Geek Handbook

CSS3の要素のクロスブラウザーリフレクション

画像

現在、要素のリフレクションを作成できるボックス反射とマスク画像が既に存在しますが、これらのプロパティはSafariとChromeでのみ使用でき、希望どおりに機能しません。 したがって、CSSでクロスブラウザリフレクションを実装する方法を説明したいと思います。

HTMLドキュメントを作成する

仕事に取り掛かりましょう。 HTMLコードを書くことから始めましょう。 
 <!--[if lt IE 9 ]> <body class="oldie"> <![endif]--> <!--[if IE 9 ]> <body class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->
CSS Reflection自体を作成するには、3つのブロックが必要です。 
 <div id = "plane">
	 <span id = "elrefl"> CSS3リフレクション<span id = "refl"> CSS3リフレクション</ span> </ span>
 </ div>

style.css

次のスタイルを作成することから始めましょう。 
 #plane {
	パディングトップ：5％;
	左：0;
	上：10％;
	幅：100％;
	下：0;
	位置：絶対;
	オーバーフロー：非表示。
 }
背景は要素のボックスシャドウから形成されるため、この要素には背景はありません。オーバーフロープロパティは、上部を黒のままにするために指定されます。これにより、反射が見やすくなります。 そして、反射要素と反射要素自体の作成を開始します。 
 ＃elrefl、＃refl {
	色：＃004;	
	フォントファミリー：Impact、 'Arial Black'、Helvetica、Arial、sans-serif。
	テキスト変換：大文字;
	フォントサイズ：50px;
	背景色：#FFE;
	フォントの太さ：太字。
	パディング：30px;
	表示：インラインブロック。	
	ボーダー半径：30px;
         box-shadow：rgba（255,255,240、.2）0 0 200px 100px、rgba（255,255,240、.3）0 0 40px、インセット 
         rgba（0,0,0、.8）0 0 20px;
        ボーダー半径：30px;	
	位置：相対;
       -webkit-user-select：なし;
       -moz-user-select：なし;
       -ms-user-select：なし;
       ユーザー選択：なし;
 }

 #refl {
	位置：絶対;
	 z-index：-1;	
	 top：100％;
	左：0;	
	 -webkit-transform：scaleY（-1）;
	 -moz-transform：scaleY（-1）;
	 -o-transform：scaleY（-1）;
	 -ms-transform：scaleY（-1）;
	変換：scaleY（-1）;
  
     / * filter：url（filter.svg＃blur）;  FF、Opera + IE10 * /
	 -webkit-filter：blur（2px）;  / * webkit * /	
	 box-shadow：inset rgba（0,0,0、.8）0 0 20px、インセット＃000 0 50px 100px;
 }
この段階で、2つの大きな同一のボタンを作成した後、2番目のボタンを垂直に反映してぼかしを追加します。 標準のぼかしはwebkitでのみ使用できるため、次のコードを使用してfilter.svgを作成します。 
 <？xml version = "1.0" standalone = "no"？>
 <svg width = "1" height = "1" version = "1.1"
 xmlns = "http://www.w3.org/2000/svg"
 xmlns：xlink = "http://www.w3.org/1999/xlink">
   <defs>
     <filter id = "blur">
       <feGaussianBlur in = "SourceGraphic" stdDeviation = "2 3" />
     </ filter>
   </ defs>
 </ svg>

ブラウザー間の互換性

次の2つが残っています-透明度を追加し、反射をクロスブラウザにするには： 
 .modern #refl {
	不透明度：.25;
 }
 .ie9 #refl {
	マージン上部：20px;
	マージン左：-10px;	
	 -ms-filter： "progid：DXImageTransform.Microsoft.BasicImage（opacity = .25）progid：DXImageTransform.Microsoft.Blur（PixelRadius = '3'、MakeShadow = 'false'）progid：DXImageTransform.Microsoft.MotionBlur（強度= 15 、方向= 0）progid：DXImageTransform.Microsoft.Blur（PixelRadius = '3'、MakeShadow = 'false'）; "
 }
 .oldie #refl {
	マージン上部：-20px;
	マージン左：-7px;	
	フィルター：progid：DXImageTransform.Microsoft.Gradient（startColorstr =＃99000000、endColorstr =＃00000000）
	 progid：DXImageTransform.Microsoft.BasicImage（ミラー= 1、回転= 2、不透明度= .35）
	 progid：DXImageTransform.Microsoft.Blur（PixelRadius = '3'、MakeShadow = 'false'）
	 progid：DXImageTransform.Microsoft.MotionBlur（強度= 15、方向= 0）
	 progid：DXImageTransform.Microsoft.Blur（PixelRadius = '3'、MakeShadow = 'false'）;
 }

結果

ここですべての仕組みを見ることができます 。



問題の原因が.svgであることを証明するために以前のリンクを残し、firebugで.svg接続の行を削除するだけです。 ロカルカではすべてが完璧に機能しました。 さて、今私は変換を改善しましたが、新しいブラウザ用に古いリンクも機能しています。



ユーザー選択：なしを追加し、例へのリンクを更新しました。


More articles:


All Articles