多分1年ぶりくらいにブログのテーマを修正しました。実は先週Wordpressのバージョンを3.0.1にする際にプラグインフォルダを吹っ飛ばしてしまい、その復旧をしてる間にあちこち手を入れたくなって、結局その勢いでリニューアルする事に。昨日やっと一段落。「紫は欲求不満の色」と言いますが、まさにそんな感じのいかがわしい雰囲気に仕上がったような気がしています。けど最近アレですね、デザインの話とか素材の紹介ばかりで「オッパイがどうした」とかソレ系の記事あまり書いてませんね。イケませんね。ちょっと反省しております。

(continue reading…)

メディアごとに異なるウィンドウサイズに合わせ、サイトの見せ方を変えるという手法についての考察と、作例紹介の記事。デモサイトではウィンドウサイズ取得をリアルタイムに行う様子を見る事ができます。後半の作例紹介ではただボックス要素を動かすだけでなく、文章の段組にまで配慮されたサイトなどが紹介されてます。最近じゃWin or Macだけじゃないっすからね。スマートフォンやタブレットへの対応も、こうした１歩進んだ手法で対応できると、ちょっとかっけーすね。

CSS3 Media Queries

CSS3を使ったテキストエフェクトの作例まとめ。主にtext-shadowを使ったテキスト装飾の手法が紹介されてます。text-shadowってただ単にドロップシャドウを落とすだけでなく、使い方次第ではエンボスっぽい見せ方もできるので、それとグラデーションや透過PNGを組み合わせたりすると、テキスト属性を活かしたまま色々できちゃうYO、という事がよく分かります。CMSがバックグラウンドにあるサイト制作においては、見出しなどをテキストではき出す事が多いので、そんなサイトで役に立ちそうな内容。

8 Examples Of Stunning CSS3 Text Effects

CSS3のジェネレーターが各種紹介された記事。ボックス要素の装飾、グラデーション、テキスト装飾、メニューボタン生成、角丸指定、カラム生成など、様々なCSS指定に対応できます。紹介されている中にはCSS生成の総合ツールもあります。CSS3は表現の可能性という意味ではもちろん幅が広がるんだけど、より高いスキルや手間が求められる場合もあり、乱暴に言えば面倒な点もあります。そんな時この手のジェネレーターはなかなか頼りになります。

11 Best CSS3 Generators To Save Your Valuable Time

HTML5 + CSS3で記述された、汎用的なウェブテンプレートを配布しているサイト。このサイトそのものも同テンプレートで制作されていると思うんだけど、よく見ると鬼のテキストサイトだったりします。画像ほとんど使われていません。いやーアツいですなこういうの。またページ下部の“Influential Projects & Articles”を見ると、Reset.cssやjsなど、他のプロジェクトから多くのリソースを流用している事が分かります。HTML5で制作を始める際のベースとして良さそうです。

HTML5 Reset

デザイナーのためのCSS3テクニックのまとめ記事。デザイナーのために、と謳っているだけあって、わりと導入の簡単そうなものが多い印象。メニュー表現やコンテンツの凝った見せ方、画像ではないテキストエフェクト、スライドメニューなどが紹介されています。対応ブラウザはシャアの面では限られますが、ちょっとした装飾やプラスアルファの機能追加としてCSS3を導入する際に便利なまとめ記事。

12 Useful CSS3 Tutorials And Techniques For Web Designers

CSS3で行えるなかなか興味深いデモ。デザイン的な表現よりも、動きを使った表現に重きを置いている印象。特にオモしろいのが、よくあるFlashバナーをCSS3で作ったらどうなるかという考察。結論から言えばほぼ同じものが作れます。作業工数や環境の成熟度など制作のプロセスは大きく違いますが、今後この程度の表現であればCSS3に移行していくんでしょうね。というかそうあってほしいというのが本音。

10 Interesting CSS3 Experiments and Demos

Smashing Magazineで行われていたCSS3コンテストの結果ページなんだけど、これがCSS3の作例紹介というかネタ帳としてなかなか秀逸です。デザイン、アイデア、機能性において素晴らしい作例がまとめられてます。画像を一切使わずに、CSS3だけで気合いで描いたグラフィック作品とかスゴいです。IEで見ると残念な感じになっちゃいますが、それはCSS3が残念なのではなくIEが残念という話でひとつ。

CSS3 Design Contest Results

CSS3での各種機能追加は便利なんだけど、実際グラデーション指定のコード書きってメンドいよねそうだよね、という人にオススメ。サイト上でパラメータをいじくりながらCSSを出力できるウェブアプリ。グラデ以外にも角丸やドロップシャドウなども併せて指定できます。CSSのコードジェネレーターとしてなかなか優秀。

CSS3 Pie

CSS3だけで描画するボタン。いわゆるPure CSSボタンです。まずHTML書いて、それから少しずつCSSを記述していく過程を、スクリーンショットを交えて紹介している点が興味深い。ある行を記述すると絵的にどう変わるのか、そのあたりがよく分かります。iPhoneやiPadなどのiOS端末や、Andoroid端末を対象にしたサイトではすでに実用的な技術なので、ぼちぼち覚えていきたいところ。

Create a CSS3 Call to Action Button

CSS3で表現できるボックス要素の角丸化だけど、画像に適用したところ思ったような効果が出せなくて、CSS TrickとjQueryを使って解決したYO！という内容の記事。記事を見ると、画像の四隅を角丸化したけど、ブラウザによっては角が丸くならなかったりボーダーが消えたりしたからそれを修正。その後jQueryを使ってドロップシャドウを加える手順とデモが紹介されてます。いずれ使う事があるかも、と思ったので備忘録。

CSS3 Rounded Image With jQuery

画像を一切使わずに、CSSだけで描画されたiPhone関連グラフィック。リンク先を見ると結構驚きます。これで画像をひとつも使ってないというのはスゴい。CSS3のCanvasタグを軸に、角丸やグラデーションなどを併用して作られているようです。当然のようにCSS3未対応のブラウザでは見る事ができない上に、対応ブラウザによっても若干の差異が出そうです。これだけのグラフィック描画ができるCSS3もスゴいんだけど、根気良く作った作者の方に拍手です。

iOS Icons Made in Pure CSS | iPhone CSS3