[CSS]紙がふわりとする繊細なエフェクトをシンプルなHTMLで実装するテクニック
divで実装したパネルに紙がふわりとするようなエフェクトを与えるスタイルシートのテクニックを紹介します。 デモではパネル底の左右がふわりとなります。 Pure CSS Paper Lift Effect 実装は非常にシンプルです。 HTML HTMLは、div一つだけです。 <div class="box"></div> CSS スタイルシートはベンダプレフィックスも含めてあるのでちょっと長いですが、コピペで利用できます。 body { margin: 0; padding: 0; background: #efefef; } .box { position: relative; margin: 40px auto; width: 400px; height: 350px; background: #fff; border-radius: 2px; } .box::before, .box
![[CSS]紙がふわりとする繊細なエフェクトをシンプルなHTMLで実装するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bcb821b40e6224665d6d8c37a61bec6e8d65084e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102305.gif)
[CSS]ナイスアイデア！二つの繋がる要素を一つのドロップシャドウで処理するテクニック
div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します。 上がborder:1px;の状態、下がbox-shadowで一つにした状態です。 Drop shadow for 2 elements preserving the intersection in CSS 凸型の要素はタブや上からコンテンツをひっぱりだす時によく使われ、デモではひっぱりだすトグル用に「Show / Hide」と書いてあります。 ※このデモではトグルとしての機能は実装されていません。 デモページ 実装は非常にシンプルです。 HTML 二つの要素はdivでもpでもaでもブロックとなる要素なら何でも構いません。ポイントは二つの要素を内包するdiv要素を設けることです。 <div class="block"> <div class="innerblock"> <p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
