Lucky bag::blog: ピュア CSS なプレゼン用スライドショー

前回の「CSS3 の target 疑似クラスで脚注を動的に表示する」に引き続き、:target 疑似クラスを使ってスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。ピュア CSS とか言いつつも、前回同様、:target 疑似クラスに未対応な IE でも動くように JavaScript を使っている。純粋に CSS のみで動くのは、Firefox、Safari あたり。Opera は動かない。 ピュアCSS なプレゼン用スライドショー サンプル <div id="section-01" class="section"> <!-- 1ページ目 --> … </div> <div id="section-02" class="section"> <!-- 2ページ目 --> … </div> <div id="section-0

[webmarksjp]

web開発

[irohiroki]

target擬似クラスつかう

[nekomeg]

すごいわざ。

[kdaiba]

なかなかすごい

[lesamoureuses]

面白い

[hysteric_cat]

target擬似要素を使ってCSSをコントロール、a:hoverみたいに対象だけに効果を出せる。Blogとかで指定されたエントリ丸ごと色を変更したりすると楽しいかも？かも？

[asiamoth]

CSSだけでこれほど表現ができるのかー！

[aratako0]

面白いけれど、これならs5でいいと思う。

[higeorange]

operaじゃうごかん。

[at-aka]

スタイルシートを OFF にすると、構造が分かって、理解が深まる。