[CSS]スタイルシートでページカールのエフェクトを実装するチュートリアルパネルや画像などのちょっとしたアクセントにぴったり、紙がめくれたようなページカールのエフェクトをCSS3の「box-shadow」を使用して実装するスタイルシートを紹介します。 デモ [ad#ad-2] 実装は、下記のようになります。 HTML ページカールのエフェクトは「box-shadow」が適用できれば、どんな要素でも適用できます。 デモではリスト要素を使用しています。 <ul class="box"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> CSS3の「box-shadow」「RGBa」を使用します。 CSS3非対応の旧ブラウザ用のスタイルシートも記述されています。 ul.box { margin: 0; padding: 0; clear: both; overflow: hidden;
