【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita

概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。

[mayumayu_nimolove]

ダサいとかで決めるのはもうやめない？ダサいと言う定義は無いし、個人の価値観だし、webデザインって見た目を良くすること以外考えることあるじゃん。あとモニタの違いで見えないことも多々あるからね。

[kingpin3000]

先に著者の考えるダサくないドロップシャドウを明示してもらえると嬉しい

[euclidean]

タイトルの「ダサい」に過剰反応してるコメントは内容読めてる？前半使って丁寧に何故ダサくなるか説明してるし、具体的で良いデザイン解説だと思う >　“設計ルールが決まっていないから…ダサくなります。”

[ducktoon]

フラットデザインが主流の昨今は影があるとダサく見えたりするのでそもそも無しでいいかもしれない。入れるとしたら斜め下に彩度0で少しだけ

[aox]

ダサいものはダサいです。楽天市場のデザインが人類の歴史や文明に対する攻撃であると認識できなければ我々は滅びます

[mutwma]

「ドロップシャドウが綺麗にならない原因」の次が「1. デザインを3次元として捉える」。これではデザインを3次元として捉えてるせいで綺麗にならないになる。解決には文章力も大事だと思うんですけど大丈夫ですかね…

[twwgot]

デザインがダサいのには理由がある。ダサくしないためにはどうするかという知識は大事ですよ

[seal2501]

まぁダサいかどうかはさておきスタイルに一貫性は欲しいよね

[eartht]

肝心の濃さのところは感覚か…。まぁやっぱ仕方ないのかね。

[sigmanode]

ドロップシャドウのジェネレーターを使おう https://shadows.brumm.af/

[spark7]

背景の青と馴染ませるんやろなーと思ったらその作例は無かった

[w_bonbon]

いかがでしたか 系記事にしか見えないなぁ。

[securecat]

「UIやグラフィックデザイン」という言い方に違和感がある

[snailcat]

マテリアルデザインに追従すればそれでいいのでは…

[Shinwiki]

塩といっしょ。こんなんで味に影響するのかよ？と思って入れすぎて失敗する。

[tsuki-rs]

もうもはやドロップシャドウなんてやめようぜ

[gachapining]

ダサいという表現でちょっと損をしている良記事。そもそもドロップシャドウによって何を解決しようとしてるのか？の説明から入るのでわかりやすい。

[north_korea]

綺麗なドロップシャドウを見つけたらCSSを見るようにしているが、複数のシャドウを重ねて作られていることが多い印象

[chiroruxx]

なるほど違いがわからん

[tohokuaiki]

へー。

[fujibay1975]

とりあえず薄くしとけばオッケー