カテゴリ別に表示出来ます
-
>>背景の装飾 - 色のグラデーション (3) 見出しの装飾
背景の装飾 色のグラデーション (3)
※ 背景をベタ塗ではなくグラデーションの指定で塗ります。
red(赤)からyellow(黄色) への縦のグラデーションです。[ 閉じる ]
htmlソース
<h4 class="background-ex3"> 背景の装飾 色のグラデーション (3) </h4>
CSS
.background-ex3 { padding-left: 20px !important; /* 本システムCSSの干渉を変更します */ background: linear-gradient(transparent 0%, red 70%, yellow 90%); color: #fff; font-size: 20px !important; font-weight: normal; height: 56px !important; display: flex; align-items: center; }
-
>>背景の装飾 - 色塗 (1) 見出しの装飾
背景の装飾 色塗 (1)
※ 背景を色で塗ります。
[ 閉じる ]
htmlソース
<h4 class="background-ex4"> 背景の装飾 色塗 (1) </h4>
CSS
.background-ex4 { padding-left: 2rem !important; /* 本システムCSSの干渉を変更します */ background: linear-gradient(15deg, red 50%, yellow 50%); color: #fff; font-size: 20px !important; font-weight: normal; height: 56px !important; display: flex; align-items: center; }
-
>>見出しの装飾 - 左右にラインを入れる 見出しの装飾
見出しの装飾 - 左右にラインを入れる
※ 背景色を利用して疑似的にラインを描画します。
[ 閉じる ]
htmlソース
<h4 class="background-ex5"> <span>見出しの装飾 - 左右にラインを入れる</span> </h4>
CSS
.background-ex5 { margin-top: 12px !important; /* 本システムCSSの干渉を変更します */ position: relative; color: #333; font-size: 20px !important; font-weight: normal; display: flex; align-items: center; justify-content: center; } .background-ex5 span { position: relative; z-index: 100; display: inline-block; margin: 0 2.5em; padding: 0 1em; background-color: #fff; text-align: left; } .background-ex5::before { position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: 1px; background-color: red; /* 線の色 */ }
-
>>見出しの装飾 - マーカーでひいたようなラインを入れる 見出しの装飾
見出しの装飾 - マーカーでひいたようなラインを入れる
※ 背景色を利用して文字の半分のみマーカーをひいたように色をつけます。
[ 閉じる ]
htmlソース
<h4 class="background-ex6"> <span>見出しの装飾 - マーカーでひいたようなラインを入れる</span> </h4>
CSS
.background-ex6 { background: linear-gradient(transparent 50%, #fffea4 0%); }