見出しタグのボーダーにグラデーションを使ったCSSサンプル集

2020-01-18CSS 見出しタグ, CSS

css

h2やh3などの見出しタグのデザイン等使えるボーダーにグラデーションを使ったCSSサンプル集です。

共通HTML

<h2 class="sample1">sample1</h2>
<h2 class="sample2">sample2</h2>
<h2 class="sample3">sample3</h2>
<h2 class="sample4">sample4</h2>

透過色にフェードアウトしていくボーダーグラデーションのサンプル

See the Pen CSS Design check pattern Checker Red by yochans (@yochans) on CodePen.

右端に向かうにつれてボーダーカラーをグラデーションで透過色にしていく見出し向けのCSSサンプルです。

シンプルですが只の横棒が入るだけより、オシャレになります。

フェードアウトしていくタイミング別に4タイプのサンプルを設置しておきます。

.sample1 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, #4169e1 0% 50%, transparent 100%);
  border-image-slice: 1;
}
.sample2 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, #4169e1 0%, transparent 100%);
  border-image-slice: 1;
}
.sample3 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, #4169e1 0%, transparent 75%);
  border-image-slice: 1;
}
.sample4 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, #4169e1 0%, transparent 50%);
  border-image-slice: 1;
}

複数色グラデーションのボーダーデザインサンプル

See the Pen CSS text Underline Gradation(fade out) by yochans (@yochans) on CodePen.

複数色を使ったグラデーションをボーダーカラーに施したCSSサンプルコードです。

こちらも最後の色にtransparent(透過)を割り当てることで右側手前でフェードアウトしていく感じのボーダーにもなります。

.sample1 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right,
		#FF5252 0%,
		#1E88E5 100%
	);
  border-image-slice: 1;
}
.sample2 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right,
		#FF5252 0%,
		#1E88E5 50%,
		#FFCA28 100%
	);
  border-image-slice: 1;
}
.sample3 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right,
		#FF5252 0% 20%,
		#1E88E5 25% 45%,
		#FFCA28 50% 70%,
		#558B2F 75% 100%
	);
  border-image-slice: 1;
}
.sample4 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right,
		#FF5252 0% 15%,
		#1E88E5 20% 35%,
		#FFCA28 40% 55%,
		#558B2F 60% 75%,
		#E64A19 80% 100%
	);
  border-image-slice: 1;
}

くっきりグラデーションのボーダーデザインサンプル

See the Pen CSS text Underline Gradation(fade out colors) by yochans (@yochans) on CodePen.

徐々に変化するのではなく、くっきりとしたグラデーションを指定しています。

linear-gradientでくっきり色分けする方法は、色の終点値と次の色の始点値を同じにする事で可能です。

.sample1 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right,
		#FF5252 0% 50%,
		#1E88E5 50% 100%
	);
  border-image-slice: 1;
}
.sample2 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right,
		#FF5252 0% 33%,
		#1E88E5 33% 66%,
		#FFCA28 66% 100%
	);
  border-image-slice: 1;
}
.sample3 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right,
		#FF5252 0% 25%,
		#1E88E5 25% 50%,
		#FFCA28 50% 75%,
		#558B2F 75% 100%
	);
  border-image-slice: 1;
}
.sample4 {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right,
		#FF5252 0% 20%,
		#1E88E5 20% 40%,
		#FFCA28 40% 60%,
		#558B2F 60% 80%,
		#E64A19 80% 100%
	);
  border-image-slice: 1;
}

破線(dashed)グラデーションのボーダーデザインサンプル

See the Pen CSS text Underline Gradation(dashed) by yochans (@yochans) on CodePen.

borderにグラデーションを当てると破線(dashed)や点線(dotted)のborder指定は反映されなくなるので、交互に透明色(transparent )と色を切り替える事で破線を表現しています。

.sample1 {
  border-bottom: 3px solid;
  border-image: repeating-linear-gradient(to right,
		#FF5252 0 30px,
		transparent 30px 35px
	);
  border-image-slice: 1;
}
.sample2 {
  border-bottom: 3px solid;
  border-image: repeating-linear-gradient(to right,
		#FF5252 0 30px,
		transparent 30px 35px,
		#1E88E5 35px 65px,
		transparent 65px 70px
	);
  border-image-slice: 1;
}
.sample3 {
  border-bottom: 3px solid;
  border-image: repeating-linear-gradient(to right,
		#FF5252 0 30px,
		transparent 30px 35px,
		#1E88E5 35px 65px,
		transparent 65px 70px,
		#FFCA28 70px 100px,
		transparent 100px 105px
	);
  border-image-slice: 1;
}
.sample4 {
  border-bottom: 3px solid;
  border-image: repeating-linear-gradient(to right,
		#FF5252 0 80px,
		transparent 80px 85px,
		#1E88E5 85px 165px,
		transparent 165px 170px
	);
  border-image-slice: 1;
}

点線(dotted)グラデーションのボーダーデザインサンプル

See the Pen CSS text Underline Gradation(dotted) by yochans (@yochans) on CodePen.

破線(dashed)と同じく点線(dotted)のボーダーCSSサンプルも設置しておきます。
サンプル4は破線と点線の混合タイプです。

