Code is beautiful

2010-12-01

CBCNET ( http://www.cbc-net.com/ ) のRSSFeedを利用して、CBCNETのトップページをリニューアル

JAM - HTML5 and Flash

Session5「CBCNET ( http://www.cbc-net.com/ ) のRSSFeedを利用して、CBCNETのトップページをリニューアルしてください。」

との事で、HTML5マークアップ

forked from: CBC NET - jsdo.it - Share JavaScript, HTML5 and CSS

始めは22面体とか突拍子のない事考えてたんだけど、結果的にはこんな感じに。

記事写真にマウスオーバーすると内容レイヤーが表示される仕組みで、その表示にCSS3のtransitionを使用してみた。

その対比というか、記事スライドは横方向にしている。

横スライドはjsでabsolute座標を変更してるんだけど、Operaがどうもカクカクでjsが速いんだか何だか。

カテゴリ、タグ、月別アーカイブのリンクには、Ajaxでもブラウザの「戻る」「進む」を有効にさせるべく、jQuery hashchange eventを使用。


(参考)

Ajaxやタブ切替には必須かも?ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン


ロゴ画像が四角い事もあり、全体的に四角なデザインを心掛けてみた。

トラックバック - http://d.hatena.ne.jp/H6K/20101201/p1