2018/08/17先日、Apple社から新製品の発表がありました!iPhoneXSやらが話題となっていますが、僕の周りでApple公式サイトの商品紹介ページのテキストデザインがプチ話題に挙がっていました。こちらから見てみてください。https://codepen.io/ebifly/pen/VGdOjX/ポイントは以下の3つのスタイルをテキストに対して設定してあげることです。transparent;上から順に説明してきます。background-imgテキスト範囲の背景に画像を設定します。background-clip:textbackgroundをテキストの形にマスクします。この時点ではデフォルトの文字色が入っているため背景は見えません。transparent;デフォルトで入っている文字色を透明に変更するとマスクされた背景画像が見えるようになる!というわけです。まとめカッコイイデザインを発見したときはコードを覗いてみると、普段使わないようなプロパティを発見出来たり、自分の引き出しを増やすことが出来るのでオススメです。見るだけで終わらせず、実際にコードを書いてみるとさらなる発見に繋がります。それがブラウザだけで出来る。CodoPenならね。