iPhone XSのページにあるグラデーション文字を真似してみた

公開

今日未明に新型iPhoneが発表されました。早速「iPhone XS」のページを眺めていたのですが、途中にグラデーション、もしくはパターンが適用されたような文字があることに気付きました。例えば「Super Retina。迫力と大迫力。」の下にある金色に見える文字です。

どのように実装しているのかインスペクターで確認したところ、とても興味深かったので自分でも再現してみました。コードは以下の通りで、background-clip: textとcolor: transparentがポイントのようです。IE11がbackground-clipに対応していないようでしたので、@supportsを利用して別の色が表示されるようにしました。

.Sample1 {
    padding: 20px 40px;
    background-color: #000;
}
.Sample1__contents {
    line-height: 1.5;
    font-family: Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    font-weight: bold;
    font-size: 3rem;
    color: #c00; /* サンプルのため非適用状態が分かりやすいように */
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .Sample1__contents {
        background: #fda71e url(./bg_sample.jpg) repeat;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
/* Edge対応 */
.Sample1__contents > * {
    display: inline;
}

HTMLは以下の通りです。

<div class="Sample1">
  <div class="Sample1__contents">
    <p>ついにiPhone X<span style="font-variant-caps: all-small-caps;">S</span>が登場！<br>
      OLEDディスプレイを採用した<br>
      美しい画面が魅力的！</p>
  </div><!-- /.Sample1__contents -->
</div><!-- /.Sample1 -->

サンプルコードで指定した背景画像はPhotoshopを使用し、石のパターンを敷いて作成しました。大きめに作成しましたが、パターンやグラデーションに応じて調整すれば良さそうです。

サンプルコードを表示させると以下のようになります。

ついにiPhone XSが登場！
OLEDディスプレイを採用した
美しい画面が魅力的！

背景画像が読み込まれなかった場合にテキストが見えなくなるのではないかという不安、そしてアクセシビリティ…文字のコントラストが気になるところですが、久しぶりに「おぉっ」と感じるCSSでした。普段制作で関わらないサイトやデザインを見るのは勉強になりますね。

2018年9月15日追記

「背景画像が読み込まれなかった場合にテキストが見えなくなるのではないかという不安」と記した件について、@neotagさんより、「背景画像と一緒に background-color 指定してあげるとどうにかなったような記憶」とコメントを頂きました。試してみたところ確かに指定した背景色で文字が表示され、フォールバックの役割を果たしました。背景色を同時に指定しておくことを忘れていたな…と思いました。