on:2013年1月29日sponsorsソーシャルサービスのボタンを配置したリストがアニメーションで蛇腹状に折り畳まれるスタイルシートを紹介します。buttonsデモ実装デモデモページを下にスクロールすると、デモがあります。デモはCSSの3D変形に対応したブラウザでご覧ください。CSSの3D変形に対応したブラウザ一覧デモページ:閉じた状態スクロールすると開いた状態になり、閉じるのは一番上のグレーのバーをクリックします。外部ファイルjQueryとModernizrを</body>の上に外部ファイルとして記述します。src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>HTML一番上のグレーはh2要素で、各ソーシャルボタンを配置するパネルはリスト要素で実装します。class="rss">...</li></ul>JavaScriptModernizrの使用により、CSSの3Dアニメーションをサポートするブラウザに折り畳みのアニメーションを適用します。topElemOffset)unfold();})}})()</script>CSSリストのスタイルや折り畳みのアニメーションは下記のスタイルシートを使用しています。各ソーシャルサービスのボタンを設置する際に、複数のドメインをまたがるスクリプトを利用します。その際に下記のスニペットを使用し、各スクリプトをロードします。