web

【CSS】Apple新商品サイトみたいなグラデーションテキストの作り方

先日、Apple社から新製品の発表がありました!
iPhoneXSやらが話題となっていますが、僕の周りでApple公式サイトの商品紹介ページのテキストデザインがプチ話題に挙がっていました。
こちらから見てみてください。
テキストになんかグラデーションみたいのかかっててカッコイイ!作ってみたい!

作った!

See the Pen GradationText by ebifly (@ebifly) on CodePen.


ポイントは以下の3つのスタイルをテキストに対して設定してあげることです。

background-img: url(imgPath); // 使用する画像へのパスを入力
background-clip: text;
color: transparent;

上から順に説明してきます。

background-img

テキスト範囲の背景に画像を設定します。

background-clip:text

backgroundをテキストの形にマスクします。この時点ではデフォルトの文字色が入っているため背景は見えません。

color: transparent;

デフォルトで入っている文字色を透明に変更するとマスクされた背景画像が見えるようになる!というわけです。

まとめ

カッコイイデザインを発見したときはコードを覗いてみると、普段使わないようなプロパティを発見出来たり、自分の引き出しを増やすことが出来るのでオススメです。
見るだけで終わらせず、実際にコードを書いてみるとさらなる発見に繋がります。
それがブラウザだけで出来る。
そう、CodoPenならね。

ピックアップ記事

  1. 勉強会に行って人生が変わった話 SaCSS.vol94
  2. 【動画】Adobe XD 2018年6月の新機能まとめ

関連記事

  1. web

    css gridでドット絵を描こう 仕組み編

    今回はcss gridを勉強している時に、「あれ?これってめちゃめちゃ…

  2. web

    勉強会に行って人生が変わった話 SaCSS.vol94

    2018年4月21日(土)のSaCSSvol.94のLT回にて、僕の体…

  3. web

    css gridの実用的な使い方

    最近css gridを実務で利用することがあり、改めてしっかり勉強して…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

カテゴリー

PAGE TOP