CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-faceを使ったストローク） Double Stroked Text（二重のストローク） Letterpress（レタープレス） レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha

is-real / wonder-webkit CSS3の3D transformationを使ったすごいサンプルが公開されています。 マウスカーソルを移動させると本の表紙風の画像が立体的に移動します。 実際に使うかどうかは別にして、こうしたことがブラウザ上で出来るというのは面白いですね。 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 IE6-8でもCSS3が使えるようになる「CSS3 PIE」 便利なCSS3ツール6つ＋α イカしたデザインのプログレスバーをCSS3で作成する例

iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニック 2010年10月15日- Customizing web forms with CSS3 and WebKit - (37signals) iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニックが37signals.comにて紹介されています。 紹介されている１例として、SafariというとフォームおなじみのAquaっぽいスタイルになりますが、-webkit-appearance: none; のように設定するとプレーンなフォーム要素になるようです。 CSS3や画像を活用して、次のようなフォームをカッコよくデザインしたサンプルなんかも公開されています。 実際に見てみる 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CS

これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例 2010年10月07日- CSS3 Animated Bubble Buttons | Tutorialzine これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例です。 ボタンにカーソルを合わせるとカッコよく背景がアニメーションされ、よりボタンが押したくなるかもしれないテクニックです。 デザイナの方は１つのテクニックとして知っておいて損はしなさそうなテクニックなので押さえておいてもよいかも。 デモページで見てみる アニメーションに使う背景画像。 アニメーション自体は transition プロパティを用いて実装されています。 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3ツール6つ＋α CSS3のジェネレーター１４種 I

Vendor-prefixed CSS Property Overview [ad#ad-2] 一覧は、四つのレンダリングエンジンごとの指定方法がまとめられています。 下記は各レンダリングエンジンとその代表的なブラウザです。 Gecko系 Firefox Webkit系 Chrome, Safari Presto系 Opera Trident系 IE 各レンダリングエンジンの採用状況は、ウェブブラウザの一覧（Wikipedia）を参照ください。 一覧は下記のようになっており、右端には各プロパティのW3Cへのリンクも掲載されています。

CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew 

Flashで作成されたアニメーションのバナーをCSS3で再現し、どちらがCSS3でFlashかあてるコンテンツを紹介します。 CSS3 Ads Versus Flash Ads [ad#ad-2] デモはCSS3アニメーションを使用しているため、Webkit系ブラウザ（Chrome, Safari）でご覧ください。 デモは全部で三つあり、どれもぱっと見には区別がつかないものばかりです。

当サイトで紹介した数多くのチートシートの中から、今まさに役立つであろうチートシートを厳選して紹介します。 ※未紹介のものも含まれています。 HTMLのチートシート CSSのチートシート jQueryのチートシート WordPressのチートシート [ad#ad-2] HTMLのチートシート

CSS3 buttons 素敵なCSS3ボタンのショーケース。 次のようなCSS3で実現された素敵なボタンが沢山掲載されているページのご紹介 CSS3でのボタン作成の際の参考にできそうです 関連エントリ 綺麗にデザインされたCSS3ボタンのまとめ CSS3なボタンをWEB上で作れる「Button Maker」 これは必見のスイーツのような可愛らしいCSS3ボタン「BonBon Buttons」 CSS3でクールなボタンを作るチュートリアル集いろいろ 立体感がいい感じのiPhoneにも採用されているボタン実装CSS3サンプル

FormBox ? A jQuery & CSS3 Drop-Down Menu With Integrated Forms | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ メニューにカーソルを合わせるとドロップダウンメニューがアニメーションしながら現れてフォームが表示されるというUIの例と実装サンプルです。 スペースを取ることなく、コンパクトにログインフォーム等を埋めこむことが実現出来ています。 ログインしない人にとっては邪魔なブロックなので、使わない場合は最小化しておくというのはなかなか合理的なUIですね。 サイトの特性などに応じて実装すればサイトの利便性を大きく向上することができそうです。 関連エントリ ドロップダウンメニューにテーブルやフォーム等何

is a totally awesome idea still being worked on. Check back later.

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3の擬似クラスがIEでも使えて効率的なスタイリングが可能になります。 jQuery, prototype, mootools等と同時に使うことができ、 使えるプロパティはライブラリごとに違うようで、サイト上にそれぞれ掲載されています。 完璧ではないようですが、便利なものが多く使えるということで、活用してみてもいいかもしれませんね。 関連エントリ 便利なCSS3ツール6つ＋α IE6-8でもCSS3が使えるようになる「CSS3 PIE」 ピュアCSS3で3Dアニメーション IE6-8でもCSS3に対応するライブラリまとめ

HTML5/CSS3/jQueryをはじめ、サーバーやプログラミング、デザインなどウェブ制作関連のチートシートをまとめているサイトを紹介します。下記はチートシートを分類しているタグの一部です。 Quickly Code タグ一覧 各ジャンルのチートシートは数もそろっており、それぞれ簡単な説明とダウンロード先のリンクが掲載されています。 その中から下記にいくつか紹介します。

WanderWall ? A jQuery, CSS3 & HTML5 Hover-Based Interface | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3、HTML5でここまで出来るホバーインタフェース。 jQueryで様々なことが出来るようになっているのはご存知だと思うのですが、更にCSS3とHTML5も組み合わせるともっとすごいよ、という１つのデモです。 まだまだインタフェースは進化するのだな、という可能性を感じるものになっているので一回見ておいたらよいかも。 WanderWallのデモ とにかく実際にHTML5対応のブラウザで見てみもらうのが一番分かりやすいです 上のメニューにカーソルを合わせると画面がアニメーションしながらクールに切り替わります。 HTML5ブラウザがデフォルトになり、こうした技

text-shadowのカラー指定に何を使うかというのを意識していませんでしたが、下記のチップスを読んだら「なるほど」と思ったので、紹介します。 A CSS3 Tip デモページ（当方作成） 「text-shadow」のカラー指定には「black」「#000」などが使用できますが、「text-shadow」をサポートしているブラウザは「RGBa」での指定もサポートしているので、RGB値によるカラー指定が行えます。 これは特にPhotoshopで作成した繊細な背景に影のカラーを一致させる際に、威力を発揮するのではないでしょうか。ま、当たり前といえば当たり前なのですが。 まとめると下記のようになります。 RGBa指定が便利な訳 RGBで作成した背景に、正確なRGB値で影を指定できる。 「text-shadow」をサポートするブラウザは「RGBa」の指定もサポート。 また、下記のように20%のブ

CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。

CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。

Grad? Gradient! グラデーションは上記のキャプチャの通り、スライダーにPhotoshopのような色の追加も可能となっており、複雑なグラデーションも簡単に生成できます。 CSS3グラデーションを使用すると、下記のようなグラデーションが画像を使用しないで作成することができます。