linear-gradient関数の概要
| 線形グラデーションCSS | ||
| linear-gradient() | ||
| 目的 | backgroundなどについて、グラデーション | |
| 使用 | <div> <span> など背景を持つ要素について | |
| 関連 | background | |
| 初期 | – | |
|
linear-gradient(to top,#ff0000 0%, #0000ff 50%)
|
||
<div style="width: 80%; height: 100px; background: linear-gradient(to top,#ff0000 0% ,#0000ff 50%); margin: auto;"> <span style="color: #ffffff;">linear-gradient(to top,#ff0000 0%, #0000ff 50%)</span> </div> |
||
値
linear-gradient( 方向 , 色 始点 , 色 終点 )
#ff0000 が赤 #0000ffが青
方向
| 上へ向かうグラデーション |
|
| linear-gradient(to top,#ff0000 0%, #0000ff 50%) | |
| 右上へ向かうグラデーション |
|
| linear-gradient(to top right,#ff0000 0%, #0000ff 50%) | |
| 右へ向かうグラデーション |
|
| linear-gradient(to right,#ff0000 0%, #0000ff 50%) | |
| 右下へ向かうグラデーション |
|
| linear-gradient(to bottom right,#ff0000 0%, #0000ff 50%) | |
| 下へ向かうグラデーション |
|
| linear-gradient(to bottom,#ff0000 0%, #0000ff 50%) | |
| 左下へ向かうグラデーション |
|
| linear-gradient(to bottom left,#ff0000 0%, #0000ff 50%) | |
| 左へ向かうグラデーション |
|
| linear-gradient(to left,#ff0000 0%, #0000ff 50%) | |
| 左上へ向かうグラデーション |
|
| linear-gradient(to top left,#ff0000 0%, #0000ff 50%) | |
| プラス角度を指定するグラデーション |
|
| linear-gradient(5deg,#ff0000 0%, #0000ff 50%) | |
| マイナス角度を指定するグラデーション |
|
| linear-gradient(-5deg,#ff0000 0%, #0000ff 50%) |
色
| 透過する |
|
| linear-gradient(to top,#ff0000 0%, transparent 50%) |
始点と終点
| 始点と終点 ※グラデーションが下から30％からスタート |
|
| linear-gradient(to right,#ff0000 30%, #0000ff 70%) |
lienear-gradient関数を使ったデザイン
蛍光ペンでマーカーを引く
リアルな蛍光マーカーを引く コピペで使えるHTML+CSS
文字に蛍光マーカーを引くためにlinear-gradientを使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンを再現！
programming-cafe.com