【css】box-shadowまとめ【解説付き】
解説付きでbox-shadowの基本をまとめています。
基本は{ box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; }ですが、具体的にどのような表示になるかを確認しながらタイピングできます。
関連タイピング
-
自分練習用、英語長文
プレイ回数2687 英語長文1127打 -
個人練習用で作りました。解説なしです。
プレイ回数1325 英語長文1140打 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数3804 英語長文721打 -
個人練習用：並び変え、間隔の調整、縦方向の揃えなど基本のまとめ
プレイ回数355 英語長文813打 -
プレイ回数454 長文91打 -
簡単な解説付きでグラデーションをまとめ、個人練習用
プレイ回数522 長文645打 -
CSSでよく使うプロパティのタイピング
プレイ回数431 英語長文584打 -
jQuery基本例文集です。解説なしです。
プレイ回数1011 英語長文1554打
問題文
ふりがな非表示
ふりがな表示
(ｂｏｘ－ｓｈａｄｏｗ： ３ｐｘ ３ｐｘ；)
右と下に3pxずつ伸びる
(ｂｏｘ－ｓｈａｄｏｗ： ３ｐｘ ３ｐｘ ４ｐｘ；)
影をぼかす
(ｂｏｘ－ｓｈａｄｏｗ： ６ｐｘ ６ｐｘ ４ｐｘ ＃ｄｄｄ；)
影の色を変える
(ｂｏｘ－ｓｈａｄｏｗ： ０ ０ ８ｐｘ ＃４４４；)
上下左右均等に影をぼかす
(ｂｏｘ－ｓｈａｄｏｗ： １０ｐｘ １０ｐｘ １５ｐｘ －１０ｐｘ；)
影を小さくする
(ｂｏｘ－ｓｈａｄｏｗ： ５ｐｘ ５ｐｘ ５ｐｘ １０ｐｘ ｒｇｂａ（０，０，０，０．２）；)
影を大きくする
(ｂｏｘ－ｓｈａｄｏｗ： ２ｐｘ ２ｐｘ ４ｐｘ ＃４４４ ｉｎｓｅｔ；)
影を内側に出す
(ｂｏｘ－ｓｈａｄｏｗ： ３ｐｘ ３ｐｘ ６ｐｘ －２ｐｘ ＃５５５，)
内側にも外側にも影を出す１
(３ｐｘ ３ｐｘ ８ｐｘ ｒｇｂａ（２５５，２５５，２５５，０．８） ｉｎｓｅｔ；)
内側にも外側にも影を出す２（１と続けて書くと一つの要素に二つの影が出ます
(＜ｉｍｇ ｃｌａｓｓ＝”ｓｈａｄｏｗ” ｓｒｃ＝”～” ／＞)
画像に影をつける（classに影を設定しておくと反映されます）