グラデーション必須４項目！！
Share
こんなことを説明しています！
- グラデーションの基本形
- 応用(円形/角度指定/複数色)
- テキストグラデーション
- 枠線グラデーション
- ホバーアクションの設定の仕方
解説動画
コードの解説
HTMLコード
<main>
<h2>背景の指定</h2>
<div class="grade-bg liner">線型グラデーション(基本)</div>
<div class="grade-bg mix">65度の角度で4色グラデーション</div>
<div class="grade-bg radial">円形グラデーション</div>
<h2>テキストの指定</h2>
<p class="grade-text">テキストのグラデーション</p>
<h2>枠線の指定</h2>
<div class="grade-border">枠線のグラデーション</div>
<h2>ホバーの設定方法</h2>
<div class="grade-hover miss">通常のホバーの指定をすると...</div>
<div class="grade-hover success"><span>正しくはこのように指定！</span></div>
</main>
CSSコード
.grade-bg {
&.liner {
//線型グラデーション
background-image: linear-gradient(to right, lightblue, yellow);
}
&.mix {
//3色以上, 角度指定
background-image: linear-gradient(65deg, lightblue, orange 25%, red 75%, yellow);
}
&.radial {
//円形グラデーション
background-image: radial-gradient(lightblue, yellow);
}
}
.grade-text {
//テキストグラデーション
display: inline-block;
background-image: linear-gradient(to right, lightblue, yellow);
-webkit-background-clip: text; //グラデーションをかける領域を指定
-webkit-text-fill-color: transparent; //テキストを透明に
}
.grade-border {
//枠線グラデーション
border: 10px solid;
border-image: linear-gradient(to right, lightblue, yellow);
border-image-slice: 1; //枠線にグラデーションを指定
}
.grade-hover.miss {
//間違った方法
background-image: linear-gradient(to right, lightblue, yellow);
transition: all 0.5s ease;
&:hover {
cursor: pointer;
background-image: linear-gradient(to right, yellow, lightblue);
}
}
.grade-hover.success {
//正しい方法
span {
//テキスト
position: relative;
z-index: 2;
}
position: relative;
&::before {
//ホバーする前の背景
content: '';
position: absolute;
z-index: 1;
opacity: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, lightblue, yellow);
transition: all 0.5s ease;
}
&::after {
//ホバーした後の背景
content: '';
position: absolute;
z-index: 0;
opacity: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, yellow, lightblue);
}
&:hover {
cursor: pointer;
&::before {
opacity: 0;
}
}
}
ポイント
★線型グラデーション
▶︎ background-image: linear-gradient(to direction, start, end);
★角度の指定
▶︎ direction(方向) → deg(角度)へ変更可能
★円形グラデーション
▶︎ linear → radial に変更
▶︎ to directionを消す
★テキストの場合
▶︎ display: inline-block: // テキスト部分だけをグラデーション
▶︎ -webkit-background-clip: text; //グラデーションをかける領域を指定
▶︎ -webkit-text-fill-color: transparent; //テキストを透明に
★枠線の場合
▶︎ background-image → border-imageに変更
▶︎ border-image-slice: 1; //枠線にグラデーションを指定
解説で使用したスニペット
グラデーション系は結構複雑なので、以下のようなスニペットを用意し「read-grade」と打ったら説明が出てくるように登録してあります！
忘れた時にすぐ教科書が出てくる感じで便利です！(参考サイトのURLなどを登録しておくと一瞬で飛べるので良いかもですね^^)
scss.json"read-grade": {
"prefix": "read-grade",
"body": [
"// 基本 ========================",
"// ★線型グラデーション",
"// ▶︎ background-image: linear-gradient(to direction, start, end);",
"// ",
"// ★角度の指定",
"// ▶︎ direction(方向) → deg(角度)へ変更可能",
"// ",
"// ★円形グラデーション",
"// ▶︎ linear → radial に変更",
"// ▶︎ to directionを消す",
"//",
"// ★テキストの場合",
"// display: inline-block; // テキストの部分だけをグラデーション",
"// -webkit-background-clip: text; //グラデーションをかける領域を指定",
"// -webkit-text-fill-color: transparent; //テキストを透明に",
"//",
"// ★枠線の場合",
"// ▶︎ background-image → border-imageに変更",
"// border-image-slice: 1; //枠線にグラデーションを指定",
"// =============================",
],
"description": ""
},
