グラデーションの指定

Lorem ipsum dolor sit amet, consectetur adipisicing elit.


<div class="gradient-border"> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>


.gradient-border {
	border-bottom: 4px solid #0af;
	border-image: linear-gradient(to right, #0af 0%, #6f0 100%);
	border-image-slice: 1;
	}


<input type="submit" class="ghost-btn" name="submit" value="Ghost Button Submit">
<input type="reset" class="ghost-btn" name="reset" value="Ghost Button Reset">


input[class|="ghost-btn"] {
	margin: 1rem;
	padding: 1rem 2rem;
	border-radius: 0;
	color: #666;
	}
input[type=submit].ghost-btn {
	border: 2px solid #0cb0e0;
	border-image: linear-gradient(to right, #0cb0e0 0%, #adff2f 100%);
	border-image-slice: 1;
	}
input[type=submit].ghost-btn:hover {
	background: #e0ffff;
	}

input[type=reset].ghost-btn {
	border: 2px solid #c21500;
	border-image: linear-gradient(to right, #c21500 0%, #ffc500 100%);
	border-image-slice: 1;
	}
input[type=reset].ghost-btn:hover {
	background: #f9cab0;
	}

テキストにグラデーションの指定

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga reprehenderit architecto


<p class="gradient-text">Lorem ipsum dol.........nderit architecto</p>


.gradient-text {
	font-size: 2rem;
	font-weight: bold;
	background: -webkit-linear-gradient(0deg, #0af, #6f0); /* colorより前に記述する */
	color: #0af; /* 非対応のブラウザの為に色を設定 */
	background-clip: text; /* テキストで切り抜く */
	-webkit-text-fill-color: transparent; /* 切り抜いた部分は背景を表示 */
	}
/*backgroundとtext-fill-colorにwebkitのプレフィックスが付いているが、
　付いていないと、Edgeなどwebkit系以外のブラウザでも正しく表示されない… */

TOP