Webデザインにシャドウを取り入れる時のポイントいろいろ
2016年3月10日 CSS, Webデザイン 要素に加えれば、画面に立体感をもたらすシャドウ。なんだか最近シャドウを取り入れたデザインをよく見かけるので、今回はシャドウを使う時の注意点やコツをまとめてみようと思います。 ↑私が10年以上利用している会計ソフト！ If you took a 3 year break from UI design, now you're all caught up: pic.twitter.com/4pdL17dXaF — Dylan Jones (@tDJ) March 2, 2016 このTweetにも描かれているとおり、1年周期でシャドウの扱いが変わっていますね。2014年は影なしの完全フラットデザイン。2015年はロングシャドウ。そして2016年はこれから紹介するぼんやりふんわりシャドウ。 CSSで実装するシャドウの基礎 通常のシャドウ 要素にシャド
Box Shadowのエフェクトサンプル＆便利な素材まとめ - NxWorld
今さらな内容で特に目新しいものがあるわけではありませんが、自分用で一覧化したものが欲しかったので備忘録。 CSSのbox-shadowを使用して実装するエフェクトサンプルとシャドウエフェクトを付けたデザインを制作する際に便利な素材をいくつか紹介します。 CSSのbox-shadowで実装したエフェクトサンプル 以下はいずれも画像は使わずにCSSのbox-shadowを使用してシャドウエフェクトを実装しているサンプルで、単純にシャドウを付けたもの、内側に付けたもの、要素が浮かんでいるように見せるものなど全10種類あります。 HTMLはEffect 10以外は全てdiv要素ひとつで、共通のスタイルとして下記をCSSで指定しています。
CSSだけで作るamazon風な縦型メガメニュー
先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。 CSSだけですのでメニューの現れ方など若干違います。box-shadowとborder-radiusはIE8以下で、矢印を作るための擬似要素はIE7以下で非対応ですが、メニューとしての機能は果たせます。 では解説していきます。 HTML まずはHTMLから説明します。長いのでメニュー1つ分のみ載せます。コード全体はサンプルの下に載せていますのでご覧ください。 <div id="menu-tittle">メニュー</div> <ul id="sample"> <li> <a href="#">メインカテゴリー1</a> <ul> <h3>メインカテゴリー1</h3> <li><a href="#">サブ
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
