クールなタイポ作品を40例集めた記事。ウェブというよりは印刷物っぽい作例が多いけど、ロゴタイプやテキストエフェクトの参考としてはウェブにも応用できそうです。キャッチとかメインイメージの制作とか。

40 Extremely Cool and Inspiring Typography Designs

フォントデータそのものと、それに付随するJavascriptをサーバにアップすることで、セーフフォント以外のフォントをブラウザで表示できるようにするというもの。画像にしちゃうと更新性が悪くなるし、だからといってテキストを活きたまま掲載すると見た目が悪い。そんな時に使えそうです。導入の詳しい方法は「USAGE」の欄に紹介されてます。ただ.ttfのフォントデータそのものをサーバに上げる必要があるので、著作権とかそのあたりには注意が必要です。

typeface.js

1ページだけのウェブサイトって最近たまに見ますね。ここではそんなシングルページのクールなサイトを紹介してます。シングルページとは言っても、実際にはJavascriptを使ってタブ切り替えやスライド、アコーディオンなどの見せ方で、数ページ分のコンテンツがあったりします。JSがメジャーになった事で、コンテンツの見せ方も多様化したといったところでしょうか。

30+ Inspirational and Creative Single Page Website Designs

ウェブ制作において、デザインを起こす際にフォトショップを使う人は多いと思います。この記事では、作例を用意してそこに至るまでのフォトショップチュートリアルが紹介されてます。各リンク先のチュートリアルそのものも興味深いんだけど、単純にウェブデザインのネタ帳としてもなかなか使えます。いいアイデアを求めてる時なんかに良さそうです。

20 High Quality Photoshop Web Design Tutorials

CSSを生成できるオンラインツールのまとめ記事。どんなものがあるかというと、レイアウト、フォント関係、コード圧縮、バリデーション、ブラウザごとの確認、グリッドレイアウトのためのジェネレーター、メニュービルダー、フォーム装飾、丸角ジェネレーター、段組レイアウト、CSS Spriteコード生成、カラーパレット、EmやPxなどの単位変換などがその内容。面倒な部分はこうしたオンラインツールに頼るってのも、ひとつの手ですね。フォント関係とか結構重宝します。

40 Powerful CSS Tools And Generators To Automate Your Workflow

CSSに関するトリックやTipsをまとめた記事。もちろん時期的にCSS3に関する内容も含まれます。縦方向のセンタリング、ショートハンド記述、角丸、IEハック、ベースフォントサイズの指定、縦方向100％、リンククリック時の点線の消去、CSSリセット、透明化、ClassとIDの優劣、テキストのイメージ置換、印刷時のページ切り替えなどがその内容の一部。CSSを使ったウェブ制作が当たり前になってきた今、ちょっと突っ込んだコーディングができると現場で重宝されそうです。

47 CSS Tips & Tricks To Take Your Site To The Next Level

CSS3を使って表現する、ちょっと進んだナビゲーションメニューのまとめ記事。動きを使って表現するもの、丸角やグラデーションを使って画像なしで作ったもの、ドロップダウン、奥行きを持たせたメニュー表現などがあります。こうして見ると、CSS3を使う事で今まで表現するのが難しかった事がわりと簡単にできるようになるので、今後凝ったナビゲーションとか色々出てきそうです。

15 CSS3 Navigation and Menu Tutorials and Techniques

クールなワイドスクリーン用デスクトップ壁紙。ネイチャー系、動物、車、建造物、花、アブストラクト、CG、ブリトニーといった感じでカテゴリ分けされ、多くの壁紙が紹介されてます。最近じゃマックでなくてもワイドスクリーンが増えてきたので、この比率の壁紙を探すのにちょうどイイですね。

45 Stunning Widescreen Wallpapers To Smarten Up Your Desktop

CSS3で描画するOperaロゴ。これなかなか興味深いです。CSS3の新要素として、角丸ボーダー、グラデーション、ボックスシャドウの3つを使って描画に挑戦。出来上がったソースを各種ブラウザで表示してみるとこうなるYO、という一覧付きです。ちなみにSafariのWebkit環境では問題なく表示できました。けどOperaは微妙ですね。IEについては何も言うまい、といったところでしょうかｗ

Opera Logo with CSS

人間の愚かさを示す45枚の写真。といってもいわゆる地球温暖化を防げだとか、石油資源の枯渇だとかソレ系の大きい話ではありません。ごくごく狭義の、ピンポイントなアレです。「そんな事しちゃダミだよ！」的な写真ばかりで、見ているとクスっとしちゃいます。人間てのは欲の深い生き物だなと。

45 Shots of Human Stupidity

テクスチャやブラシ、ベクターデータなどのデザイン用の各種素材をまとめた記事。#3ということなので、それ以前の2と1も併せて紹介。デザイニングの仕事をしてる人にとっては、コレ系の素材はなんぼあっても困る事はないので、仕事の引き出しの拡充に是非これひとつ。

Amazing Design Freebies #3 | #2 | #1

CSS3を使って表現する、各種ソーシャルメディアのアイコン。興味深いのが、これらのアイコンがCSS記述だけで表現されている点で、画像は1点も使ってません。デモサイトはこちら。ただしどのモダンブラウザでもオッケーというわけではなく、Safariでは角丸の表現が欠けており、またFirefox3.5ではグラデーションがうまく表示されませんでした。Firefox3.6環境で初めて作例のように表示されます。CSS3を思いっきり使った表現が、まだまだ実用的でない事が分かる作例です。けどFlickrやDeliciousのアイコンとかなかなか気合いが入ってます。

Create Social Media Icons in Pure CSS