【コーディング】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

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

有料検索エンジン登録
検索エンジンに対して料金を支払って、検索結果ページに反映させること。 リスティ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]