YUIとはYahoo!の提供するYahoo! UI Libraryの事。JavaScriptとCSSのライブラリが公開されています。このCSSライブラリを利用して、簡単なプルダウンメニューと数値入力によって、マルチカラムレイアウトのHTMLソースを吐き出してくれます。ページ内にフロート表示されている“Toolbox”内の各数値を入力、必要に応じて“Add Row”ボタン等を使ってレイアウトを完成させたら、Toolbox下部にある“Show Code”を押すとHTMLソースを吐き出してくれます。ただしCSSソースについては同時に表示されないので、別途YUIのライブラリ本体をコチラからダウンロードして使いましょう。クロスブラウザ対応で、ブラウザによってレイアウトが崩れにくいような作りになっているそうです。うーん素晴らしい。
ダークな雰囲気や、主に黒基調のクールなサイトを30集めたというエントリー。業種にもよるけど、最近企業のサイトでも黒基調で作られてる場合ってたまにあるよね。mBlogも去年末に黒基調にしたんだけど、それ以来トップ絵とかめっちゃ作りやすくなった。まぁ芸風でしょうか。ちなみにこのあたりめっちゃ趣味だなー。勉強になります。
フォトショップを使ってリキッドメタルの絵を作るチュートリアル。まぁ水銀みたいというか、T2のT-1000みたいなアレです。おおまかな手順は、新規チャンネルを作って、そこにフィルタ＞描画＞雲模様1を使って描いた雲の絵をボカしてレベル補正してまたボカして、その後で照明効果をアルファチャンネルに当てて、最後にフィルタ＞スケッチ＞クロムをかけて完成。わりと簡単な手順でサクっと作れます。それにしても照明効果のフィルタってなんか懐かしいなー。フォトショップのVer.3とか4の頃はこのフィルタ使って文字を立体に見せてたのを思い出します。あの頃に比べたら今のバージョンは随分と便利になったよね。
フォトショップを使って、映画Sin Cityっぽい絵を作るチュートリアル。おおまかな手順は以下の通り。下記手順を踏んだあとは、必要に応じてブラシツールなどで微調整して完成。わりと簡単なレタッチなのでサクっとできますね。グリーンの目を強調したりするとよりシンシティっぽくなりますね。
元レイヤー：
モノクロにして、レベル補正を使ってコントラストを強調
フィルタ＞アーティスティック＞カットアウト雨レイヤー：
新規レイヤーにフィルタ＞ノイズ＞ノイズを追加
フィルタ＞ぼかし＞ぼかし（移動）
編集＞変形＞ゆがみで変形
レイヤープロパティをビビッドライトに
雨レイヤーの手順を繰り返し、歪み度合いの違う雨を作成
CSS HappyLifeさんより。
CSSのclassやidの定義名ってわりと自分も悩む方なんだけど、一般的というか、よく使われる定義名のリストが一覧になってます。これ同業者の方々結構喜ぶんじゃないでしょうか。自分の場合は全体はContainerとかWrapperって付けて、中のカラム構成についてはAlpha, Beta, Gamma, Delta…という感じ。LeftとかRightにしちゃうと、カラムを左右にひっくり返した時に困るからという理由。NaviとかSideBarなんかもよく使いますね。一貫した自分なりの法則性みたいなものをつかんでしまえば定義名に悩む事もないのかもしれないけど、やはり他人がどうしているのかというのは気になるものです。
SVGファイルのメカニカル時計。正直申しましてコレ見た時は、「SVGってなんね？」って思いました。名前は聞いた事あったけど何の事かは知らなかったので調べてみると、XMLによって記述されたベクターグラフィック言語だそうです。平たく言えばFlash PlayerのいらないFlashみたいなもんでしょうか。いやちょっと乱暴過ぎるかな。XMLで記述されているので普通にテキストエディタで開けるという点が特徴のようで、実際にmiで開けました。なんか未来のフォーマットという印象。で、そのSVGフォーマットで作られた機械時計がコチラ。秒→分→時間→日→月と歯車が回ってカウントされているのが分かります。うーんよく作るなぁこんなの。ソース見るとわりと宇宙語でした。
Animated Mechanical Clocks with moving gears >> | SVGについて >>(Wikipedia)
画像やテキストなどをクロスフェード（一方の絵が消えながら、別の絵が出てくるトランジション）表示させる事のできるJavaScript。Flashではよくある表現だけど、JavaScriptで同等の機能と表示を実現している点がスゴい。コチラでデモを見る事ができます。時間を指定して自動的に変わるようにも、ユーザーからの操作によって画像が切り替わるようにもできるようです。導入方法についての解説はコチラ。HTMLのヘッダ部に.jsへのリンクを追加し、CSSファイル内にSmoothGalleryが参照するCSSファイルのインポート指定をして、それぞれをサーバ内にアップするというのが基本的な流れ。わりと簡単そうです。これだけのスクリプトがフリーで提供されてるなんて素晴らしい。作者の方に感謝。
