CSS

CSS｜テキストをストライプ柄やドット柄にしたりいろんな装飾をしてみる

テキストにCSSでどんな装飾ができるのかなと思っていろいろ実験してみたのでサンプルを公開します。

コンテンツ

スタイルシートを使ったテキストの装飾

ストライプ柄をクリップ

ボタンで表示を切り替えてご覧ください。

See the Pen test01 by kenichi (@ken81) on CodePen.

p.text_clip{
  font-size:80px;
  font-weight: bold;
  margin: 0;
  background-image: linear-gradient(
    -45deg,
    #7fc7f6 15%, #fff 15%,
    #fff 25%, #7fc7f6 25%,
    #7fc7f6 65%, #fff 65%,
    #fff 75%, #7fc7f6 75%,
    #7fc7f6
  );
  background-size: 15px 15px;
  -webkit-background-clip: text;
  color: transparent;
}

ポイントは、-webkit-background-clip: text;で背景をテキストでクリップして、color: transparent;でテキストを透明にするところです。

背景画像をテキストで切り抜く方法
2018.04.17
背景画像をテキストで切り抜く方法
ここでは、こんな感じでテキストが背景画像になっているというか、背景画像をテキストで切り抜く方法について見ていきます。 沖縄の海を満喫しよう！ 文字の背景が海になっているの分かりますか？ 背景画像をテキストで切り抜く方法 この背景画像が...

ストライプの作り方が分からない方は下記も参照にしてみてください。

斜めのストライプをCSSのみでデザインする方法
2018.04.08
斜めのストライプをCSSのみでデザインする方法
ここでは、背景などのデザインとして活用できる斜めのストライプ柄をCSSのみで実装してみたいと思います。できあがるのは、こんなデザインです。 See the Pen striped04 by kenichi (@ken81) on CodePen. ...

ドット柄をクリップ

See the Pen test02 by kenichi (@ken81) on CodePen.

