TOP  >  WebDesign  >  CSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」
2010年06月10日

CSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」

角丸、ドロップシャドウ、グラデーションなど今までは画像と組み合わせたり、様々な工夫を用いて表現してた手法が簡単に実装できるCSS3。対応ブラウザも増えてきて、すでに利用されていると言う方も多いと思いますが、今日紹介するのはCSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」です。

css3g01
Turn Your Images Into Polaroids with CSS3

FLASHのような派手なアクションなどはありませんが、CSSだけでここまで表現できる、CSS3の良さを感じることができます。全部で10個のCSS3ギャラリーが公開されていますが、今日はその中から幾つか気になったものを紹介したいと思います。

詳しくは以下

CSS Transitions – Throwing Polaroids at a Table
重ねた写真のように見せるCSS3ギャラリー。ロールオーバーで角度も変わります。

css3g02
 
 
 
 
Pure CSS3 Animated Sliding Image Gallery
重なりを制御することで擬似的にスライドショーとしてみせているCSS3ギャラリー。

css3g03
 
 
 
 
 
Sexy Image Hover Effects using CSS3
webkitを搭載したsafariやchromeでしか見ることができませんが、アニメーションで見せるCSS3ギャラリー。
css3g04
 
 
まだすべてのブラウザでは見ることができず主要のIEでは全ての機能が使えないので、実用的にはまだまだ先にはなりそうですが、いずれ標準化していくはずのなので、勉強としては良いかもしれません。

10 Pure CSS3 Image Galleries and Sliders – Speckyboy Design Magazine

posted 12:20  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る