ビデオチュートリアル：3ページのシンプルなサイトを作る - Progression 学習ノート
YouTubeのアノテーション機能を使って、コンポーネントスタイルでのビデオチュートリアルを作ってみました。 ビデオチュートリアルの制作手順 QuickTimeの画面収録機能で、画面操作を記録保存。 ※Snow Leopard (Mac OS 10.6)の 新機能 QuickTime 7 Pro で編集 余分な箇所をカット 早送りで見せたいところは、該当部分を1秒1フレーム程度で連番画像に書き出し。連番画像を読み込み倍速動画を得る。 音声は別途aifで書き出し、Audacityでピッチを調整 編集が完了したら、QuickTime形式で書き出し。※YouTubeがHDに対応しているので、サイズ変更せずそのまま書き出す。今回のサイズは幅1280px・高さ800px YouTubeにアップロード アノテーション機能を使って、ビデオ内にコメントを追加 できたもの YouTube - Progres
ピュアCSSで作る効果的なエフェクト23 – creamu
web anthologyで、ピュアCSSで作る効果的なエフェクトが紹介されています。 ざっといくつかご紹介。 3-state Button using CSS 通常時、マウスオーバー時、クリック時の3種類のボタンをCSSスプライトで作るチュートリアル Pure CSS Polaroid Photo Gallery 重なり合ったポラロイド写真をCSSを使ってデザインする Bubble Effect with CSS マウスオーバーで拡大するMacのDockのようなバブルエフェクト Pure CSS Lightbox CSSで作るlightbox系画像拡大表示 Change Text Selection Color With CSS テキストハイライト時の背景色を変更する それぞれデモがわかりやすいので、一度見てみてください。 23 Pure CSS Effects/Solutions to
ブログ記事のTwitterでの「つぶやかれ数」を表示するパーツ :Heartlogic
ブログ記事のTwitterでの「つぶやかれ数」を表示するパーツ ブログの記事に、「はてブされ数」のようにTwitterでの「つぶやかれ数」を表示するようにしてみました。以下の5つのサービスを試しています。@tomozoさんの情報提供に感謝。 ※記事公開直後にTwitterで言及したところ。Tweetmemeが瞬時に反映。backtweetとTopsyがほぼ同時と思われるタイミングで反映しました。他2つは5分以上経っても反映されませんでした。 Twib 解説： Twib - Twib API サーバーが不安定で、「つぶやかれ数」が表示されないことが多いです。これは厳しい。つぶやきの収集率もあまりよくないようです（つまり、数が増えないことがあります）。 サンプル： Movable Type用のソース。「<$MTEntryPermalink$>」の部分を記事のパーマリンクを出力するタグに置
HTML5のMicrodataとは何か？
HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。 最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。 <div itemscope> <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p> </div> この文書をWebブラウザで表示しても、 僕の名前は山田太郎です。 と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります（というのはあくまで例です）。 Microdataとは、文書の内容に対して機械に
自由な角度で使用可能な新しい発想のスタンド、IDEA LABELより「iStand」2009年12月中旬新発売 :: 株式会社イデアインターナショナル
This domain may be for sale!
捨てるのが楽しくなりそうなノート『Paper Ball』 - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
%26utm_content%3DGoogle%2BReader){kind=icon}
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
今さら聞けないWeb（制作現場に出てくる）用語集 第4回 Web デザインアプリ編 | バシャログ。
「坂の上の雲」が面白かったです、toyama です。 はい、今さら聞けないWeb（制作現場に出てくる）用語集、連載 4 回目の今回は「Web デザインアプリ編」としまして、画面デザインや画像制作にかかわる用語をピックアップしたいと思います。 単語だけでは辞書見ればわかってしまうので、実際シーブレインでどんな会話に登場するかの使用例を含めてお届けしたいと思います。 カーニング（トラッキング） 文字と文字の間のスキマを奇麗に整えること。文字詰めともいいます。 タイトルやボタンに文字を使う場合には特に気をつけたいです。 段落全体に行うことをトラッキングといいます。 使用例）この見出しんとこカーニング甘いよ。 カーニング - 意味・説明・解説 :ASCII.jpデジタル用語辞典 カンプ Webデザインでは Composite の略、広告デザインではComprehensive の略（だそうです）。
青と黒を使ったクールなWebサイトデザイン例とロゴ、WordPressテーマなど - かちびと.net
青と黒の配色を上手く使ったクールなサイトデザイン例とロゴデザイン例、ついでにWordPressのテーマも少しご紹介します。そのサイトの属性に依存しそうな配色ではありますが、可視性を高めやすいのと大人の印象を与えられる事で利点も大きそうです。そんなサイトを作りたいときの配色など参考になりそう。 海外サイトのデザイン例、国内サイトのデザイン例、ロゴ、WPテーマの順にご紹介します。 海外サイト 配色やレイアウトが参考になります。 Blueray 暗くなりがちな青と黒の配色でも青を柔らかくすると印象が違いますね。 Blueray markmeup ロゴがいい。手書き系は合わない感じもするけどこれはマッチしてます。 markmeup Massive Blue オーソドックスだけお細かい部分もしっかり作りこんでいます。 Massive Blue Wax Media かなり見やすいですね。シンプルなペー
アクセントになるラインを描くIllustratorのブラシ素材 -Xentric
デザインのアクセントになるラインを描くIllustratorのブラシ素材をXentricから紹介します。
){kind=icon}
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
テキストを画像の輪郭に合わせて折り返せる「jQSlickWrap」:phpspot開発日誌
テキストを画像の輪郭に合わせて折り返せる「jQSlickWrap」。jQueryプラグインです。 使い方もjQueryプラグインなので簡単で、slickWrapというプラグインメソッドを呼び出せば実装できるようです。 <script type="text/javascript" charset="UTF-8"> $(document).ready(function(){ $('.wrapReady').slickWrap(); }); </script> </head> <body> <img src="./myImage.jpg" class="wrapReady" /> <p>Lots of text goes here..</p> </body> 対応ブラウザでないと動きませんが、表示が崩れたりエラーが発生したりするわけではないので使ってしまってもよいかも。 Google Chrom
氷をイメージさせる PhotoShopパターンセット 「WebTreats ETC」
TOP > Design , Photoshop > 氷をイメージさせる PhotoShopパターンセット 「WebTreats ETC」 パターンを使ってさまざまな素材感や背景を表現することはデザイナーの方にとって一度は経験したことがあると思います。今回は氷を思わせるようなブルーのパターンセット 「WebTreats ETC」を紹介したいと思います。 テクスチャの大きさは1024×1024pxとなっており、またパターンはphotoshopのパターンファイル.patで制作されているため簡単に敷き詰めることが可能になっています。いくつかのファイルが公開されていましたので下記に紹介したいと思います。 詳しくは以下 比較的シンプルで使い勝手のよさそうなものから、結晶のようなパターンがアレンジされたものなど、さまざまなタイプが公開されています。デザインのテイストによっていろんな表情を演出し
水しぶきを表現できるブラシ「Water Effects Photoshop Brushes」
photoshopでの表現力の幅を格段に広げることができるブラシ、実際に愛用されている方も多いのではないかと思います。そんな中今回紹介するのは、水しぶきをリアルに表現することができる「Water Effects Photoshop Brushes」です。 水の動きをリアルに表現したブラシがいくつかラインナップされています。自然でクリアなイメージを表現する際に重宝しそうです。 詳しくは以下 水が水面で揺れ動く様、しずくが落ち跳ねる様子、水の中がゆらめ様子などさまざまな種類があり、バックグラウンドのデザイン処理など、活用次第でさまざまな表現に応用できそうです。水のデザイン処理は意外と使う機会が多いと思いますので、持っていると何かと役に立つのではないでしょうか？ ブラシはすべて高解像度で、フリーでダウンロードできるようになっていますが、Creative Commos Licenseですので非商用
ウェブサイトのデザインにグリッドを採用する際の有利な点と不利な点 | コリス
Webdesigner Depotからウェブサイトのデザインにグリッドを採用する際の有利な点と不利な点を紹介します。 To Grid or Not to Grid: Advantages and Disadvantages （画像：Grid systems in graphic design） 下記はそれぞれのポイントをピックアップして意訳したものです。 グリッドについての詳細は、下記ページなどを参照ください。 グリッドシステム -サイトへの有効活用方法 グリッドのアドバンデージ グリッドはスペースに配置やバランスや規則性を加えて、さらに素晴らしいビジュアルエクスペリエンスを与えることができます。 デザインフェーズでワイヤーフレームを直接実装することができます。 グリッドはモダンなウェブサイトのコーディングとしてテーブルにとってかわることができます。 グリッドはデザインだけでなく、マークア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
VHS toaster
新着記事
新着記事
新着記事