[Funny] Google Reader joins graveyard of dead Google products - Google墓場にGoogleリーダーが加わったから、みんな献花よろしくネ！
[Funny] Google Reader joins graveyard of dead Google products – Google墓場にGoogleリーダーが加わったから、みんな献花よろしくネ！ Pocket Tweet Googleが死に追いやったサービスの墓場にGoogle Readerが加わったから、みんなで献花しようネ！というサイト。Googleのせいでサービスを続ける事ができなくなった他社サービス、という意味ではなく、Google自身のサービス墓場となります。サイト内には献花数の多い順に並んでいて、お亡くなりになったのはつい最近なのに、Readerはすでにこの墓場内で献花数トップとなっております。それだけ多くのユーザーがいたんでしょうね。かく言う自分もユーザーの1人でして、鋭意代替サービスを探している最中でございます。まぁねー、RSSというのがコンシューマー層にとって使
[Print Design] The 30 best business cards of 2011 - クールな名刺
[Print Design] The 30 best business cards of 2011 – クールな名刺 Pocket Tweet クールな名刺をまとめた記事。この手のまとめ記事にしては変な名刺多いです。カメラのファインダーを模した透明な名刺がめちゃめちゃクール。フリーランスのカメラマンの名刺だそうです。他には組み立てられるもの、コインみたいなの、iPhoneみたいなの、椅子になるもの、切断したクレカみたいなの、皮肉の効いているものなど色々あります。保守的な日本で名刺を作る際の参考になるかどうかは分かりませんが、デザイナー的には見てて楽しいですねこういうの。 The 30 best business cards of 2011
[CSS3] 20 stunning examples of CSS 3D transforms - CSS3を使った3Dトランスフォーム
[CSS3] 20 stunning examples of CSS 3D transforms – CSS3を使った3Dトランスフォーム Pocket Tweet CSS3を使った3Dトランスフォームの作例が色々と紹介された記事。Cube状のものをグリグリ回すもの、オブジェクトのロテイト、FPS風のコンセプト、QTVRのような作例、Webギャラリー、写真のトランジション、奥行きのあるサムネール表示法、Time Machine風の画像スライド、3Dテキストなど様々な手法や見せ方が紹介されてます。ページ内の場面転換やオブジェクトスライド時に使えそうです。 20 stunning examples of CSS 3D transforms
[CSS] CSS Font Stack - CSSによるフォント指定の補助ツール
[CSS] CSS Font Stack – CSSによるフォント指定の補助ツール Pocket Tweet CSSでフォント指定する時に使うfont-familyプロパティの記述を簡単に生成してくれるオンラインツール。「Copy to Clipboard」ボタンをクリックするだけで、指定内容の記述がクリップボードに入ります。後はCSSファイルにペーストするだけ。多数の欧文フォント指定があらかじめ用意されていて、Sans Serif, Serif, Slab Serif, Monospacedとそれぞれカテゴリーに分けられて整理されてます。欧文フォントに限定はされますが、なかなか便利かつシンプルなツール。 CSS Font Stack
[CSS3] Creative CSS3 Animation Menus - マウスオーバーでアニメーションするメニュー
[CSS3] Creative CSS3 Animation Menus – マウスオーバーでアニメーションするメニュー Pocket Tweet マウスオーバーでアニメーションするCSS3メニュー。デモページはこちら。作例は全部で10例ありますが、どれもかっけーす。CSS3のアニメーション機能を使ってるので、JSに比べると動作がスムーズな印象。グリグリ動きます。こうした機能は機能性という面では必須ではないかもしんないけど、動きを含めたサイトデザイニングという意味ではなかなかアツいっす。多分実装もそれほど難しくないはず。その内何かで使ってみよっと。 Creative CSS3 Animation Menus
[CSS3] 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials - CSS3を使ったテキストエフェクト
[CSS3] 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials – CSS3を使ったテキストエフェクト Pocket Tweet CSS3を使ったテキストエフェクト、Webタイポグラフィーのチュートリアルまとめ。主にグラデーションやテキストシャドウを使った作例が紹介されています。手法としてはエンボスやブラー、レトロエフェクトなど。変わったところではテキスト選択時の反転カラーの指定方法なんかもあります。Webフォントという話になると日本語環境は何かと不利だけど、テキストエフェクトなら日本語圏でも幅広く使えそう。言うてもPCサイト制作においては某社のレガシーブラウザがまだまだ絶賛足を引っ張り中ですがｗ 30 Useful and Cutting Edge CSS3 Text Effect and W
[HTML5 CSS3] Beginner’s Guide To: Building HTML5/CSS3 Webpages - ビギナーのためのHTML5/CSS3コーディング
[HTML5 CSS3] Beginner’s Guide To: Building HTML5/CSS3 Webpages – ビギナーのためのHTML5/CSS3コーディング Pocket Tweet ビギナーのためのHTML5/CSS3コーディングチュートリアル。これから始めようという方にピッタリな内容。まずはHTML4から5になって何が変わったのかの概要説明から始まり、HTML5のスケルトンモデル（基礎となる骨組み、素体）のコードが紹介されてます。極めてシンプルな内容でそのままソースのコア部分として使えそうです。次にCSS3について紹介され、最後にHTML5でコーディングされたテンプレートやWordpress用テーマがいくつか紹介されてます。作例紹介以外にも、各種リソースへのリンクなどもまとめられており、なかなかナイスなまとめ記事。 Beginner’s Guide To: Bui
[UI Design] 40 Dribbble Shots for Mobile and UI App Design Inspiration - 優れたスマートフォンAppのUIをまとめた記事
[UI Design] 40 Dribbble Shots for Mobile and UI App Design Inspiration – 優れたスマートフォンAppのUIをまとめた記事 Pocket Tweet dribbbleというデザイナー向けのオンラインコミュニティに投稿されている、優れたスマートフォンアプリのUIデザインをまとめた記事。記事からは作例の詳細ページと、デザイナーのプロフィールページへの2つのリンクが用意されてます。作例の詳細ページ内では、アプリの配布元、インターフェースのカラースキームなどが用意されていて、Voteやタグ追加、コメントなどができます。このdribbbleというサイト、ネタ帳としてもナイスなんですが、デザイナー同士で交流するのにイイですね。 40 Dribbble Shots for Mobile and UI App Design Inspir
[CSS3] Best Examples of CSS3 Navigations and Menu Tutorials - CSS3でコーディングされたナビゲーション
[CSS3] Best Examples of CSS3 Navigations and Menu Tutorials – CSS3でコーディングされたナビゲーション Pocket Tweet CSS3でデザイン＆コーディングされたナビゲーションメニューの作例と、そのチュートリアルをまとめた記事。モノによってはjQueryを併用したり、また逆にJSを使ってない事をウリにしたりした作例もあります。オンマウス時にアニメーション、ドロップダウンメニュー、アコーディオン、タブ形式など、様々な形のナビゲーションが紹介されてます。ちょっと凝ったナビゲーションを作りたい時に是非これひとつ。 Best Examples of CSS3 Navigations and Menu Tutorials
[CSS3] Amazing CSS3 techniques you should know - 知っておくべきCSS3に関するテクニック
[CSS3] Amazing CSS3 techniques you should know – 知っておくべきCSS3に関するテクニック Pocket Tweet 知っておくべきCSS3に関するテクニック、という内容のまとめ記事。PNGを使ったアニメーション、Media Queries、テキストオーバーフロー、マスクを使ったテキスト装飾、CSS3のトランジションを使ったイメージスライダーなどが紹介されてます。数はそれほど多くないけど、地味に使えるテクニックがいくつかあってナイスな感じ。イメージを使ったテキストマスクとか今後使う機会が増えそうです。 Amazing CSS3 techniques you should know
[Web Application] snaggy - ペーストするだけで画像をアップロードできるサイト
[Web Application] snaggy – ペーストするだけで画像をアップロードできるサイト Pocket Tweet サイトを開いた状態でペーストするだけで画像をアップロードできるサイト。ドラッグ＆ドロップするだけでアップロードできるサイトなんてものもありましたが、こっちはコピペ方式です。自分の場合Macのディスプレイってわりといろんなアプリウィンドウで埋め尽くされてる事が多いので、こっちの方が好みかも。使い方やメッセージ類も、Macでは「Cmd + V」って表示されてるので、多分Winだと「Ctrl + V」に変わるんだと思います。なかなか気が利いてますね。アップロードが完了するとプレビューと固有のURLが表示されますが、簡単なトリミングや画像エディタの機能もあるので、必要に応じて手を加える事ができます。シンプルなだけでなく、多機能で使いやすいアップローダーという印象。なかな
[Javascript] Slicebox – A fresh 3D image slider with graceful fallback - 立体的なトランジションのスライドショー
[Javascript] Slicebox – A fresh 3D image slider with graceful fallback – 立体的なトランジションのスライドショー Pocket Tweet 立体的なトランジションのスライドショー。デモページはこちらです。CSS3の3D transformを使っているらしく、モダンブラウザ上ではグリグリ動きます。この動きの軽さはイイですねぇ。スライスのされ方や動きはいくつかのパターンがあり、自動再生の機能もあり、個別の画像のキャプション表示機能もあります。ちなみに使っているJSライブラリはjQueryのようです。トップページでのスライドJSって最近じゃよく見る手法ですが、このグリグリ感はなかなかアツいです。 Slicebox – A fresh 3D image slider with graceful fallback
[Wordpress] 15 Free WordPress Themes with a Responsive Layout - レスポンシブレイアウトに対応したワードプレステーマ
[WordPress] 15 Free WordPress Themes with a Responsive Layout – レスポンシブレイアウトに対応したワードプレステーマ Pocket Tweet レスポンシブレイアウトに対応したWordpress用テーマ15選。出てるもんなんすね。それも15個も紹介されてて、ちょうどこのブログもレスポンシブレイアウトで作り直そうと考えているのでなかなかタイムリーな記事。なんかこう、単純にUA見てスマートフォン対応するっていうよりは、こっちの手法の方がスマートな気がするんですよね。PCとスマートフォン以外に最近タブレットとか色々あるし。 15 Free WordPress Themes with a Responsive Layout
[Javascript] 10 interesting jQuery plugins (august 2011) - 興味深いjQueryプラグイン
[Javascript] 10 interesting jQuery plugins (august 2011) – 興味深いjQueryプラグイン Pocket Tweet 興味深いjQueryプラグインを集めた記事。この手のまとめ記事はよく見るけど、今まで見たことないプラグインが多く集められていたので紹介。アニメーションするプログレスバー、画像ズーム、iPhoneのドラムロールを模したもの、Tooltip、Ligtbox亜種、リンク先ページの先読み、画像アップロードツールなどがその内容です。 10 interesting jQuery plugins (august 2011)
[CSS3] Brushed Metal style in CSS3 - CSS3で描画するブラッシュトメタル
[CSS3] Brushed Metal style in CSS3 – CSS3で描画するブラッシュトメタル Pocket Tweet ナニコレこれスゴい。画像を使わずにCSS3だけで描画したブラッシュトメタル調のボタン。実際の動作デモはこちらから見る事ができます。メタル調のテクスチャはグラデーションで描いてるらしく、押すと青く光ります。気合いと根性でここまで描けるんですね。まぁ画像使っちゃった方が早いと言えば早いんですが、なんかこう「コードだけで描いてやるんだ！」的なアツいものを感じましたですよ。ただしブラウザによってはウマく表示できない事もあるみたいです。Safari, Firefox, Chromeで見比べた見たけど、Safariが最もキレイに表示されて、Firefoxだと丸ボタンのテクスチャは落ちてました。 Brushed Metal style in CSS3
[Javascript] spin.js - ロード中のクルクルを描画するJS
[Javascript] spin.js – ロード中のクルクルを描画するJS Pocket Tweet iPhone Appなどでよく見る、ロード中を示すクルクルを描画してくれるJavascript。画像を使わず、jQueryなどの外部JSライブラリも必要としないので、これ単独で使えます。またラインの太さや長さ、回転スピードや残像の数まで細かく設定できるので、サイトに合わせてデザインできます。ナイスですねこれ。 spin.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Presentation] big - 超シンプルな、Webベースのプレゼン用フレームワーク
[CSS3] Tabs with Round Out Borders - 角と付け根を丸くしたタブ表現
[UI Design] 42 Outstanding FREE UI Kits for Web Designers - フリーで使えるWebUIキット
[Color Scheme] Top 10 Best Free Online Color Tools - 色に関するオンラインツール