文字などにアクセントを付ける CSS linear-gradient

スポンサーリンク
スポンサーリンク

文字などにアクセントを付ける

こんな感じでアンダーラインというかアクセントを付けてみたかったのでちょいと CSS をお勉強

span1です span2です span3です span4です span5です
.span1 {
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,#ffb9e9)
}
.span2 {
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,#f7d459)
}
.span3 {
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,#f21e5a)
}
.span4 {
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,#7e99f2)
}
.span5 {
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,#00ab10)
}

linear-gradient

グラデーションの方向

background: linear-gradient(to top,rgba(00, 80, 80, 0),#008080)
background: linear-gradient(to bottom,rgba(00, 80, 80, 0),#008080)

透明度
1 が「完全に不透明」
0 が「完全に透明」

background: linear-gradient(to bottom,rgba(00, 80, 80, 1),#008080)
background: linear-gradient(to bottom,rgba(00, 80, 80, 0),#008080)
background: linear-gradient(to bottom,#fff,#008080)

色の変わる位置

background: linear-gradient(to bottom,rgba(00, 80, 80, 0) 50%,#008080)
background: linear-gradient(to bottom,rgba(00, 80, 80, 0),#008080 50%)
background: linear-gradient(to bottom,#fff,#008080 50%)

コメント