CSSだけでタイムラインを表現『Pure CSS Timeline Demo』

SPONSORED LINK

Pocket

ちょっと知っておくと良いかもしれないテクニックが紹介されていましたよ。画像を使わずにタイムラインっぽい表現ができちゃっていますね。

matt

↑ こんな感じ。

年表とか履歴書っぽいのにいいかもですね。

HTML上では次のような表現になっているようです。style属性に入れちゃっている感じです。ちょっととっつきにくいかな。

<li style="width: 42.48%; left: 57.2%;">Design & Typography <em>(2007 - 2009)</em></li>

なお、CSS上では「-webkit-border-radius」と「-moz-border-radius」を使っているようなのでIEでは角丸は表現できないですね。

こういうのがやりたかった!という方は使ってみてはいかがでしょうか。詳細は以下からどうぞ。

» Pure CSS Timeline – Notebook | MattBango.com

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. No trackbacks yet.