CSSでborderにグラデーションを使って、よくある見出しを作る

borderにグラーデーションって、あまり使い勝手がない気もしますが、たまたま見出しとかに使ってみる機会があったのでやってみました。

//HTML
<h1><span>左にグラデーションがあるタイトルです</span></h1>

//CSS
h1 {
	border: 1px solid #B8C3CC;
	padding:20px 20px;
	background: -moz-linear-gradient(top,#FFFFFF 0%,#FDFDFD);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FDFDFD));
}
h1 span {
	padding-left: 16px;
	font-size: 24px;
	position: relative;
}
h1 span:before {
	height: 100%;
	content:"";
	display:block;
	width:6px; /* borderの太さ */
	background: linear-gradient(to bottom, #92C8A1 0%,#3EA158 100%); /* borderのグラデーション */
	position: absolute;
	top:0; /* borderの位置調整 */
	left:0;
}

CSSでborderにグラデーションを使った見出しのサンプル

※ただし、ie7～9まではうまく表示されないので、ie用に対策をするか割りきって切り捨てるか。
スマホで使う場合は、今のとこ問題なさげです。

参考サイト
(K)CSSでborderにグラデーションをかける場合はこうするしかないかな？ | web(K)campus