p.text_clip{
  margin: 0;
  font-size:80px;
  font-weight: bold;
  background-size: 10px 10px;
  background-color: #00A0E9;
  background-image: radial-gradient(#ffffb1 25%, transparent 40%),
                    radial-gradient(#ffffb1 25%, transparent 40%);
  background-position: 0 0, 5px 5px;
  -webkit-background-clip: text;
  color: transparent;
}

先ほどのストライプ柄をドット柄にしただけです。ドット柄の作り方は下記で解説しています。

CSSでドット柄（水玉）を作る方法
2018.06.30
CSSでドット柄（水玉）を作る方法
ここではスタイルシートを使ったドット柄の作り方を順を追って見ていきたいと思います。この記事を読み終わるころには、下記のようなドット柄が自分で自在に作れるようになります。 See the Pen dot09 by kenichi (@ken81) on...

柄模様だけだとテキストが見づらいので縁取りをしてみましょう。

テキストの縁取り

See the Pen test03 by kenichi (@ken81) on CodePen.

p.text_clip{
  font-size:70px;
  font-weight: bold;
  margin: 0;
  background-image: linear-gradient(
    -45deg,
    #7fc7f6 15%, #fff 15%,
    #fff 25%, #7fc7f6 25%,
    #7fc7f6 65%, #fff 65%,
    #fff 75%, #7fc7f6 75%,
    #7fc7f6
  );
  background-size: 15px 15px;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #005ab3;
}

-webkit-text-stroke: 3px #005ab3;という部分がテキストの縁取りをしているプロパティです。ボーダーと同じように線の太さと色を指定します。

See the Pen test04 by kenichi (@ken81) on CodePen.

p.text_clip{
  margin: 0;
  font-size:70px;
  font-weight: bold;
  background-size: 10px 10px;
  background-color: #00A0E9;
  background-image: radial-gradient(#ffffb1 25%, transparent 40%),
                    radial-gradient(#ffffb1 25%, transparent 40%);
  background-position: 0 0, 5px 5px;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #005ab3;
}

text-shadowで影を入れる

See the Pen test05 by kenichi (@ken81) on CodePen.

p.text_clip{
  font-size:70px;
  font-weight: bold;
  margin: 0;
  background-image: linear-gradient(
    -45deg,
    #7fc7f6 15%, #fff 15%,
    #fff 25%, #7fc7f6 25%,
    #7fc7f6 65%, #fff 65%,
    #fff 75%, #7fc7f6 75%,
    #7fc7f6
  );
  background-size: 15px 15px;
  -webkit-background-clip: text;
  color: transparent;
  background-position: center;
  text-shadow: -5px -5px 0 #005ab3;
}

text-shadowで影を入れようと思ったのですが、クリップしたテキストの場合は、「影」の方が上に来てしまうみたいです。だから、背景柄を影的に演出してみました。

See the Pen test06 by kenichi (@ken81) on CodePen.

CSS

p.text_clip{
  font-size:70px;
  font-weight: bold;
  margin: 0;
  background-size: 10px 10px;
  margin: 0 auto;
  background-color: #00A0E9;
  background-image: radial-gradient(#ffffb1 25%, transparent 40%),
                    radial-gradient(#ffffb1 25%, transparent 40%);
  background-position: 0 0, 5px 5px;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: -5px -5px 0 #005ab3;
}

See the Pen test07 by kenichi (@ken81) on CodePen.

CSS

p.text_clip{
  margin: 0;
  font-size:80px;
  font-weight: bold;
  background-size: 10px 10px;
  margin: 0 auto;
  background-color: #00A0E9;
  background-image: radial-gradient(#ffffb1 25%, transparent 40%),
                    radial-gradient(#ffffb1 25%, transparent 40%);
  background-position: 0 0, 5px 5px;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}
p.text_clip::before{
  content: "沖縄の海";
  position: absolute;
  color: #005ab3;
  top: 5px;
  left: 5px;
  z-index: -1;
}

背景と影を逆にしたいというときは、text-shadowではなくて、疑似要素::beforeを使った方が良さそうです。

See the Pen test08 by kenichi (@ken81) on CodePen.

CSS

p.text_clip{
  font-size:70px;
  font-weight: bold;
  margin: 0;
    background-image: linear-gradient(
    -45deg,
    #7fc7f6 15%, #fff 15%,
    #fff 25%, #7fc7f6 25%,
    #7fc7f6 65%, #fff 65%,
    #fff 75%, #7fc7f6 75%,
    #7fc7f6
  );
  background-size: 15px 15px;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #005ab3;
  position: relative;
}
p.text_clip:before{
  content: "沖縄の海";
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: -1;
}

ちなみに、疑似要素にcolorや-webkit-text-strokeを何も指定しないと、値が継承されるのでこんな感じで縁取りのある透明なテキストになったりします。これはこれでありかもしれませんね。

See the Pen test9 by kenichi (@ken81) on CodePen.

CSS

p.text_clip{
  font-size:70px;
  font-weight: bold;
  margin: 0;
  color: transparent;
  -webkit-text-stroke: 3px #005ab3;
  position: relative;
  text-shadow:#FF00FB 3px 3px 0px
}

text-shadowが上に来る性質を利用して、こんな感じでテキストの縁取りと中の塗がズレた演出をしてみるのも良いと思います。

以上がテキストを使ったいろんな装飾でした。何かデザインのヒントになれば幸いです。

最近の記事

  1. 2023.03.8

    クリックでYouTube動画をポップアップ再生させ…

    WordPress内でリンクをクリックしたらYouTube動画がポップアップさ…

  2. 2020.11.22

    Photoshop｜写真の境界線をボカす方法

    Photoshop｜写真の境界線をボカす方法以前、こちらの記事…

  3. 2020.11.22

    Illustrator｜筆で描いた文字をパスに変え…

    Illustrator｜筆で描いた文字をパスに変える方法ここでは筆で書…

  4. 2020.11.8

    Illustrator｜ポカポカ温かい文字の作り方…

    ここでは、Illustratorを使ってこんな感じの温かい文字を作る方…

  5. 2020.09.14

    Illustrator｜同じ色を一括で変換したい

    Illustratorで同じ色をいろんなオブジェクトで使用している場合、色の変更…

  1. CSS

    CSS｜中央寄せが効かないときは・・・

  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順

  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…

  4. CSS

    レスポンシブウェブデザインの基本｜メディアクリエリの設定

  5. CSS

    要素の配置が簡単に決まるFlexboxの使い方
PAGE TOP