Quickly Build a Swish Teaser Page With CSS3 | Webdesigntuts カッコいいティーザーページ作成用CSS3テンプレート。 CSS3を使った背景グラデーションやフォームの微妙なアニメーション等、ちょっと先進性を感じるデザインとなっているテンプレートが公開されています。 テンプレートはチュートリアル付きで原理を学ぶことも可能。 フォームにカーソルを合わせるとアニメーションするあたり、なんとなくここ最近のトレンドっぽい感じです。 ちょっと新しいWEBサービスを先行で宣伝するためにエンジニア等に対しては期待度UPなティーザーページを作るのに参考にできるかも 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル アニメーションするバナーをCSS3で作るチュートリアル CSS3でクールな角丸テーブルを作る例 Appleのナビゲーシ

sigma.js | a lightweight JavaScript graph drawing library ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」。 HTML5 canvasベースのスタンドアロンライブラリだそうです。マウスでドラッグしたりマウス位置に応じてインタラクティブに変化させることができます。 次のようにグラフィックが美麗であるので、個人的にはグラフィック作成用途に使っちゃってもいい気がしました。 関連エントリ 複数要素の関連をビジュアライズできるライブラリ「arbor.js」 HTML5のキャンバスと連動させて音声をビジュアライズしたデモ 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」

Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」 2012年04月02日- Timeline Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」。 一見スライドショーのようでもありますが、タイムライン付きのスライドショーになっています。何かの歴史を語る時には是非使いたいと思ってしまう程のクオリティです。 スライドショー内にはHTMLならなんでも埋め込めるということでYoutubeやGoogleマップがいい感じにレイアウトされて表示されています。 スライドショーと連動してタイムラインもアニメーションします。タイムライン側をクリックしてスライドショーの位置を選択することも可能。 スライドショー部分はドラッグ＆ドロップで移動することができます タイムライン部分の拡大。う〜ん素晴らしい！ この

25 Useful Html5 Cheat Sheets and Tutorials For Web Developer HTML5で色々作るチュートリアル＆チートシート ギャラリーやcanvas、スライドショー、コンタクトフォーム等色々なものを作るチュートリアルとチートシートなどがまとまっています。 HTML5でテトリスを作るチュートリアルなんかもあります 最近HTML5ネタが多くなって来ました。 ネタに事欠かないのはいいことですが実際に追っていくのは大変ですね 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 HTML5ベースのオー

CSS drop-shadows without images ? Nicolas Gallagher CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例が色々公開されています。 一昔前なら、どう考えても画像を使っていると思ってしまうこうしたグラフィックもCSSで実現できてしまいます。 パターンも多くて実用的です。ヘッダ、メニュー等、ありとあらゆる部分に応用できそう。 画像編集ツールは一切不要です。 例えば、1個の要素を見てみましょう。 HTML では <div> にclassをふって中身は<p>のみだけというのに、これだけのデザインが実現します。 当然、要素を回転させることも出来ますが綺麗に描画できています。 なんとも夢のような話ですが、CSS3対応の Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ という大体の

20 Beautiful Free XHTML/CSS Templates | Creativeoverflow ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０が、websitetemplatesonline.com から紹介されています。 Photoshopテンプレートではなく、既にHTMLの形になっているので便利です。 Photoshopのファイルは含まれないようなので、この点は注意したほうがいいかもしれません。 全部見る 関連エントリ シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ハイクオリティでフリーなXHTMLテンプレート61 クールなデザイン満載のXHTML/CSSテンプレート４０種 プロレベルでハイクオリティなXHTML/CSSテンプレート集

Lumzy ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」というのが公開されているみたい。 デザイナーさんであれば、Photoshopでまずデザインを作るより、顧客にどういうサイトを作るか、イメージしてもらうためにモックを作るわけですが、それがブラウザ上で高速にできちゃいます。 ネットブック片手にブラウザさえインストールしてネット環境さえあれば、顧客と相談しながらサイトのレイアウトを作っていっちゃえますね。 サインアップとか無しにすぐに使えるところもGoodで、Flashを使った直感的なUIでモックアップをサクサク作れちゃいます。 ツールを立ち上げると、まずプロジェクト作成画面がでるので適当にいれて「Create Project」します。 作成すると、ボタンとかメニューバー、リスト、データグリッド、コンボボックスなどのありとあらゆるUIパーツが最初からそろっていて