【コーディング】HTMLとCSSで作れる！見出しに使えるおしゃれな文字装飾サンプル

シトラスジャパン株式会社 2018/3/12 12:06 サイト制作／デザイン | コラム

3 5 9

※この記事は読者によって投稿されたユーザー投稿です：

編集部の見解や意向と異なる内容の場合があります
編集部は内容について正確性を保証できません
画像が表示されない場合、編集部では対応できません
内容の追加・修正も編集部では対応できません

CSS3がほとんどのブラウザでサポートされるようになり、今まで画像で再現するしかなかったデザインがCSSでも表現できるようになってきています。大昔にさかのぼると、角丸も作れない、なんて時代がありましたが、今となってはCSSを書くだけで実現できます。CSSでこれだけのことができるよ！と紹介したいのですがキリがないので、今回は「文字の装飾」にしぼってご紹介します。

Webでかわいくておしゃれな見出しを作るとなると、昔はデザインデータから画像を切り出して・・・と作業していましたが、HTMLとCSSで表現できれば色の変更などの編集や複製がとっても楽ですよね！
また、ホバーエフェクト(マウスオンで色が変わるなど)の適用も画像を使うより簡単です。
ここでは皆さんに「CSSだけでここまでデザインが再現できる」ということを知っていただきたく、いくつかサンプルを作ってみました。

はじめに

全スタイル共通で使用するHTMLはこちらです。

<p class="《任意のクラス》">テキストTEXTtext</p>

写真を文字の形に切り抜く

背景画像を文字の形にマスクして、文字に写真を重ねたような効果も、CSSで表現できます。
ゴシック体も木目調で一気に優しい印象に！デザインの統一感が取れて◎ですね！
(※IEには対応していませんのでご注意ください)

.backgroundImage{
    background: url(背景画像パス);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

グラデーション

上記の写真と同じ方法を使っていますが、背景にグラデーションを敷いています。
(※こちらもIEには対応していませんのでご注意ください)

.gradation{
    background: -webkit-linear-gradient(to right, #e5033e, #b701b5, #4a02c2);
    background: linear-gradient(to right, #e5033e, #b701b5, #4a02c2);
    mix-blend-mode: screen;
    color: #ffffff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}