background-clip: text の使い方 [CSS]

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
Privacy - Terms