読者です 読者をやめる 読者になる 読者になる

世界が変わったのだから、自分も変わらなくてはならない。

エンジニア兼デザイナーのナカモリのブログです。

【CSS】テキストやボックス要素に影をつける -サイトを作っていてよく忘れるCSS(その1)-

CSS

サイトを作っていてよく忘れてしまうCSS(その1)を記録します。今回はテキストやボックス要素に影をつけるCSSです。

1.テキストに影をつける

テキストに影をつけるCSS

数値の指定の順番がなかなか覚えられません。
「右、下、ボカシ、色」と覚えています。

2.ボックス要素に影をつける

ボックス要素に影をつける

ボックス要素に影をつける場合は、数値の指定が4つあります。
「右、下、ボカシ、広がり、色」と覚えています。影を内側に向ける場合は、「最後にinset」を指定しています。

テキストに影をつける場合も同様ですが、数値は省略することができます。しかし、何が省略されているのかが、パッと見でわからなくなる場合があるので、いちいち全部指定しています。

3.「押した感」を出すCSS

スマホサイト作成において、ボタンがタップされたことをわかりやすくしなければならない場合に、タップした要素を影を用いて「押した感」を演出する場合があります。自分はタップ時に背景色ちょっと暗くして、内側に影を少しつける方法をよくつかいます。

例:ボタン(通常時)

ボタン(通常時)

例:ボタン(タップ時)

ボタン(タップ時)

ボタン(タップ時)に加えたbox-shadowは下記のとおりです。

サンプルに加えてたCSS(box-shadowだけ)

フラットデザインが云々と言われる前までは、ボタン(通常時)に外側の影をつけたりしましたが、フラットデザインが流行りだしてからは、ボタン(通常時)に影をつけることは少なくなりました。