creatersnest111

擬似クラス:before :afterを使ったオシャレななエフェクトチュートリアルまとめ


HTMLに余計なマークアップをしたくない時に、変更することができないときに非常に役立つのが、
:before擬似要素と:after擬似要素。

実際に使用したものやいつか使うかもと思ったものの中で、よく使いそうなものをまとめました。
いずれも、:before擬似要素と :after擬似要素を使ったオシャレなエフェクトを利用しているので、すぐにでも使いたくなるものばかりです。

紙が浮き上がっているようなエフェクト

box-shadowを使ってdiv要素に影をつけ、紙の端が少し浮かんだようなエフェクトです。
この頃よく見かけるデザインですが、今までは画像置換でシャドウ用のdivをひとつ増やしていました。
擬似要素を使うと、画像なしで実現できます。

CSS Box Shadows Effects
CSS Box Shadows Effects

http://www.paulund.co.uk/creating-different-css3-box-shadows-effects
8つのタイプのエフェクトが載っています。
よく使いうタイプのものですので、テンプレートとして保存してしまうのも良いでしょう。

 

10 CSS3 box shadow experiments
10 CSS3 box shadow experiments

http://www.bypeople.com/shadow-css3-box/
デモ
紙が浮かんだエフェクトに加え、紙の端をテープで止めたようなエフェクト、紙が重なっているように見えるエフェクト、ポラロイド風のエフェクトもあります。
全部で10個もあるので、見ごたえがあります。

 

Image Stack

Image Stack

http://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/
CSSで構築されたとは思えない、一枚の画像で複数枚の画像が重なっているように見えるエフェクトです。
先にポラロイド写真のようなフレームを作り、画像を重ね、:before擬似要素と:after擬似要素で角度をつけ、重なっているように見せる作りの物です。
疑似要素の応用といったところでしょう。

 

ボタン

CSSのみでクリエイティブなボタンデザインが再現できます。

3D Button
3D Button

http://www.esecamalich.com/older/blog/before-&-after/
activeと:before擬似要素を組み合わせて、クリックした時に押したことが分かるようになっています。
数字の1部分が:before擬似要素になります。
hoverでも同じようなことは再現できるはずなので、色々試しても面白い作りができそうです。

 

webopixel

webopixel
http://www.webopixel.net/html-css/831.html

ちょっとしたワンポイントに使えそうなマウスオーバーアニメーションです。
アニメーションを利用しているので、IEがネックですが、
動きも楽しく、一度は使用してみたいエフェクトです。

 

ハートや星などさまざまなシェイプ

リストの先頭に使いたい場合の画像など、切り出しは少し面倒くさい。
そんな時に便利なのが:before擬似要素にCSSで設定してしまう方法。
色も後々変更できるので助かりますね。

The Shapes of CSS

The Shapes of CSS

https://css-tricks.com/examples/ShapesOfCSS/
リストといっても、li以外にも使えるものも揃っているので、便利です。
ノーマルの四角から丸型、ハートや星、虫眼鏡などかなりマニアックなものまで揃ってます。

 

Pure CSS GUI icons

Pure CSS GUI icons
http://nicolasgallagher.com/pure-css-gui-icons/

なんとアイコンまで作成しています。
:beforeと:afterだけで画像は一切使わずにこれだけのアイコンを作れてしまうとは、
デザインを切り出す手間が省けて本当に便利です。

 

Web’Notes

Web’Notes
http://webnonotes.com/css/cssicon/

先に紹介したものが背景付きの白抜きでさらに使いやすいアイコンセットになっています。
hover対応もしているので、今後アイコンに画像を使うことが少なくりそうです。

Gahag

Gahag
http://gahakudesign.com/design/web-production/css3-arrow/

リストなどでよく使う「>(山括弧)」型の矢印の作り方が分かります。
実用的なので、すぐにでも使ってみたくなりますし、
覚えておくべき小技です。

 

 

