【縛りプレイ】first-letter疑似要素を活用して「スターロッド」を描いてみた

Last updated at 2019-12-07Posted at 2019-12-07

この記事は CSS Advent Calendar 2019 の 8 日目の記事です。

#何があったの？

体内に電流が走りました。

普段CSSで図形を描くときは、divタグを複数使用して、自由気ままに描いておりました。
そんな時「CSS SANS」という、CSSでフォントを作った方を見かけました。
どうやら、1つのdivタグで「AからZまでアルファベット」を表現されていました。
めちゃくちゃ感動しました。

これに刺激をうけた私は、1つのdivタグで「クリスマスっぽい何か」を描いてみることにしました。

#今回のルール

・設置するタグは、divタグ一つ
・Chromeで動けばOK

#成果物

まずは、成果物からご覧ください。
★に棒が刺さっている「スターロッド」です。

#使える疑似要素は「::before」と「::after」だけじゃない

divタグ1つだけでCSS図形を描く場合、「::before」と「::after」を使っている例が多いようです。
描画パーツは「div」「::before」「::after」の3つと、頭の中で固定観念ができあがっていました。

ところが、いろいろ試してみた結果、「::first-letter」も調整次第で、いろいろ使えることが分かりました。
「::before」と「::after」に続く、第四の描画パーツとして「::first-letter」が急浮上しました。

#first-letter疑似要素の調整
「::first-letter」を使用するには、何か1文字入力する必要があります。

first-letter疑似要素の調整1

<div class="starrod">1</div>

さっそく文字を亡き者にして、余分なスペースをなくします。

first-letter疑似要素の調整2

  font-size: 0; /* 文字を亡き者に */
  vertical-align: top; /* 上の隙間を解消 */

さらに、paddingを使って描画領域を確保します。
widthとheightを設定しているのと同じです。

first-letter疑似要素の調整3

  padding-right: 60px; /* 描画領域におけるwidthの役割 */
  padding-bottom: 380px; /* 描画領域におけるheightの役割 */

最後に、backgroundプロパティに「〇〇-gradient」で図形を描画すればOKです。

ロッドを描く

  background: 
    40px 80px / 20px 300px linear-gradient(yellow, yellow 10%, gray 40%, gray 100%) no-repeat;

今回は、長方形というシンプルな図形でしたが、もし、長方形以外の図形も描きたい方は、BOOTH様のサイトで「CSS図形グラデーション」を検索ワードに入れて、検索してみてくださいませ m(_ _)m
※宣伝するつもりはないので、ここではリンクは張りません。

#聖属性っぽさを出す

クリスマスに向けて、神聖な感じを出せればと思っておりました。
そこで、ぼかしを入れることにしました。

ぼかしを入れる

  filter: drop-shadow(0 0 10px yellow);

#成果物をもう一度

★に棒が刺さっている「スターロッド」です。

#まとめ

「first-letter疑似要素」は使える！！！
これからもっと研究して、活用パターンを増やしていきたいです。