ウィンドウ枠全体を使ってCSS3で3Dスライドショーを展開する「CSS 3D Slideshow」アニメーション演出に加えて、画面操作もキーボードから行うなどUI部分についてもおもしろかったのでメモ書きしておきます。CSS 3D Slideshow | Hakim El Hattab≫CSS 3D Slideshow …

CSS3だけで作られた画像ギャラリーやLightboxなどのモーダルウィンドウの動作系についてはサンプルもさまざま見かけるようになってきましたが、そんな中でもちょっと変わった3D風エフェクト+Lightboxエフェクトで構成されている画像ギャラリー「CSS3 Image Gallery with a 3D Lightb…

CSS3では「transform」プロパティの「rotateX」「rotateY」といった値を使って画像やテキストなどコンテンツの角度を制御することで、要素を立体的に表現することも可能になります。前にもここで「CSS3「transform」で3Dっぽく画像を重ね合わせてみる実験。」と題して画像を3Dっぽく重ね合わす方法…

CSS3の記述を簡単に生成してくれるジェネレーターやツールがWeb上のサービスとして徐々に増えつつありますがやはりCSS3を学ぶ上ではプロパティの一つ一つをきちんと理解しておかないといけないことは必須。そんなCSS3で追加となっている各プロパティを、記述方法と合わせて簡単なサンプルなどと共に解説しているリファレンスサイ…

今までは画像無しでは実現できなかった見た目（デザイン）をCSS3のみで実現させる方法はいろいろ紹介されていますが、そんな中でも、紙の質感をもの凄いクオリティで表現し、角のめくれ具合やセロテープで貼ったような見た目までをCSS3のみで実装可能とする「Advanced (yet awesome) pure CSS3 box…

CSS3から追加されるドロップシャドウ系プロパティ「box-shadow」。このプロパティと「transform」を使って、画像無しでリアルな紙の様な質感を出すテクニックを紹介している「CSS drop-shadows without images」がおもしろかったのでご紹介。CSS drop-shadows with…

画像を一切使用せずに、CSS（CSS3）のみで形成された、さまざまなパターンのボタンをまとめているサイト「CSS3 buttons」がこの先活用できそうだったのでメモ書き。CSS3 buttons / ubuwaits.github.com/css3-buttons≫CSS3 buttons / ubuwaits.gi…

CSS＋CSS3のみにて円形や三角、四角、星型、ハート型などなどありとあらゆる形状を画像を使わずに形成する方法を集めた「The Shapes of CSS」がおもしろかったのでメモ書き程度にご紹介。The Shapes of CSS≫The Shapes of CSSページ上には実際にブラウザ上で表示される形をもとにC…

CSSでさまざまなアニメーションエフェクトの制御を可能とするプロパティ「Transform」。そんな「Transform」をサイト全体でうまく利用して、ページ（コンテンツ）遷移を画面全体のズームイン／アウトで制御しているWebサイト「BeerCamp at SXSW 2011」がおもしろかったのでご紹介。BeerCam…

今年始めに紹介した、CSSのみでタブUIを作成する方法「CSS（CSS3）のみでタブUIを作ってみる。（Ver.1）」。こちらの Ver.1 でも基本的なタブの動き（表示／非表示の切り替え）は実装できていましたが、タブボタンに対して、現在開いているアクティブ状態のボタンの見分けを付けることが実装できていなかったのでその…