box-shadowの応用

こんばんは、joniyです。
前回の記事(box-shadowを使った柔軟な縁取り)から発展させて
色々な場所で使えそうなbox-shadowの利用例を紹介します。
※ 表示はChromeでの表示例になります、他ブラウザでも動作します。

Chromeのサムネイル風

Chromeで新しいタブを開いた時に表示されるサムネイル風です。
:hover擬似クラスを使ってカーソルを合わせた時に、
borderで少し黒めかつbox-shadowで影を付けることで該当要素を強調させます。
またtransition-durationを使うことで徐々に表示を切り替えさせ、不自然さを低減します。

css

.box1 {
    background: rgba(0,0,0,0.1);
    text-align: center;
    border: solid 1px #f2f2f2;
}

.box1:hover {
    -webkit-filter: brightness(90%);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
    border: solid 1px #c0c0c0;
    -webkit-transition-duration: 300ms;
    -moz-transition-duration:    300ms;
    -o-transition-duration:      300ms;
}

薄い半透明の縁でどんな背景色にも対応

背景色が場所によって異なるようなサイトだと、 背景に合わせて表示するボックスの縁を変える必要があると思います。 そんなときは白系統の半透明のbox-shadowを付けることで、 どこでも違和感の少ない縁取りが出来ます。

css

.box1 {
    background: rgba(255, 26, 26, 0.8);
    text-align: center;
    box-shadow: 0 0 3px 3px rgba(141, 141, 141, 0.5);
}

入力ボックスの強調

デフォルトのinputタグのままだとfocusされると青のアウトラインが表示されるだけで味気ないです。 box-shadowを重ね掛けすることでより立体的でわかりやすいものにします。
ChromeやOperaだと、デフォルトではfocusを当てると青枠が表示されるため、outline: 0を指定して打ち消します。

css

.box2 {
    text-align: center;
    border: solid 2px white;
    box-shadow: 0 0 1px 0 gray inset, 0 0 1px 0 gray, 0 0 3px 3px rgba(26, 26, 26, 0.1) inset;
}

.box2:focus {
    outline: 0;
    box-shadow: 0 0 1px 0 gray inset, 0 0 1px 0 gray, 3px 3px 3px 0 rgba(141, 141, 141, 0.5), 0 0 3px 3px rgba(26, 26, 26, 0.1) inset;
}

余談

デュアルディスプレイで作業しているのですが、BenQ GL2760-Tで薄いbox-shadowが全く見えなくなりました。 ディスプレイの設定が足りてないのか、ドライバーが間違っているのか理由はわかりませんでした。