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

Aqutras Members' Blog

株式会社アキュトラスのメンバーが、技術情報などを楽しく書いています。

box-shadowの応用

技術 CSS

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

Chromeのサムネイル風

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

f:id:joniy_joniy:20160421232835g:plain

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を付けることで、 どこでも違和感の少ない縁取りが出来ます。

f:id:joniy_joniy:20160422105052p:plain f:id:joniy_joniy:20160422105058p:plain f:id:joniy_joniy:20160422105103p:plain

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を指定して打ち消します。

f:id:joniy_joniy:20160422174618g:plain

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が全く見えなくなりました。 ディスプレイの設定が足りてないのか、ドライバーが間違っているのか理由はわかりませんでした。