吹き出し

定番中の定番となりますが、これが出来るようになり、本当に便利になりました。
縦幅が変わったり、スマホなど、フレキシブルな対応が可能です。

ウェブアンテナ
ウェブアンテナ

http://www.webantena.net/css/balloon-sample/
上下左右すべての方向を解説しています。
日本語サイトなので、:before擬似要素と :after擬似要素を理解するには役立ちます。

Pure CSS speech bubbles

Pure CSS speech bubbles
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

グラデーションをかけた吹き出しから、枠付きの吹き出しまで様々な吹き出しを見ることができます。
丸い形の吹き出しなどは、今まで画像で対応していたりしましたが、
これもCSSで組めてしまいます。

見出し

Web’Notes

Web’Notes
http://webnonotes.com/css/heading_sample/

チェックマークや矢印マーク、円マーク見出しなど、
各種見出しにすぐ使えそうなものがピックアップされています。
ボーダーを利用した見出しなどはよく使うものですので、テンプレートにしても良いです。

 

JSFiddle

JSFiddle
https://jsfiddle.net/h8jQR/
多重ボーダー見出しの物です。
box-shadowではなく擬似要素でボーダーで表現しており、
フラットなデザインにも使いやすいものです。

 

KOJIKA17

KOJIKA17
http://www.nxworld.net/tips/hr-css-design.html

contentプロパティと:before擬似要素と:after擬似要素を利用した、
はさみ付の切り取り線や、記号や文字を取り入れたタイプのラインです。
汎用性が高いので、覚えておくと良い表現です。

リボン

Ui Parade – Live Tools
Ui Parade – Live Tools

http://livetools.uiparade.com/
ちょっと変わったエフェクトを作れるジェネレータのご紹介。
ECサイトなどのNEWアイコンやおすすめアイコンに代わって使用できそうなエフェクトです。
インパクトがあるので、いつかどこかで使ってみたいですね。
今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけるようになりました。

その他

456 Berea Street

456 Berea Street
http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
リスト形式の物ですが、これは勉強になります。
:before要素を使用することで、olリストの番号部分にスタイルを適用することができますが、
さらにcountersを使って連番を生成しています。

 

NxWorld

NxWorld
http://www.nxworld.net/tips/combine-hero-image-and-css-gradient.html

ヒーローイメージにCSSで実装するグラデーションを組み合わせ、
霧がかかっている画像など、1枚の画像で何パターンものイメージを作成しています。
透過グラデーションを上手に使ったエフェクトです。

 

KOJIKA17

KOJIKA17
http://kojika17.com/2012/06/dummy-text-generate-for-css3.html

ダミーテキストを:before擬似要素と :after擬似要素で表示させています。
ダミーテキスト以外でも、カフェのメニューに表示する「¥」マークや「税込」などは対応できますね。
さらに、cssで調整をかければフォントなどもお洒落に表現できます。

 

KOJIKA17

KOJIKA17
http://www.nxworld.net/tips/css-parenthesis.html

括弧を:before擬似要素と:after擬似要素で表現しています。
可変の行に対応できにくいデザインとして、少し前までは敬遠されていましたが、
:before擬似要素と:after擬似要素で対応できれば、デザインやコーディングの幅も広がります。

 

terkel.jp

terkel.jp
http://terkel.jp/archives/2014/11/baseline-grid-pseudo-elements/
擬似要素を利用したベースライン・グリッドが指定できます。
デザインで背景にノートのようなグリッドがあった場合、
paddingやmarginで調整するのはなかなか厄介であったりします。
それを、:before擬似要素と:after擬似要素で表現しています。

 

まとめ

:before擬似要素と:after擬似要素が理解できれば、画像を使わずに表現できることが増えます。
マークアップを最小限に抑えながら、デザイン性を高められることで、ぐんとコーディングの幅も広がりますね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【Photoshop】選択範囲の保存と呼び出す方法