懲りずにCSS事情第4段

こんにちわ、かずです。

CSSのプロパティなんて全部知っていると思っていたんですが、そんなことなかった。世界は広い。
てことで第4段になります。

first-letter

いつも一文字目を<span>で囲っていたんですが、何かないかなーと思っていたらありました。
お恥ずかしい限り。

h2::first-letter{
color: blue;
font-size: 2em;
}

こんな感じで一文字目の色を変えられます！文字サイズとかも！
疑似要素なので、before要素の一文字目とかには使えませんのでご注意ください。
あくまで要素の最初の文字でした。

repeating-linear-gradient

linear-gradientはグラデーションを表現するためによく使うのですが、これは書き方によって線を描けます
下記は格子をCSSで書いたものです。

ソースはこちら

background:
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, transparent 1px, transparent 20px),
repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, #fff 1px, #fff 20px);

いつもはキレイにリピートするように画像を書き出していましたが、余計な画像が減って素敵ですね！

これからも微妙に役立つかもしれない情報を発信するために情報収集をどんどんしていきたいと思います！

それでは。