Bootstrap 4 CSS customization
ja | en
グラデーションとシャドウ
グラデーションとシャドウの効果確認
Bootstrap 4 CSSには$enable-で始まるカスタマイズ用組み込み変数がある(
(公式ドキュメントのSass optionsを参照)。この中の$enable-gradientsと$enable-shadowsをtrueに設定することによりグラデーションとシャドウの効果を加えることができる(Versoin 4.1現在はデフォルトがfalse)。
本ページはこれらのオプションを有効にすることによるBootstrapコンポーネントの表示効果の違いを比較するのが目的だが、効果は控えめなものが多く一目では分かりにくいものが多い(アラートやボタンのグラデーション等)。画像ソフトを利用して比較すれば違いを見つけやすい。
以下の項目タイトルは公式ドキュメントと対応しており、タイトルをクリックすると対応する公式ドキュメントへリンクする。
色
背景のグラデーション
.bg-primary
.bg-gradient-primary
.bg-secondary
.bg-gradient-secondary
.bg-success
.bg-gradient-success
.bg-danger
.bg-gradient-danger
.bg-warning
.bg-gradient-warning
.bg-info
.bg-gradient-info
.bg-light
.bg-gradient-light
.bg-dark
.bg-gradient-dark
コード
ユーザ入力
<kbd>は$enable-shadowsによりシャドウが付く。しかし背景(90%グレー)が非常に暗く、違いを判別するのは難しい(画像ソフトでも識別困難)。次は実際の設定例。
シャドウなし と シャドウあり.
そこで設定を少し変えて背景色を40%グレーに変えたものが次の例(参考)。右側の下端にシャドウを確認できる。
シャドウなし と シャドウあり
画像
サムネール用設定
シャドウなし
シャドウあり
アラート
Primary: グラデーションなし
Primary: グラデーションあり
Secondary: グラデーションなし
Secondary: グラデーションあり
Success: グラデーションなし
Success: グラデーションあり
Danger: グラデーションなし
Danger: グラデーションあり
Warning: グラデーションなし
Warning: グラデーションあり
Info: グラデーションなし
Info: グラデーションあり
Light: グラデーションなし
Light: グラデーションあり
Dark: グラデーションなし
Dark: グラデーションあり
ボタン
.btn.btn-primary |
|
.btn.btn-secondary |
|
.btn.btn-success |
|
.btn.btn-danger |
|
.btn.btn-warning |
|
.btn.btn-info |
|
.btn.btn-light |
|
.btn.btn-dark |
カルーセル
前後コントロール付き
ドロップダウン
メニュー背後のシャドウ
アクティブ項目
フォーム
シャドウなし
シャドウあり
カスタムフォームコントロール
カスタムチェックボックス
グラデーション/シャドウなし
グラデーション/シャドウあり
カスタムラジオボタン
グラデーション/シャドウなし
グラデーション/シャドウあり
カスタムレンジ
グラデーション/シャドウなし
グラデーション/シャドウあり
モーダル
ポップオーバー
プログレスバー
シャドウなし
シャドウあり