未経験からエンジニア、そして採用担当のブログ|kakureblog

未経験からエンジニアになれた経験、エンジニア転職のヒントやプログラミングのTipsを届けます🤟

コーディング

【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)

投稿日:2019年9月7日 更新日:

こんにちは。

日頃インプットしてイイなーっと思った小技を紹介していこうと思います。

今回は画像をテキストの形に合わせてクリッピング(切り抜く)方法を紹介したいと思います。この方法を使うことでテキスト内に背景画像を入れ込むことや、テキストの色をグラデーションで表現できる様になります。


下記画像のようなイメージです。

こんな感じです。

では説明していきます。

まずテキストを用意します。

<section class="section">
   <div class="inner">
       <p class="coloredText">colored text.</p>
   </div>
</section>


そしてベースとなるCSS(SCSS)はこちらです。

.section{
    margin: 350px auto;
    .inner{
        width: 1200px;
        margin: 0 auto;
        .coloredText{
            font-size: 60px;
            margin: 0 auto;
            color: #fff;
        }
    }
}


次に背景画像を用意します。サイズはcoverを指定します。

背景画像
.section{
    margin: 350px auto;
    .inner{
        width: 1200px;
        margin: 0 auto;
        .coloredText{
            font-size: 60px;
            margin: 0 auto;
            color: #fff;
            background-image: url(../img/text-bg.jpg);
            background-size: cover;
        }
    }
}


ここにbackground-clip: text;を入れます。
※「background-clip: text;」は対応ブラウザがChorme、Safariのみなので、記述自体は「-webkit-background-clip: text;」となります。

.section{
    margin: 350px auto;
    .inner{
        width: 1200px;
        margin: 0 auto;
        .coloredText{
            font-size: 60px;
            margin: 0 auto;
            color: #fff;
            background-image: url(../img/text-bg.jpg);
            background-size: cover;
            -webkit-background-clip: text;
        }
    }
}
テキスト


完成です。


画像ではなくグラデーションを入れたい場合は、下記のようにすれば画像とは違うパターンも作れます。

.section{
    margin: 350px auto;
    .inner{
        width: 1200px;
        margin: 0 auto;
        .coloredText{
            font-size: 60px;
            margin: 0 auto;
            color: #fff;
            background-image: linear-gradient(to right, #000, pink);
            -webkit-background-clip: text;
        }
    }
}
テキスト

このようになります。(かっこよくないですか?w)


また小技を見つけたら紹介します!
でわ!

-コーディング
-, , ,

執筆者:

関連記事

プログラミングを独学で始めて3年間の成長ログ【現役フロントエンドエンジニアの振り返り】

プログラミングを独学からスタートし約3年間が過ぎたのでその成長ログを書こうと思います。

CSS

【CSS】文字を下線(アンダーライン)で目立たせる。コピペOK。

CSSでテキストにアンダーラインを引く方法をいくつか紹介します。普通の下線、太線、マーカー風の下線まで表現できる実装をまとめました。ブログやLP制作で、ユーザーの目線を奪うことは重要です。それにはテキストを際立たせる必要になる時があります。そんな時の為にアンダーラインの理解を深めましょう。

CSS

【CSS】outlineの特徴まとめ 〜borderとの違いまで〜

outlineとborderの違いについて書きました。今まではborderしか使っていなかったのですが、outlineの特徴を知れば、コーディングでできることの幅が広がります。脱初心者を目指して。

CSS

【CSS】hoverした時に別要素にアクションをさせる方法

今回はhoverした時に別の要素にアクションをつける方法を書きました。意外に躓くところなので、一読していただければと思います。脱初心者の為の内容となっています。

勉強

プログラミング初心者の独学の方法、おすすめ教材

完全初心者からWebチーム内で戦えるようになった方法について書きます。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。