webruary

RSS

CSS でテキストを横グラデーションで装飾。

メモがてら。
現時点でこのブログのサブタイトルに適用しているので、前回の記事とかで実際に確認できます。

css
h1{
	display: inline-block;
	color: transparent;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(to right, #1E67BD, #943F94);
}
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
	h1{
		color: #1E67BD;
		background-image: none;
	}
}

『display: inline-block;』の部分は、ブロック要素だと横いっぱいになる関係で文字数分のグラデーションにならないのを防ぐため。
なので <strong> とか <span> とかのインライン要素なら不要。

『background-clip: text;』は Firefox(Ver.60) ではプレフィックス無しでもイケましたが、Chrome ではプレフィックスが必要だったので『-webkit-background-clip: text;』も入れてます。

グラデーションは『linear-gradient』の『to right』で横にしてますが、『90deg』とか角度を指定しても大丈夫。

そして IE(10・11) は『background-clip』の『text』に対応していないので、『@media screen~』のハックで対応しました。
はい。IE 9 以下は切り捨てるスタイル。
むしろ Windows7 のサポートが終わってしばらくしたら、 IE 11 も無視していくかな。