background-clip: text の使い方

color: inherit; // for unsupported browsers
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

参考:

フォントに斜めグラデーションを入れる – Qiita

CSS3 でテキストにグラデーションをかける方法 | mariweb

CSS だけでグラデーションの見出しとボーダーを作る!- bagelee ベーグリー

background-clip を使って、テキストの下に画像を表示するスタイルシート | コリス

アイデア次第で効果的な使い方ができるかも!? background-clip: text; を使って背景画像を文字でマスクする方法 – ウェブ企画ラボ

background-clip と text-fill-color を使って css を使って文字で画像を切り抜く – WEBサイト制作の勉強

文字で切り抜き? 文字色に背景? -webkit-background-clip と -webkit-text-fill-color | P で作業軽減しましょ

CSS でグラデーションテキスト | Mana Design Lab.

アニメーション

参考:

CSS だけでテキストを虹色のグラデーションでアニメーションさせる – Corredor

background-clip

参考:

CSS3のbackground-clipプロパティって知ってた? – Qiita

background-clip-CSS3リファレンス

background-clip – CSS: カスケーディングスタイルシート | MDN

未対応ブラウザへの対策

参考:

文字にグラデーションをかける方法 | Designmemo

CSS で文字にグラデーション Modernizr でクロスブラウザ対応 – Qiita

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA