Result
CSSだけでマルチカラーなテキストを作る、みたいなの。
プロフェッショナルなWeb屋さんにとっては見れば即タネのわかる今更な話題かもですが。
css
:root { --color-1: #186cb8; --color-2: #2a9a9f; --color-3: #f1b211; --color-4: #e83611; --color-5: #f9002f;}h1 { background: linear-gradient(219deg, var(--color-1) 19%, transparent 19%,transparent 20%, var(--color-2) 20%, var(--color-2) 39%, transparent 39%,transparent 40%, var(--color-3) 40%,var(--color-3) 59% , transparent 59%,transparent 60%, var(--color-4) 60%, var(--color-4) 79%, transparent 79%, transparent 80%, var(--color-5) 80%); background-clip: text; -webkit-background-clip: text; color: transparent;} |
画像でテキスト作る時と同じです。要素の背景をグラデーションにしてbackground-clip: text;でテキスト部分を透過しています。
can i use
background-clipのブラウザ対応状況です。特に問題ないですね。
