はてなブックマーク - ASCII.jp：box-shadowを極めて「Mac風UI」を作る！

(閉じる)

はてなブックマーク > 人気・新着ニュース > ASCII.jp：box-shadowを極めて「Mac風UI」を作る！...

ASCII.jp：box-shadowを極めて「Mac風UI」を作る！｜菊池崇の実践！CSS3道場

ascii.jp

コンピュータ・IT 3 users

box-shadowでページカールエフェクトを実現する最後におまけとして、サンプル6の写真にページカールエフェクトを付けるサンプルを紹介しよう。ページカールエフェクトとは、写真の両下端に影を置き、写真が少しめくれたように見える効果だ。サンプル7ではbox-shadow プロパティに加えて、CSS3のtransformプロパティを利用してページカールエフェクトを実装している。サンプル7。transformを使って影の形を調整し、写真がめくれたように見せている ■サンプル7[HTML] <!DOCTYPE ... > このページを見る