【デザイン】安易にドロップシャドウかけるのやめ隊 – 宇都宮ウエブ制作所
ふぅ、あとはここにドロップシャドウをONと…。てな感じで安易にドロップシャドウかけてやしませんか？ 使い勝手の良すぎるドロップシャドウに警鐘！シャドウだって色々あるよってことで今回はシャドウアイデア集です。 その1：黒じゃなくって補色をつかう デフォルトで#000000に設定されているドロップシャドウ、この色を変えるだけでもグッと洗練された雰囲気に。 たとえばハイライト部分がピンクならシャドウにブルー、という具合に。 この方法はイラスト一日体験教室で教えてもらった手法なのですが、補色関係ってこう使うのか！と目から鱗でした。 その2:シャドウに空の色＆地面の色を足してみる 屋外を想定したシーン、窓際のシーンでは、空の色をブラスした色を使用してみましょう。晴天ならブルー、夕焼けならオレンジ、夜なら深いブルー。さらに地面も光が照り返して反射します。 サンプルでは芝生なのでグリーンを追加。ドロップ
可変幅で両側にドロップシャドウ（div一重で）
てんぽ: 可変幅で両側にドロップシャドウ（div一重で） CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン（画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような）を実現できます。 しかも必要となるdivはひとつだけです。 このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。 <div id="left"> <div id="right"> </div> </div> #left { width: 90%; margin: auto; background: url(shadow-left.gif) top
CSSでブログに影をつける（ドロップシャドウ）
ブログのサイドバー部分に影（ドロップシャドウ）を作成するカスタマイズを紹介します。 ブログを閲覧されている方なら、1度はこのドロップシャドウデザインのサイトをご覧になったことがあると思います。当サイトでも以前よりこのデザインを用いてますが、最初はどのようにしたら影をつけられのかがさっぱり分からず（そのテクニックが紹介されている記事もなく）、適用されているサイトのソースやCSSを眺めて勉強した想い出があります。 最近、いくつかのブログで紹介され始めたようで、このサイトでも取り上げたいと思います。 このエントリーでは固定レイアウトでのドロップシャドウとリキッドレイアウトのドロップシャドウについて説明します。サンプルには当サイトのテンプレートを使用しますが、仕組みがお分かりになればどのテンプレートでも適用可能です。なお、ドロップシャドウ画像自体の作成方法についても別途エントリーしたいと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
