TOP  >  WebDesign  >  CSSのみで挑むWEBテクニック集「30 Pure CSS Alternatives to Javascript」
2010年04月28日

CSSのみで挑むWEBテクニック集「30 Pure CSS Alternatives to Javascript」

WEBに動きをつけたり、制御したりとWEB上ではなにかと便利なjavascript。ライブラリやプラグインも充実していて、それを利用した様々なテクニックが公開されていますが、今日紹介するのはjavascriptは一切使わず、CSSのみで、様々な表現に挑戦しているTipsを集めたエントリー「30 Pure CSS Alternatives to Javascript」です。

purecss01
30 Pure CSS Alternatives to Javascript

スライダーやライトボックスをはじめ、javascriptを使って行われているような事をCSSのみで再現しています。全部で30のプロジェクトがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

Perfect Full Page Background Image
CSSのみで背景画像をブラウザのウィンドウ枠に合わせて、伸縮するWEBサイトを制作するTips

purecss02
 
 
 
 
 
Accordion Using Only CSS
アコーディオンメニューをCSSだけで作る。フェードなどの細かい動きはさすがに表現されていません。

purecss03
 
 
 
 
 
Pure CSS Animated Progress Bar
ローディングの進捗具合を表すプログレスバーをCSSのみで表現。

purecss04
 
 
どのプロジェクトもしっかりと解説されていて、CSSを普段から触っている人であれば、チュートリアルを見ながら実装もそれほど難しくないと思います。CSSでもここまでやれる、こんな使い方があるという例を教えてくれる、非常に勉強になるTips集だと思います。CSSをもっと深めたい方は是非どうぞ。

30 Pure CSS Alternatives to Javascript

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 01:46  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る