コンテンツ生成用に画像をなるべく使用せずに、より多くのブラウザ対応を考慮した、画像を使用しないでイメージを作成するスタイルシートを紹介します。 CSS Generated Content [ad#ad-2] 小さい三角 キャラクター アロー トリッキーシャドウ 下記の対応ブラウザは、IE8+, Fx3+, Chrome4+, Safari4+ です。 各コードは主要箇所のみの抜粋です。 小さい三角 「New」の右上に添えてある小さい三角をCSSで実装します。

パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--&#91;if IE&#93;> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <!&#91;endif&#93;--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"

CSS3を使って実装された、スライドのアニメーションや各パネルのダイレクトリンク機能を備えたスライドショーを紹介します。 Pure CSS Slideshow [ad#ad-2] スタイルシートだけで実装されたスライドショーはアニメーションでスライドするので、CSS3 transitionに対応したChrome, Safariでお楽しみください。 Firefox 4などの非対応ブラウザでは、アニメーション無しでスライドされます。 また、各パネルへのリンクは#リンクに対応しており、個別のパネルにリンクすることも可能です。 1ページ目を表示 IE7でのキャプチャ HTML スライドする各パネルはdiv要素で実装されています。 <div id="a1"> <div id="a2"> <div id="a3"> <!-- Top Navigation. Ya, tables are evil. -

CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング

CSS2.1の疑似要素を使用して、背景画像のクロップ、変形、ポジション、不透明度など背景画像に関する実用的なスタイルシートの4つのテクニックを紹介します。 CSS background image hacks [ad#ad-2] 下記は各ポイントを意訳したものです。 背景画像のクロップ 背景画像の変形 背景画像のポジション 背景画像の不透明度 背景画像のクロップ 背景画像をクロップするのは、CSS2.1だけを使用してモダンブラウザにエミュレートできます。 一つ目のデモでは、背景で表示するべき画像をクロップしています。

CSS3のbox-shadowで適用したシャドウをふんわりとアニメーションで変化させるjQueryのプラグインを紹介します。 ボタンなどにシャドウを使用した際には、よりリアルな効果を与えることができます。 Shadow animation jQuery plugin デモページ [ad#ad-2] アニメーションで変化できるのは、CSS3のbox-shadowで指定できる表示位置（X軸オフセット・Y軸オフセット）、ぼかしの半径、シャドウの半径、カラー、となっています。 各デモのスクリプトでの指定は下記のようになります。 JavaScript：左端 onmouseoverで、ぼかしの半径を30ox、カラーを#44fに $('#box1').animate({shadow: '0 0 30px #44f'}); JavaScript：真ん中 onmouseoverで、ぼかしの半径を50pxに

CSS3で何ができるの？　という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。

Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS：ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz

Sign up with your email address to be the first to know about new products, VIP offers, blog features & more. [spacer]

「:target疑似クラス」をつかって、タブコンテンツ、画像ギャラリー、画像拡大、アコーディオンなど実用的なコンテンツを実装するチュートリアルを紹介します。 キャプチャはW3Cの「The target pseudo-class :target」 [ad#ad-2] 「:target疑似クラス」はCSS3で、アンカーリンクがアクティブな状態にスタイルを適用するものです。 IE6～8では「:target疑似クラス」は動作しないため、代替を用意したり、スクリプト「Selectivizr」を利用するなどなんらかの対応が必要です。 「:target疑似クラス」をつかって、タブコンテンツを実装 「:target疑似クラス」をつかって、画像ギャラリーを実装 「:target疑似クラス」をつかって、画像の拡大表示を実装 「:target疑似クラス」をつかって、画像のズームイン・アウトを実装 「:targe

Deep Blue Skyというサイトで、CSS3・HTML5のブラウザ対応状況一覧がまとまっています。 自分のブラウザのCSS3・HTML5対応状況を調べてくれるjavascriptライブラリ、Modernizrを使って調べたようですね。 ↑はMac Firefox3.5。ちょっと残念な感じですね。。 対応状況は以下のようになっています。 Internet Explorer 6, 7 & 8 Firefox 3.5 (Win) Google Chrome (Win) Opera 10 (Win) Safari 4 (Win) Safari 4が一番優れていますね。IEがひどいことになっている。。。 詳しくは以下からどうぞ。 Browser support for CSS3 and HTML5 姉妹サイトである以下のサイトでは、自分のブラウザの対応状況が見られます。IPとかも調べられますよ

画像を使用せずに、スタイルシートで紙を折ったようなエフェクトを矩形の角に適用するチュートリアルを紹介します。 Pure CSS folded-corner effect [ad#ad-2] 対応ブラウザはCSS3と:before疑似要素を使用しているため、Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+です。 デモページ 紙を折ったようなエフェクトの実装 紙を折ったようなエフェクトは、全部で4種類あります。 HTML HTMLはdiv要素を使用するだけで、class名を変更するだけです。 <div class="note"> コンテンツ </div> 適用するclassは「note」です。 全てのベースとなるスタイルシートです。 .note { position:relative; width:480px; padding:1em 1

border-imageプロパティは、画像ボーダーについてまとめて指定する際に使用します。 border-imageプロパティでは、 border-image-source、 border-image-slice、 border-image-width、 border-image-outset、 border-image-repeatの各プロパティの値を、まとめて指定することができます。 省略された値はそれらの初期の値に設定されます。 現在のところ、個別のプロパティをサポートしているブラウザは無いようなので、画像ボーダーを実現する際には、border-imageプロパティを利用するのが一般的です。 border-imageプロパティでも、border-image-outsetの値はブラウザでサポートされていないようです。 画像は上下左右それぞれのボーダー用に４枚必要となるわけではなく、１枚

パネルや画像などのちょっとしたアクセントにぴったり、紙がめくれたようなページカールのエフェクトをCSS3の「box-shadow」を使用して実装するスタイルシートを紹介します。 デモ [ad#ad-2] 実装は、下記のようになります。 HTML ページカールのエフェクトは「box-shadow」が適用できれば、どんな要素でも適用できます。 デモではリスト要素を使用しています。 <ul class="box"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> CSS3の「box-shadow」「RGBa」を使用します。 CSS3非対応の旧ブラウザ用のスタイルシートも記述されています。 ul.box { margin: 0; padding: 0; clear: both; overflow: hidden;