【コーディング】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担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

Web業界の転職情報

もっと見る
Sponsored by

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

今日の用語

インタースティシャル広告
ページ移動時にページとページの間に独立ページとして表示する広告のこと。スプラッシ ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


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