CSS 縁取り文字を作る デザインサンプル

文字自体に色は付けず、縁だけを色で塗る「縁取り文字」のCSSデザインサンプルです。

1. text-shadowで作る

See the Pen
css – outlin text
by kura (@kuranopen)
on CodePen.

文字の影を作るCSSプロパティtext-shadowを使用した縁取り文字です。

複数指定できる,で区切りを使って縁を作っています。
#000を変えることで別の色変更できます。

  • IE10、IE11対応

2. text-strokeで作る

See the Pen
css – outlin text
by kura (@kuranopen)
on CodePen.

縁取りできるCSSプロパティtext-strokeを使用した縁取り文字です。

1pxで縁の太さ、#FFFで縁の色を変更できます。

  • 文字色の透過可
  • IE非対応

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note