[CSS]スクリプト無しで、画像に鏡面効果を与えるスタイルシート
Post on:2010年6月9日
sponsors
CSS3を使用して、画像に鏡面効果を与えるスタイルシートをNettuts+から紹介します。
Quick Tip: Pure CSS Reflections
デモページ
鏡面反射のエフェクトには、CSS3のグラデーションを使用しています。
CSS
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="css" cols="60" rows="5"> img { -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white)); -webkit-border-radius: 3px; border-radius: 3px; border: 3px solid #666; } </textarea> |
対応ブラウザはwebkit系のChrome, Safariとなっています。
sponsors
