メモがてら。
現時点でこのブログのサブタイトルに適用しているので、前回の記事とかで実際に確認できます。
- 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 も無視していくかな。