[CSS]擬似クラス"before""after"で出来るアレコレ！

前回の投稿で擬似クラス”before”と”after”について書きましたが、その後も調べていくと、"before""after"では、画像を置換する他にも、contentプロパティを使って様々な事が出来るようなので、今回はその技をご紹介します。

　

beforeとafterでつくれる、あれこれ

その①：リボン

可愛さを出す為に多様しがちなリボン。
自分で書こうとすると、綺麗にバランスを取って作成するのが結構難しいんですよね・・。
そんなリボンも疑似クラスの”before””after”プロパティを使うことでで簡単に作ることができます。
こちらは、livetoolsというCSSジェネレーターがあるので、そこのCSSを元に編集すればOKです。

▶Ui Parade – Live Tools
　
　
　

その②：ふきだし

今までは画像で設定していたであろう「ふきだし」を擬似クラスを使用する事で、CSSで再現出来ます。
「色を変えたい！」となった際に、PhotoshopやIllustratorで作成しなおさなくても、CSSからcolorを書き換えるだけで済むので、お手軽です。
しかも、上記のサンプル画像以外にも様々な形状・タイプの「ふきだし」が作成出来ます。
サンプルコードと「ふきだし」のデモは以下のサイトで見れますので、ご確認下さい。

▶Pure CSS speech bubbles By Nicolas Gallagher
　
　
　

その③：パッ◯マン！

ゲーム自体はプレイしたことは無いのですが・・・。
この形は様々な場所で見けてきた印象深い形なので、デザインの中にちょっとしたアクセントとして使えるかもしれません。これもCSSで作成出来ますので、colorは好きなように変更ができます。
ちなみに、パッ◯マンだけではなく、星形などアクセント使い出来るものから、虫眼鏡などの汎用性の高い形状まで、数多くを作成することが出来ます。
以下にThe Shapes of CSというサイトのリンクを記載しますので、URL内のリンクから各種CSSをご確認下さい。
　
　
▶The Shapes of CSS – CSS-TRICKS
　
　
　

まとめ

如何でしたでしょうか！ 「ふきだし」や「リボン」などは、画像で作成するよりもデータ容量も軽いし、更新も楽なので便利ですね。 とはいえ、前回の記事でも書きましたが、擬似クラスは古いverのブラウザでは対応していない事も多いので、利用の際はご注意下さい。 便利だと思って色々試していたのですが、多様するとCSSが大分長くなってしまうんですよね・・・・。 便利な機能とはいえ、状況に合わせて活用した方が良さそうですね。