CSSだけでタイムラインを表現『Pure CSS Timeline Demo』
- July 10th, 2009
- Posted in 開発ツール・技術
- Write comment
ちょっと知っておくと良いかもしれないテクニックが紹介されていましたよ。画像を使わずにタイムラインっぽい表現ができちゃっていますね。
↑ こんな感じ。
年表とか履歴書っぽいのにいいかもですね。
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
No comments yet.