けSERAせらせらせら

木曜日, 7月 09, 2009

サイトをかっこよくするCSSテクニック10

WEB HOSTINGというサイトで、サイトをかっこよくするCSSテクニックが紹介されています。

ざっといくつかご紹介。

» Image gallery with hover box preview
　画像マウスオーバー時に拡大表示してくれる
» Alert Box
　シンプルでクールなアラートメッセージデザイン
» CSS Sliding Sprite Window
　CSSスプライトで背景画像をクールに切り替える
» Gradient text effect using CSS purely
　CSSを使ってテキストにグラデーションをつける
» Creating a sliding image gallery
　水平・垂直方向のスライドするイメージギャラリー
» CSS rollover buttons
　JSを使わずにCSSスプライトでロールオーバーボタンを実装

結構いい感じのがそろっていますね。

その他のリストは以下からどうぞ。

» 10 CSS tricks that make website looks cool instantly!

リスト形式でサイトマップを書くとグラフィカルに表現してくれるCSS『SlickMap CSS』

これ、ちょっと便利かもですよ。リスト形式（UL）でサイトマップを書くとスタイリッシュなマップに仕上げてくれるCSSです。ちゃんとリンク先も保持してくれますよ。

site1

↑ こういうHTMLが・・・。

site2

↑ こうなっちゃいます。

かなり綺麗にフォーマットしてくれるのでおすすめかな。HTMLとCSSなので修正も簡単ですしね。

詳細＆ダウンロードは以下からどうぞ。

» SlickMap CSS — A Visual Sitemapping Tool for Web Developers

金曜日, 7月 03, 2009

電気スタンドロボット

ご存知のとおり、Luxo Jr.は、みんなが大好きな映画を沢山生み出してくれる映像制作会社Pixarのマスコットですが、今回ご紹介したビデオに登場しているのは、Pixarが開発したオーディオアニマトロニクスなLuxo Jr.なんです。

月曜日, 6月 29, 2009

便利なPhotoshopのカスタムシェイプ

Naldz Graphicsで、便利なPhotoshopのカスタムシェイプがまとまっています。

ざっといくつかご紹介。

↑はCustom Shape Mix。

便利なPhotoshopのカスタムシェイプ30+
People Silhouettes

便利なPhotoshopのカスタムシェイプ30+
Live Trees

便利なPhotoshopのカスタムシェイプ30+
Custom Shapes Pack v. 1.1

便利なPhotoshopのカスタムシェイプ30+
Splats N Drips_Custom Shapes

deviantArtなどにリンクしているので、ライセンスについてはリンク先を確認してください。

» 30+ Useful Photoshop Custom Shapes Set

知っておきたいフリーのデザインアプリ

Creative Nerdsで、知っておきたいフリーのデザインアプリが紹介されています。

ざっといくつかご紹介。

» Active Pixels
　Photoshopに似た素晴らしいフリーソフト
» Inkscape
　オープンソースのベクターグラフィックエディタ
» Pencil 0.4.4b
　オープンソースの手書きアニメ作成ソフト。Windows,Mac,Linuxで動作する。↑のキャプチャはこちら
» Blender
　オープンソースの3Dモデリングソフトウェア
» Synfig
　ベクターベースの2Dアニメーション作成ソフト

なんだかすごいのがいっぱいあります。

その他のリストは以下からどうぞ。

» 25 Free Must Download Design Programs

木曜日, 6月 18, 2009

宇宙のスケールのでかさを垣間見られる惑星・恒星のスケールモデル　

水曜日, 6月 17, 2009

UIまとめサイト

Collection: Design Patterns

第一位はここかなぁ・・・。なんだかんだでFlickrでUIパターンを集めているグループが一番かな、と。インターフェースはFlickrそのものだし、事例も豊富です。

ui_f1

Collection: [Design Solutions]

ほぼ同点で二位はこちら。こちらもFlickrグループですね。

ui_f2

Interaction Design Pattern Library - Welie.com

三位はこちら。ちょっとマニアックですが、きっちりまとめてあって好感が持てます。

ui_welie

MephoBox | Web Design and Web Inspiration

これが四位かな。いまどきのインターフェースがスタイリッシュにまとめられています。

ui_imadoki1

Pattern Tap : Organized Web Design Collection of User Interfaces for Inspiration and Ideas. The CSS Gallery Alternative - Pattern Tap

こちらが五位。ほぼ四位と一緒ですが。こちらもいまどきのUIですね。

ui_imadoki2

Product Images - ecommr: a collection of e-commerce interface and design elements

ここらへんから番外編。これはショッピングサイトに特化したUIまとめサイトです。そっち系の人は参考になるのでは。

ui_shopping

Yahoo! Design Pattern Library

これも番外編。Yahoo!がまとめたソーシャルサイトのUIパターンです。勉強になりますよ。Stack Overflowの記事とあわせてどうぞ。

ui_yahoo

UI-patterns.com

最後にこれ。サイトの読み込みが遅くて評価しずらいのですが、内容としてはよくまとまっています。

ui_ui

火曜日, 6月 16, 2009

自分でコンセントから充電するロボット

金曜日, 6月 12, 2009

シャツをあっという間にたたむ裏技

リアルロボット写真集

リアルロボットの写真・ビデオ

こちらはＮＡＳＡのロボット写真・ビデオ

木曜日, 6月 11, 2009

CSSスプライトを使ったメニューの作り方

LINE25というサイトで、CSSスプライトを使ったメニューの作り方が紹介されています。

CSSスプライトを使ったメニューの作り方
1枚の背景画像を使って、こんな感じでCSSを指定していきます。

デモは以下から。

» View Demo

ソースファイルもダウンロードできますね。

ぜひ見てみてくださいー。

» How to Create a CSS Menu Using Image Sprites

ページのめくれを実装する方法

WebDesignBoothで、ページのめくれを実装する方法が紹介されています。

ざっとご紹介。

» imple Page Peel Effect with jQuery and CSS by Soh Tanaka
Soh Tanakaによる、jQueryとCSSを使った例
» The Sexy Curls jQuery Plugin
　Elliott Kemberによる、jQueryを使った例。jQueryとjQuery UIの両方が必要
» jQuery Page Peel 1.2 by Smpl Multimedia
オプションが豊富なjQueryプラグイン
» How to create a page peel advertisement in Wordpress
　WordPressでページのめくれを実装する方法
» Wordpress Page Peel plugin
　Avramovicによる、WordPressで使えるプラグイン。コンパネからいじれる

詳しくは以下からどうぞ。

» 5 Extremely Simple Ways To Add Page Curl To Your Website