それでも人生にイエスと言う

もう、ただの日記だに

【開発】フラットデザインちっくなフォームのステップバーをCSSだけでつくる

f:id:satomikoma:20140306022243p:plain

よくあるフォームの上にある、進捗を示すステップバーをCSSだけで作りたくて、いろいろ探した。けど、いい頃合いのものがない。

[CSS]ステップで進行状況を表現するスタイルシート | コリス
文言をしっかり書けるエリアと長さが欲しいのでダメだった。

css でステップメニューを作る | まとめーたー
理想なの見つけた!と思ったんだけど、HTML側STEP3→2→1って構造が逆になるのが何となくいやなので、ちょっと考える。

いろんなパンくずリストを画像を使わずに CSS で再現してみた。 - buena suerte!
こっちはいい感じ。いろんなパンくずリストCSSだけで再現って面白い企画。 だけど、いかんせんパンくずのためのデザインなので、最後の完了のcurrent表示で色の塗りつぶしとかうまくいかない。

なので結局、最後の記事をベースに自分で新しくつくった。

今回作ったステップバー

できたのはこれ

f:id:satomikoma:20140306001954p:plain

ソースはこちら

flatdesign_form_step_bar

  1. HTML (step_bar.html )
  2. SCSS (step_bar.scss)
  3. CSS (step_bar_compiled.css)

ご利用中のシステムにあわせて、2.SCSS か3.CSS のどちらかを使ってくれればと思います。 SCSS組み込み想定で作ってるので、デザイナーさんはコンパイル済みのCSSの方をご参照いただければと思います。 currentの色、すごい微妙に作ってるので、適当に変えてください。

gist9369277

他、ステップバーの参考デザイン一覧

あと、他のデザインのステップバーを作ってみたいかたは、以下のサイトが参考になるかと思います。 海外のいろんなECサイトの購入時のステップバーデザインが画像で一覧化されていて便利です。

Project83 Blog | Design Gallery: eCommerce Progress Bars