タグ別アーカイブ: 疑似要素

疑似要素 :before :after の使い方

本日は、デザインにおいて無限の可能性(大げさ?)を秘めた疑似要素 :before, :after を使ってみよう!の巻です。

疑似要素 :before, :after とは?

htmlに手を加えずに、要素の前(:before)と後ろ(:after)にフェイク(疑似)の要素を追加出来るというものです。
これを極めますと、画像を一切使用せず疑似要素だけで作られたアイコンなど、かなり凄い事が出来るようです。

今回はbodyタグに:before, :afterの擬似要素を使い、ヘッダーとフッター部分に色をのせて境界線を作ってみます。
このサイトのヘッダーとフッター部分の薄いグレーの色の部分です。
ちなみにヘッダー部分を:before、フッター部分を:afterで指定しています。
続きを読む

2013-6-21 勉強会

お菓子がフラットデザイン?
今日もランサーしょうじさんとsa-kaさんはお休みです、、、(泣) 
元気でいてくれたらそれでうれしいです、、、(泣)

はい、ということで勉強会の概要は

  • 真中さんの質問、疑似要素について
  • フラットデザインについて

でした。 続きを読む