.sample1 {
  border-bottom: 3px solid;
  border-image: repeating-linear-gradient(to right,
		#FF5252 0 3px,
		transparent 3px 10px
	);
  border-image-slice: 1;
}
.sample2 {
  border-bottom: 3px solid;
  border-image: repeating-linear-gradient(to right,
		#FF5252 0 3px,
		transparent 3px 10px,
		#1E88E5 10px 13px,
		transparent 13px 20px
	);
  border-image-slice: 1;
}
.sample3 {
  border-bottom: 3px solid;
  border-image: repeating-linear-gradient(to right,
		#FF5252 0 3px,
		transparent 3px 10px,
		#1E88E5 10px 13px,
		transparent 13px 20px,
		#FFCA28 20px 23px,
		transparent 23px 30px
	);
  border-image-slice: 1;
}
.sample4 {
  border-bottom: 3px solid;
  border-image: repeating-linear-gradient(to right,
		#FF5252 0 10px,
		transparent 10px 17px,
		#1E88E5 17px 20px,
		transparent 20px 27px
	);
  border-image-slice: 1;
}

グラデーションのボーダーとシルエット画像をデザインサンプル

See the Pen CSS text Underline Gradation(silhouette) by yochans (@yochans) on CodePen.

グラデーションさせたボーダーと商用OKのキャラクターのシルエットを合わせた見出しタグ向けCSSデザインです。

配布元は以下にリンクしておきます。

シルエットの位置はbackground-position、大きさはpaddingの1つ目の値で調節できます。

.sample1 {
	position:relative;
	padding: 70px 0 10px 0;
	padding-left:1.2em;
	
	border-bottom: 4px solid;
	border-image: linear-gradient(to right, #000 0% 50%, transparent 100%);
	border-image-slice: 1;
	
	background-image:url("https://1-notes.com/wp-content/uploads/2020/01/cat.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0px 20px;
}
.sample2 {
	position:relative;
	padding: 70px 0 10px 0;
	padding-left:1.2em;
	
	border-bottom: 4px solid;
	border-image: linear-gradient(to right, #424242 0% 50%, transparent 100%);
	border-image-slice: 1;
	
	background-image:url("https://1-notes.com/wp-content/uploads/2020/01/dog.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 16px 18px;
}
.sample3 {
	position:relative;
	padding: 70px 0 10px 0;
	padding-left:1.2em;
	
	border-bottom: 4px solid;
 	border-image: linear-gradient(to right, #00008b 0% 50%, transparent 100%);
	border-image-slice: 1;
	
	background-image:url("https://1-notes.com/wp-content/uploads/2020/01/men.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0px 4px;
}

チェック柄のボーダーを使った見出しデザインサンプル

See the Pen CSS text Underline Gradation(fade out) by yochans (@yochans) on CodePen.

もはやグラデーションとはちょっと違ってきますが、linear-gradientを使って作ったチェック柄をボーダーにした見出しタグ用の下線CSSデザインです。

チェック柄については以下にまとめてありますので、宜しければどうぞです。

ボーダーの位置はbottom、太さはheightで変更・調節です。

.sample1{
position: relative;
}

.sample1:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width:100%;
	height:12px;
	background: repeating-linear-gradient( 0deg,
			rgba(   0,   0,   0, 0.4) 0px 4px, /*黒*/
			rgba( 255, 255, 255, 0.4) 4px 8px, /*白*/
			rgba(   0,   0,   0, 0.4) 8px 12px, /*黒*/
			rgba( 255, 255, 255, 0.4) 12px 16px, /*白*/
			rgba(   0,   0,   0, 0.4) 16px 20px, /*黒*/
			rgba( 209, 172, 118, 0.4) 20px 30px, /*香*/
			rgba( 213,   0,   0, 0.4) 30px 32px,/*赤*/
			rgba( 209, 172, 118, 0.4) 32px 36px, /*香*/
			rgba( 213,   0,   0, 0.4) 36px 38px,/*赤*/
			rgba( 209, 172, 118, 0.4) 38px 48px /*香*/
		),
			repeating-linear-gradient( 90deg,
			rgba(   0,   0,   0, 1) 0px 3px, /*黒*/
			rgba( 255, 255, 255, 1) 3px 6px, /*白*/
			rgba(   0,   0,   0, 1) 6px 9px, /*黒*/
			rgba( 255, 255, 255, 1) 9px 12px, /*白*/
			rgba(   0,   0,   0, 1) 12px 15px, /*黒*/
			rgba( 209, 172, 118, 1) 15px 30px, /*香*/
			rgba( 213,   0,   0, 0.8) 30px 31px,/*赤*/
			rgba( 209, 172, 118, 1) 31px 33px, /*香*/
			rgba( 213,   0,   0, 0.8) 33px 34px,/*赤*/
			rgba( 209, 172, 118, 1) 34px 49px /*香*/
		);
}
.sample2{
position: relative;
}

.sample2:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width:100%;
	height:12px;
	background: repeating-linear-gradient( 0deg, rgba(198, 40, 40, .5) 0px 8px,	transparent 8px 16px),
	repeating-linear-gradient( 90deg, rgba(198, 40, 40, .5) 0px 8px, transparent 8px 16px);
}
.sample3{
position: relative;
}

.sample3:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width:100%;
	height:12px;
	background: linear-gradient(45deg, #0277BD 25%, transparent 25%, transparent 75%, #0277BD 75%),
		linear-gradient(45deg, #0277BD 25%, transparent 25%, transparent 75%, #0277BD 75%);
	background-color: #03A9F4;
	background-size: 12px 12px;
	background-position: 0 0, 6px 6px;
}
.sample4{
position: relative;
}

.sample4:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width:100%;
	height:12px;
	background: linear-gradient(45deg, #212121 25%, transparent 25%, transparent 75%, #212121 75%),
		linear-gradient(45deg, #212121 25%, transparent 25%, transparent 75%, #212121 75%);
	background-color: #BDBDBD;
	background-size: 12px 12px;
	background-position: 0 0, 6px 6px;
}

2020-01-18CSS 見出しタグ, CSS

Posted by Yousuke.U