Box-shadowのinsetを応用した 目隠しアクション Inset box-shadow play

Box-shadowのinsetを応用した 目隠しアクション Inset box-shadow play
このエントリーをはてなブックマークに追加
PR

Inset box-shadow play
By Zach Saucier

See the Pen Inset box-shadow play by Zach Saucier (@Zeaklous) on CodePen.

http://codepen.io/Zeaklous/pen/xnGmu

box-shadowsの影を外側ではなく内側にするinsetでbox内を目隠しして、マウスオーバーで中身が見えるようにするアイディア集です。
仕組みはとてもシンプルです、真っ黒だと少しなんだかわかりづらいと思うのでRGBaでアルファ値を付けてやればうっすら中身が見えていい感じになるかなと思ったりします。

どういった場面で使えるか?
WEBページで問題とか、クイズとか作った時に回答がマウスオーバーすると表示されるっていう表示も良いかなと

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)