Blog株式会社アキュトラスのメンバーが、技術情報などを楽しく書いています。CSSこんばんは、joniyです。前回の記事(box-shadowを使った柔軟な縁取り)から発展させて色々な場所で使えそうなbox-shadowの利用例を紹介します。表示はChromeでの表示例になります、他ブラウザでも動作します。Chromeのサムネイル風Chromeで新しいタブを開いた時に表示されるサムネイル風です。:hover擬似クラスを使ってカーソルを合わせた時に、borderで少し黒めかつbox-shadowで影を付けることで該当要素を強調させます。transition-durationを使うことで徐々に表示を切り替えさせ、不自然さを低減します。背景に合わせて表示するボックスの縁を変える必要があると思います。どこでも違和感の少ない縁取りが出来ます。0.5);}入力ボックスの強調デフォルトのinputタグのままだとfocusされると青のアウトラインが表示されるだけで味気ないです。box-shadowを重ね掛けすることでより立体的でわかりやすいものにします。0を指定して打ち消します。GL2760-Tで薄いbox-shadowが全く見えなくなりました。ディスプレイの設定が足りてないのか、ドライバーが間違っているのか理由はわかりませんでした。»Profile株式会社アキュトラスのメンバーが、技術情報などを楽しく書いています。(1)Archiveスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。