[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!

シンプルで、Responsive Web Designにも対応、フルカスタマイズも可能な画像ギャラリーを実装するjQueryのプラグインを紹介します。 CSS3非対応ブラウザでの動作も考慮しています。 Glisse.js [ad#ad-2] Glisse.jsの主な特徴 Glisse.jsのデモ Glisse.jsの使い方 Glisse.jsの主な特徴 Glisse.jsは、CSS3アニメーションの美しいエフェクトを使った画像ギャラリーで、Responsive Web Designにも対応しており、実装は簡単でフルカスタマイズも可能です。 キーボードナビゲーション CSSのフルカスタマイズ キーフレームを使ったCSS3アニメーション 7種類の移行エフェクト 異なる画面サイズに最適化 iPhone, iPad対応 Androidももうすぐ完全にサポート 対応ブラウザ Firefox 4+ O

CSS3 Click Chart | CSS3 Browser Support and Information CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」。 次のようにページヘッダにチートシート的にプロパティ等がならんでおり、クリックすれば即座にサンプルコードとライブデモが表示されます。 コピーしてすぐに使えちゃいますね。 サポートブラウザも教えてくれます 関連エントリ CSS3で出来たクールなLightBox実装チュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル アニメーションするバナーをCSS3で作るチュートリアル

Flashも無し、jQueryも無し、キーフレームを使ったCSS3アニメーションで実装したかっこいいドロップダウン型のナビゲーションを紹介します。 Two Level Superfishy Menu [ad#ad-2] デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a href="#">Home</a></li> <li> <a href="#">About Us</a> <ul> <li><a href="#">What we do</a></l

画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d

Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul

CSSのborderをアニメーションさせて目立たせるjQueryプラグイン「animatedBorder」 2011年09月14日- jQuery.animatedBorder.js CSSのborderをアニメーションさせて目立たせるjQueryプラグイン「animatedBorder」 borderというと基本的に固定ですが、このjQueryプラグインを使ってアニメーションさせることが出来るみたいです。 仕組みとしては、背景が透明と白のgifアニメーションを交互に点灯させ、ボーダー自体は固定色という仕組みで動いています。 とあるブロックを目立たせたいなんていう場合に使えそうです。 仕込んだら実装は以下の１行で済みます。 $('div.alpha').animatedBorder(); borderの色やサイズの指定が可能です。 関連エントリ カスタマイズ可能なアニメーションスクロールが

最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT

アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。 CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。 対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。 ※デモページは明記がないものは全てFirefox4での表示です。

コピペで使える！Photoshop不要になりそうな高品質テキストシャドウサンプル集 2011年06月13日- 12 Fun CSS Text Shadows You Can Copy and Paste | Design Shack コピペで使える！Photoshop不要になりそうな高品質テキストシャドウサンプル集のご紹介。 Photoshop不要には絶対ならないとは思うんですが、Photoshopで作るのと遜色ないテキストシャドウが実現されております コードと実例を元に紹介されていてコピペで使えます。 こういうものはいつでもデザインを変えられるという意味でCSS3でやっちゃうのがデベロッパー的には楽ですよね。 画像を作成→アップロード→タグ置き換え　を　CSS3で一発置換っていう方がはるかに効率的です 一日も早く、ほとんどのブラウザでCSS3が使えることを願います。 関連エントリ CSS

Create a CSS3 Image Gallery with a 3D Lightbox Animation - Inspect Element CSS3をフル活用した立体的な画像ギャラリー作成デモ。 一見、角丸に綺麗にデザインされたギャラリー。これだけでもいいのですが カーソルを合わせると立体的に浮上がります。 更にクリックするとLightBoxエフェクト。 単純に使うだけでなく、中身を解読すれば、CSS3についての知識が深まりそうです。 関連エントリ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 超カッコいいApple風スライドショーギャラリー作成チュートリアル スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