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

Browse By

Tag Archives: CSS3

[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の中身を見ると、見慣れないプロパティーがチラホラ。まぁ今後徐々に慣れていくほかありませんな。ちなみに赤字はショートハンド記述だそうです。自分もぼちぼち勉強してかなきゃなー、っとわりとのんびり構えております。

[CSS 3] Take Your Design To The Next Level With CSS3 – CSS3でできること

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

間近に迫っているCSS3に関して、実際のトコ何ができるようになるのかについてまとめられてます。セレクタ関係、色と透明度、カラムレイアウトに関して、背景、テキストシャドウ、フォント関係、角丸のDIVボックスなど、デザイン要素のいくつかを画像からコーディングサイドに移す事ができそうです。現状Safari 4しか対応してませんが、モダンブラウザから徐々に対応していくことでしょう。コーダーのみなさん、忙しくなりそうですw

[CSS] 5 CSS3 Techniques For Major Browsers using the Power of jQuery – jQueryを使ったCSS3のテクニック

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

jQueryを使って、来るべきCSS3で使えるようになるテクニックを先取りしちゃおう!みたいな記事。角丸のDIVボックス、ボーダー部にイメージ配置、バックグラウンドに複数のイメージ配置、テキストへのドロップシャドウ、透明度の設定などが紹介されてます。っていうか色々便利になるんだなぁ。デザイナー的にこういうのって待ち遠しいですな。まぁ着いていくのが大変と言えば大変だけど。