box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ

5
months
25
配信元サイト
コリス

CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。

  • このエントリーをはてなブックマークに追加
  • いいね!
  • google+
  • evernote

COMMENT

CSS制御で実装できる機能を紹介されています。

以下のような内容です。

  • 1. スクロールしてもバーを常に最上部に表示
  • 2. サブナビゲーションのドロップダウン
  • 3. シャドウを使った光沢が美しいボタン
  • 4. 吹き出しスタイルの通知パネル
  • 5. Appleのページラッパー
  • 6. Appleのコンテンツボックス
  • 7. Appleのフィーチャーリンク
  • 8. 画像にさりげなくシャドウを添える
  • 9. フォームの入力を目立たせる
  • 10. エラステック対応のボタン