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;でテキストを透明にするところです。

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

ドット柄をクリップ

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

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

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

テキストの縁取り

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. CSS

    CSS|中央寄せが効かないときは・・・
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. WordPress

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

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

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