Firefox 3.6からサポートされるようになったWOFF（Web Open Font Format）がIE9 Betaでもサポートされた事で、「実用的な技術になってきたからデモ作ったYO！」的な試みをまとめたサイト。現在3例が掲載されてますが、このサイト自体もWOFFを使ってテキストベースで制作されているようです。そもそもWOFFについてあまり詳しく知らなかったんですが、このあたりの記事を読むと、今後Webフォントとしての標準フォーマットという位置づけのようです。ただしSafariは現状未対応で、今回紹介するサイト内ではSafari用に生フォントでの表示を併用してサポートされているようです。どの作例もよくデザインされていて、ウェブの制作をしてきた人なら誰でも「これがテキストなの？」と驚くものばかり。しかしながら文字数の多い（＝フォントサイズが大きい）日本語環境ではあまり実用的ではないというのもこの技術の特徴。なんつーか英語圏ってフォントの選択肢多くてイイなぁ、なんて事を思いました。
グラデーションやドロップシャドウを使った、CSS3で行うテキストエフェクトまとめ。色々できますが、ようするに“drop-shadowプロパティを使ったクールな表現”という言葉に集約されますね。drop-shadowはただ単にテキストに影を落とすだけでなく、例えば右下方向にブラーのない白を描画する事でエンボスっぽく見せる事もできます。CSS3を導入したクールサイトでよく見かける手法です。「これくらいの事ならわざわざフォトショップでやんなくても済んじゃうYO！」みたいな感じで、どんどん導入していきたいですな。
CSS3で作られた汎用性の高いボタン。ラムネというか錠剤というか、そんな印象のなかなか凝ったデザインです。文字は当然テキストで書かれていて、またclass名を変更するだけでデザインを簡単に変える事ができ、またマウスオーバーでのハイライトにはフェード処理がされています。中には形を変える指定もあり、ボタンとしてなかなか盛りだくさんな内容。現在ダウンロードボタンが死んでいるようですが、その内復活するでしょう。ナイスですねぇこれ。
多分1年ぶりくらいにブログのテーマを修正しました。実は先週Wordpressのバージョンを3.0.1にする際にプラグインフォルダを吹っ飛ばしてしまい、その復旧をしてる間にあちこち手を入れたくなって、結局その勢いでリニューアルする事に。昨日やっと一段落。「紫は欲求不満の色」と言いますが、まさにそんな感じのいかがわしい雰囲気に仕上がったような気がしています。けど最近アレですね、デザインの話とか素材の紹介ばかりで「オッパイがどうした」とかソレ系の記事あまり書いてませんね。イケませんね。ちょっと反省しております。
メディアごとに異なるウィンドウサイズに合わせ、サイトの見せ方を変えるという手法についての考察と、作例紹介の記事。デモサイトではウィンドウサイズ取得をリアルタイムに行う様子を見る事ができます。後半の作例紹介ではただボックス要素を動かすだけでなく、文章の段組にまで配慮されたサイトなどが紹介されてます。最近じゃWin or Macだけじゃないっすからね。スマートフォンやタブレットへの対応も、こうした１歩進んだ手法で対応できると、ちょっとかっけーすね。
CSS3を使ったテキストエフェクトの作例まとめ。主にtext-shadowを使ったテキスト装飾の手法が紹介されてます。text-shadowってただ単にドロップシャドウを落とすだけでなく、使い方次第ではエンボスっぽい見せ方もできるので、それとグラデーションや透過PNGを組み合わせたりすると、テキスト属性を活かしたまま色々できちゃうYO、という事がよく分かります。CMSがバックグラウンドにあるサイト制作においては、見出しなどをテキストではき出す事が多いので、そんなサイトで役に立ちそうな内容。
CSS3のジェネレーターが各種紹介された記事。ボックス要素の装飾、グラデーション、テキスト装飾、メニューボタン生成、角丸指定、カラム生成など、様々なCSS指定に対応できます。紹介されている中にはCSS生成の総合ツールもあります。CSS3は表現の可能性という意味ではもちろん幅が広がるんだけど、より高いスキルや手間が求められる場合もあり、乱暴に言えば面倒な点もあります。そんな時この手のジェネレーターはなかなか頼りになります。
HTML5 + CSS3で記述された、汎用的なウェブテンプレートを配布しているサイト。このサイトそのものも同テンプレートで制作されていると思うんだけど、よく見ると鬼のテキストサイトだったりします。画像ほとんど使われていません。いやーアツいですなこういうの。またページ下部の“Influential Projects & Articles”を見ると、Reset.cssやjsなど、他のプロジェクトから多くのリソースを流用している事が分かります。HTML5で制作を始める際のベースとして良さそうです。
