box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
CSS3 で二重丸を作る｜TechRacho by BPS株式会社
仕事で必要になったので作ってみました。実装方法は意外と簡単だったのでまとめてみます。これを作るにあたって下記サイトの記事が参考になったので張らせていただきます。[ CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ 今回用いたのは参考にしたサイトで紹介されていた第3 の方法、box-shadow を使用した方法です。参考サイトでは二重ボーダーを作っていますが、要はこれを角丸指定で円にしつつ真ん中のボーダーを背景と同色で作れば実現できるってわけですね。 margin: auto; background-color: #00b1f4; border: solid 6px #fff; width: 70px; height: 70px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius:
box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ
CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/CSSを簡略化したものです。 1. スクロールしてもバーを常に最上部に表示 2. サブナビゲーションのドロップダウン 3. シャドウを使った光沢が美しいボタン 4. 吹き出しスタイルの通知パネル 5. Appleのページラッパー 6. Appleのコンテンツボックス 7. Appleのフィーチャーリンク 8. 画像にさりげなくシャドウを添える 9. フォームの入力を目立たせる 10. エラステック
[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)
先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー！★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですｗ 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るのか、どこが難しいのか、どんなことなら出来るのかを掘り下げてみました。その過程で出来たサンプルも公開しますー。 まずは枠線の作り方。通常枠線はCSSのborderプロパティを使い、値にdoubleを設定する事で二重線が出来ます。ここではそれにバリエーションをつける方法を解説します。 デモ：box-shadowによる実線のボーダー box-shadowで実線を作れる borderで枠線をつけるところ、
![[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d32ad08c42abf3adf6023a2cf5a9740723afbdb/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fcss-design-sample-02-150x150.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
