HTMLとCSSで作れる！見出しに使えるおしゃれな文字装飾サンプル

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;
}

影をつける

text-shadowで影をつけただけですが...
 

▼続きはこちら▼
https://citrusjapan.co.jp/column/cj-column/w006_201803.html