Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: CSS3

[WEB DESIGN] Browser support for CSS3 and HTML5 – 各ブラウザーの、CSS3 & HTML5の対応状況一覧

  • Pocket
  • このエントリーをはてなブックマークに追加

Safari4、Firefox3.5、Google Chrome、Opera10、IE6,7,8における、CSS3とHTML5の対応状況が一覧になってます。これを見る限り、SafariとChromeではすでに多くの機能が実装されていて、言うまでもなくIEが最も遅れてる感じ。というかIEの場合はバージョン6,7,8がまとめて紹介されてるあたり、バージョンの数は増えても何も変わっていないという事がよく分かります。まぁいずれは実用段階になるとは言え、毎度のようにIEが足枷となる状況は容易に予想できますね。

[CSS 3] 11 Classic CSS Techniques Made Simple with CSS3 – CSS3で今までのテクニックをよりシンプルに

  • Pocket
  • このエントリーをはてなブックマークに追加

今までちょっとしたテクニックを使って記述していたCSSソースが、CSS3を使う事でよりシンプルになるYOというお話。例えば角丸ボックスや、ボックスやテキストへのドロップシャドウ、透明度、バックグラウンドのサイズや複数背景の適用、カラム表現、ボーダー部へのイメージ適用、アニメーションなどの新しい手法が紹介されてます。基本的には「これからは新しい方法の方が楽だYO!」という話なんですが、これって裏を返せばCSS3でできる新しい表現を、古い方法で行うにはどうすればイイかと読む事もできます。古い方法で記述しなきゃならない理由とはつまりIE対策の事なんですが、しょうもないブラウザではあっても実際無視できないですからね。そんな感じでなかなか貴重なTips記事だと思います。

[CSS] How To Create a Pure CSS Polaroid Photo Gallery – CSSだけを使って表現するポラロイド風フォトギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSだけで表現する、ポラロイド写真風のフォトギャラリー。ポラロイド風の枠を付けるところまでは現行のCSSだけでオッケー。その先のドロップシャドウ表現と、散らばった感じに角度を付ける点はCSS 3による新しいプロパティを使っています。傾ける表現がなかなか興味深い。ポイントは“ -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);”の部分ですね。元の写真は傾いてないのに、上記指定をする事で角度を付けて見せる事ができます。またz-indexを使って、マウスオーバー時に必ず最前面に来るようにしている点も気が利いています。

[CSS 3] Create a Letterpress Effect with CSS Text-Shadow – CSS3のtext-shadowを使ってプレス文字を再現する

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS 3から使えるようになる新しいプロパティ、text-shadowを使って表現するプレス文字。text-shadowってまぁようするにテキストに対してドロップシャドウの効果を与えるプロパティなんですが、これの数値を工夫する事でプレス文字っぽく見せるというものです。作例では“text-shadow: 0px 2px 3px #555;”と指定されていて、この数値は左から順にシャドウのX軸の距離、Y軸の距離、ボカシ範囲、色を表しています。X軸の距離を0にするのがポイントみたい。Safariではかなり以前から先行実装されていたプロパティなので、CSS 3の新しい機能としては見る機会の多い表現ですね。

[CSS 3] 5 CSS3 Design Enhancements That You Can Use Today – 今日から使えるCSS3

  • Pocket
  • このエントリーをはてなブックマークに追加

今日から使えるCSS3。「You CSS 3で書いちゃいなYO!」みたいなノリでサクっと使えそうです。まぁ対応ブラウザの普及率とかソレ系の小難しい話は別としてw アルファ、角丸表現、テキストシャドウ、ボックスシャドウ、背景の複数適用、オブジェクトのロテイションといったCSS 3で使えるようになる代表的な表現について書かれてます。回転できるんスね。これ地味だけど色々使えそう。早く当たり前に使って大丈夫な規格になってほしいもんです。

[CSS 3] Push Your Web Design Into The Future With CSS3 – CSS 3でできること

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS 3でできるようになる、新しい表現についてまとめた記事。この手の話題に敏感な人ならすでにご存じかとは思いますが、まぁおさらいという事で。角丸DIVの描画、ボーダー部にイメージを適用、DIVボックスやテキストへのドロップシャドウ、RGBにアルファ(A)を足した表現、カスタムフォントの適用などの方法とTipsが紹介されてます。CSS3で表現の幅が広がるのは嬉しい事なんだけど、いつになったら安心して常用できるようになるんでしょうね。きっとまたIEが足を引っ張るんだろうけど。

[CSS] 50 New CSS Techniques For Your Next Web Design – 次のウェブデザインのための新しいCSS Tips

  • Pocket
  • このエントリーをはてなブックマークに追加

ウェブデザインを次の段階に押し上げる、新しいCSSテクニックが50例まとめられた記事。これなかなか読み応えあります。量もさることながら、新しいCSS 3関連のテクニックも多く紹介されているので、「CSS 3に関してはこれから」という人にちょうどイイ感じ。アルファを使った汎用的なボタンデザイン(こちら)とかアツい。汎用的って点がイイなぁ。とは言っても、まだCSS 3を使えるブラウザ利用率が低いので、実用的となる時期はもうちょい先のような気がします。

[CSS 3] CSS 3 Cheat Sheet (PDF) – CSS 3のチートシート

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS3のチートシートがPDFとして配布されています。こりゃ印刷してデスクの引き出しにでも忍ばせておくと後々イイかも。PDFの中身を見ると、見慣れないプロパティーがチラホラ。まぁ今後徐々に慣れていくほかありませんな。ちなみに赤字はショートハンド記述だそうです。自分もぼちぼち勉強してかなきゃなー、っとわりとのんびり構えております。