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 も無視していくかな。
Comment Form