CSSで年表が作れるコード「Pure CSS Timeline」
2009年07月14日-
スポンサード リンク
Pure CSS Timeline ? Notebook | MattBango.com
CSSで年表が作れるコード「Pure CSS Timeline」。
次のような、角丸でAppleっぽい(?)年表が作れるみたいです。
HTMLマークアップは以下のように, div と ul で組むみたいです。
<div class="timeline">
<ul class="events">
<li style="width: 42.48%; left: 57.2%;">Design & Typography <em>(2007 - 2009)</em></li>
<li style="width: 56.68%; left: 43%;">Photography <em>(2006 - 2009)</em></li>
<li style="width: 71.3%; left: 28.4%;">Object Oriented Programming <em>(2005 - 2009)</em></li>
<li style="width: 85.5%; left: 14.2%;">Web Development <em>(2004 - 2009)</em></li>
<li style="width: 42.75%; left: 0;">3D Modeling and Rendering <em>(2003 - 2006)</em></li>
<li style="width: 99.5%; left: 0;">Drawing & Illustration <em>(2003 - 2009)</em></li>
</ul> <!-- end .events -->
<ul class="intervals">
<li class="first">2003</li>
<li>2004</li>
<li>2005</li>
<li>2006</li>
<li>2007</li>
<li>2008</li>
<li class="last">2009</li>
</ul> <!-- end .intervals -->
</div> <!-- end .timeline -->
単純なコードなので、PHP側で作ってしまうことも簡単そうです。
プロジェクト管理的なところに使えるかも。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- ホバー時にCSSで下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- 過去のエントリ