CSSでクリアガラスみたいな見出しを作るメモ #CSS

CSSでクリアガラスみたいな見出しを作るメモ #CSS

今回のCSSで作る見出しのメモはクリアガラスのような見出しをCSSだけで作るメモです。

こんなかんじの見出しを作ります。

見出しサンプル

上のサンプルのHTMLは

という簡単なHTMLです。
実際に使うときは、divを使うのではなくて、h1~h6のような見出しタグに設定します。

CSSはちょいと長いですが、下のようなかんじ。

もともとの .clear-glassというクラスにグラデーションをかけてから、:beforeや:afterといった擬似要素で、半透明の白や黒を重ねています。

昔はこういうのって画像でつくって背景にリピートかけていたんですが、便利な世の中になりまたよねぇ~。いや、ホントに。

いっそのことmixinにしてみました

昔の記事をひっぱりだしてこのクリアガラスにするCSSをmixin化してみました。

何かの役に立てれば幸いです。

1,067 views/total