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

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

コンテンツ [hide]

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

ストライプ柄をクリップ

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

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

背景画像をテキストで切り抜く方法

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

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

2018.04.08

斜めのストライプをCSSのみでデザインする方法

ここでは、背景などのデザインとして活用できる斜めのストライプ柄をCSSのみで実装してみたいと思います。できあがるのは、こんなデザインです。 See the Pen striped04 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;
}

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

2018.06.30

CSSでドット柄（水玉）を作る方法

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

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

テキストの縁取り

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;という部分がテキストの縁取りをしているプロパティです。ボーダーと同じように線の太さと色を指定します。

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で影を入れる

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

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

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を使った方が良さそうです。

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を何も指定しないと、値が継承されるのでこんな感じで縁取りのある透明なテキストになったりします。これはこれでありかもしれませんね。

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

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

WordPressとデザインが学べるWebメディア