[B! css3] vacchoのブックマーク

CSSのみでスライドして画像を切り替えるギャラリーを作る

ポートフォリオとかでよく見かけるクリックすると横にスライドしながら画像を切り替えるギャラリーUIをCSS3だけで作ってみた。最終的に、エフェクト的には満足のいかないところがあるもののすごくシンプルに作成できたのでまぁ満足。:target擬似クラスとtransitionプロパティ(とtransf ormプロパティ)の組み合わせは色々できて楽しい。 Demo: CSS Sliding Image Gallery ギャラリー全体のマークアップは以下のような単純なもの。 <ul id="gallery"> <li class="image" id="first"><a href="#second"><img src="161-1.png"></a></li> <li class="image" id="second"><a href="#third"><img src="161-2.png"></a

vaccho 2011/02/01

css3

リンク

can I use... Support tables for HTML5, CSS3, etc

Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and

vaccho 2010/07/09

リンク

CSS3 Dock

Works perfectly on: Webkit Nightly Safari 4 (and iPhone although the user-experience sucks) Icon magnification (animation) works as expected, but some CSS3 for UI are not supported on: Firefox 3.6 and 3.7 (Animation is a little janky) Chrome 5 Opera 10.5 and 10.6 No animation on: Firefox 3.5 and below Not supported: IE in all versions