Help us understand the problem. What is going on with this article?

【初心者でもわかる】文字をグラデーションにする方法

どうも7noteです。文字にもグラデーションをつける方法があるってご存知ですか?

グラデーションといえば、背景のbackgroundに指定するのが一般的です。

今回はこのグラデーションを文字に入れたいと思います。

※IEでは効かないので注意!

書き方

index.html
<p>この文字がグラデーションになる</p>
style.css
p {
  width: 5em;
  color: #ACB6E5;   /* IEでは効かないので、代わりの色を指定 */
  background: -webkit-linear-gradient(0deg, #33f, #f33);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

sample.png

まとめ

IEで効かないのほんとに困る・・・
background-clip自体はIEでも使えるが、background-clip: text;だけIEで使えない。
・・・なぜ、textだけ。

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)

7note
フロントエンジニア4年目。4〜5人ほど後輩の育成経験もあり。HTML・CSS初心者向けにわかりやすい記事を意識して書いていきます!目標毎日更新。自社開発を中心にWEBサイト制作を行っています。約40件のHP制作経験あり。Wordpressで独自テーマの開発などもちょこちょこやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした