「\」「9」「*」「_」の四文字だけで、IE6, IE7, IE8を区別するCSSハックをNettuts+から紹介します。 <textarea name="code" class="css" cols="60" rows="5"> body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ } </textarea>

Css3 have a capacity to revolutionize the way we design/develop website. css3 is intoducing loads of new and exciting features. Most of the browsers such as Firefox, Safari already support some of the CSS3 properties It is essential today for a web designer to know about CSS3 and there are many tutorials and resources for the CSS3. Below i’ve listed 25 Useful CSS3 Techniques and Tutorials to get y

CSSやHTMLの知識がなくても簡単にCSS3を使用した美しいフォームが作成できるオンラインサービス「FAARY」を紹介します。 FAARY - Free, Online CSS Form Generator 「FAARY」の利用は無料で、登録など面倒なことは一切無しで利用ができます。 フォームの作成・ダウンロードはわずか3ステップで完了です。 フォームの内容を設定 「Generate!」ボタンで、フォームが生成 あとは、ダウンロードするだけ フォームは日本語にも対応しており、内容を設定するする際に日本語の利用が可能です。

CSS3で何ができるかを知りたい。 そんなときにおすすめなのが、『CSS3 Generator』。CSS3で何が実現できるかがわかるジェネレータです。 border-radiusやbox-shadowなど、CSS3の様々なプロパティーをセレクトボックスから選んで、プレビューすることができます。 数値を変えられるのと、コード表示、ブラウザ対応表示もあるので、とても便利ですね。 ぜひ見てみてください。 CSS3 Generator 申告を無事終えました。やっと解放された。。 今年は帳簿付けは自分でやって、決算のときだけ税理士に頼もうかな。

Firefox 3.xでおこるCSSのバグ（仕様？）をWeb Designer Depotから紹介します。 CSS Bugs and Inconsistencies in Firefox 3.x 下記に、その中からいくつか紹介します。 outlineのバグ Firefox 3.xではoutlineプロパティを使用した場合、内包要素の余剰分が表示されません。

手紙などにプレスしたようなエフェクト「レタープレス」をPhotoshopで画像として作成するチュートリアルとCSSで実装するチュートリアルをAcrisDesignから紹介します。 Letterpress Text Effect Using Photoshop and CSS レタープレスのエフェクトは2009年頃からあちこちのサイトで見られるようになりました。 主に、タイトルや見出しなどによく使用されています。 下記は、そのレタープレスをPhotoshopで作成した画像とCSSで実装したキャプチャです。

Photoshopでの画像作成からはじまり、CSSスプライトをアニメーションで変更するボタンを実装するチュートリアルをTutorial9から紹介します。 Creative Button Animations with Sprites and JQuery デモページ デモではHTMLとCSSを使用したベーシックなCSSスプライトで実装したボタンだけでなく、XHTMLとCSSとJavaScriptを使用しフェードのアニメーションでじんわりと変更するボタンなどがあります。 エキスパート モードでは、一つの画像で複数のボタンを変更するもの、矩形ではなく円形のボタンをアニメーションで変更するものもあります。

CSSのフレームワークを使ってサイトを作りたい。 そんなときにおすすめなのが、『ZURB』。クールなCSSグリッドフレームワークです。 カラム数や幅を指定して、CSSを生成できますね。Screen Widthを変えて確認することもできて、なかなかいい感じです。 似たサイトだと、960 Grid Systemがありますね。 こちらは制作事例も多く、参考になるのではないでしょうか。デザインの制約を受けそうですが、コーディングの手間を多少減らしつつデザインする、ということができそうです。 一度見てみてください。 ZURB CSS Grid Builder ここ数日夜はちゃんと寝るようにしているので体調がいい。この調子でいきます。

パネルをタブで変更するUIをスタイルシートで実装するチュートリアルをCSS-Tricksから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="tabbed-area"> <ul class="tabs group"> <li><a href="#box-one">Tab 1</a></li> <li><a href="#box-two">Tab 2</a></li> <li><a href="#box-three">Tab 3</a></li> </ul> <div class="box-wrap"> <div id="box-one"> <!-- box two content --> </div> <div id="box-two"> <!-- box two content --> </

CSS3の基本中の基本、RGBA による色と透過率の指定、Text Shadow による文字の影、Border Radius による角丸、Box Shadow によるボックスプロパティに対する影、以上の4点を Web Designer Wall で詳しく説明してくれています。CSS3を取り入れることで、画像を使わずにデザイン的要素を取り入れることが可能となります。 ただし、IEは対応していないので、IEに対しても同じ見せ方をする場合、画像やJavascriptを使ったハックが必要となります。 RGBA background: rgba(255, 255, 255, 0.2); 始めの3桁の数字が色を表します。左からR：赤、G：緑、B：青、A：透過率となります。0が透明、1=100%透過なしとして透過の割合を設定していきます。使える要素はフォントカラー、背景色、ボーダー色、シャドウなどなど

Pure CSS speech bubbles ? Nicolas Gallagher ピュアCSSで実装された吹き出しのデザイン例が色々と紹介されたエントリのご紹介です。 CSSだけでここまで出来ちゃうの？というサンプルが多数で、CSS3を使った複雑な吹き出しの例なども公開されていて一度見ておくとよいかも。 吹き出しだけでもこれだけ出来るので、CSS3が標準となった数年後のWEBデザインは大きく変わっているのかもしれませんね。 関連エントリ これは驚きの、CSSだけで作れる吹き出しボックス ナイスな吹き出しパーツを作るCSSと画像セット

CSS3で何ができるのかという「CSS3で何ができるの？　という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか？　ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイントを意訳したものです。 はじめに テキストのエンボス効果 繊細な角丸とシャドウ アニメーションで回転するDVD 半透明のバー 角丸 微妙なテキストのシャドウ 陥りやすいワナと対処方法 はじめに CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。 しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。 だからといって、CSS3を

今回の記事は2008-12-07[XHTML+CSS]CSS Spriteで表現する角丸 | Commit Labの続きです。 これはCSS Spriteというテクニックを利用して作った角丸boxです。シンプルな記述のhtml+CSSと一枚の画像で角丸を表現しています。 文字の拡大にあわせてboxの縦が伸縮しますので、すぐにフレキシブルな角丸を表現出来ます。またデザインにおいても、htmlとcssのみで作られているので思いのままに装飾する事ができます。 今回は前回の問題点を修正しました。h2のheightをpxで固定していたのはやめて、line-heightのみで高さを調整しました。これで文字を拡大しても、H2から文字がはみ出す事はありません。 またH2にbackground-colorを与え、どれだけ拡大しても背景が途中で途切れないようになりました。 それに伴いCSS Spriteの画像