2011年3月23日 管理人のブックマーク:phpspot開発日誌
2011年3月23日の気になったページ集です Mozilla Japan ブログ - 全世界 4 億人のユーザに向けて Firefox 4 の正式版を公開しました #fx4 #mozpark http://mozilla.jp/blog/entry/6480/ 動画：サムスン Galaxy Tab 8.9 / 10.1 発表、iPad 2より薄く軽く http://japanese.engadget.com/2011/03/22/galaxy-tab-8-9-10-1-ipad-2/ Firefox 4 正式リリース、UI刷新・高速化・新機能多数 http://japanese.engadget.com/2011/03/22/firefox-4-ui/ 404 Blog Not Found:私の言語遅延学習法 - 三つのルール+1 http://ht.ly/4jFFS 東京電力電力供給状況
超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル:phpspot開発日誌
How to Create CSS3 Speech Bubbles Without Images JavaScript & CSS SitePoint Blogs 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。 吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。 次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。 影もついてますね。 角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。 border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった
おすすめのデザイン本「飾りパーツ素材集」: DesignWorks Archive
【フリー壁紙】A CANDLE LOSES NOTHING by モンクレールウンアウトレット (12/20) 【フリー壁紙】A CANDLE LOSES NOTHING by ルイヴィトンコピー (01/04) 【フリー壁紙】A CANDLE LOSES NOTHING by コピーブランド (11/11) 【フリー壁紙】A CANDLE LOSES NOTHING by バーバリー 財布 メンズ (08/17) 無料で使える2010年カレンダーのまとめ by 浅見 晴美 (11/29) 毎回、注目のデザイン書籍や写真集、おすすめの本を紹介します。 今回はおすすめのデザイン本「飾りパーツ素材集 」です。 デザインをよりクリエイティブに見せるために素材として活躍するさまざまな種類のパーツ、一から自分で作るというのはなかなか大変なことだと思います。そんなデザイン作業の効率をアップさせてくれる
白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット:phpspot開発日誌
JustVector Social Icons 1.0 Alex Peattie, a web developer and designer. 白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット。 次のようなアイコンが公開されています。 形式は、EPS、SVG、AI、PNG形式で配布してるようです。 当然ながらPNGのものは32x32のラスター形式になっています。 evernote、amazon、facebook等のアイコンもありますね。 関連エントリ iPhone・Androidアプリ等に使えるアイコンセット総まとめ：2010 jQuery UI のアイコンチートシート モダンなブラウザアイコンセット９
オシャレなECサイト構築用のWordPressテーマ３０:phpspot開発日誌
30 Best Wordpress E-Commerce Themes - tripwire magazine オシャレなECサイト構築用のWordPressテーマ３０。 次のように、WordPressで作ったか分からないぐらいにカスタマイズされたテーマ集が３０個公開されています。 更にプラグインや、ビルトインの機能を使ってショッピングカートの仕組みも内蔵されているので、ECサイト構築用にも使うことが出来そうです。 使い慣れたCMSをECサイトにそのまま使うことでラーニングコストが最小化できそうですね。こまわりが効くかどうかなど検証は必要だと思いますが。 関連エントリ PHPで書かれた次世代のショッピングカートシステム「TomatoCart」 フリーで使えるPHP＋MySQLで構築されたショッピングカートシステム「Zeuscart」 カートが目立たず、いい感じにスライドしてくれるショッピン
CSSでグラデーションを実現する方法、主要ブラウザ全対応 | エンタープライズ | マイコミジャーナル
Robert’s talk Firefox 3.6 / Gecko 1.9.2のCSSにはグラデーション機能が実装されている。この機能を利用すると背景のみならず要素ごとにグラデーションをかけることが可能になり、画像を使うことなく手軽に美しいUIを実現することができる。 CSSグラデーションを使ってクールなボタンをつくる方法 Firefox 3.6でCSSグラデーションを使う方法 グラデーション実装はFirefox以外のブラウザでも実現されている。Operaはまだ正式サポートしていないが、近いうちにサポートが実現するとみられる。IEではIE 5.5のころからサポートしており、WebKitを採用しているChromeとSafariでもサポートされている。IE8から名前が変わっているが指定する内容は同じまま。 CSSグラデーションは便利な機能だが、現状ではIE、Firefox、WebKit (Ch
Beautiflができるまで〜制作レポート〜 | ClockMaker Blog
先日公開した自主制作で作ったギャラリーサイト「 Beautifl 」ですが、おかげさまで順調なスタートを切ることができました。仕事とは別に趣味の時間だけを使って10日ぐらいで作ったのですが、せっかくなので制作レポートをまとめてみました。 きっかけ ことの発端は、とあるFlasherの懇親会。その席にはdokeさんやsoundkitchenさんらがいたのですが、wonderflについて話す機会がありました。「wonderflの作品をカテゴリーで分類したサイトがあったらいいんじゃないか」「演出の注文に役立つので、デザイナーにwonderflを見るように勧めている」と言った話で盛り上がっていたのですが、今考えるとその意見をまるまる採用させて頂きました。ただその時は、私がサイトを作ろうとは思っていませんでした(笑) サイトの作り方 実際に作ろうと思ったのは8/21(金)です。ちょうど仕事も一時的に
インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」:phpspot開発日誌
インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」 2011年03月11日- CSS3 Generator - By Eric Hoffman & Peter Funk インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」。 CSS3ジェネレーターは多くありますが、中でも優れたUIとわかりやすさを持っているように思えるジェネレーターの紹介。 角丸、シャドウ、透明度、グラデーション、枠線、背景色の設定ができ、リアルタイムに反映されます。 あっという間にCSS3コードを生成出来ました。 UIだけでも一見の価値ありです。 関連エントリ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3で動くプログレスバー作成サンプル ステップで学べるCSS3ボタンのデザインチュートリアル CSS
Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。:phpspot開発日誌
Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。 2011年03月09日- jQLabel jQuery Plugin - Create Beautiful Labels Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。 文字列を<span class="label">好きな文字</span>として囲えば次のように文字修飾できます。 ワードごとに色分けしてテキストを分かりやすくすることができそうです。 コードは次のように書きます。ワードと、その色を連想配列で定義してあげる感じです。 $(".label").jQLabel({"pointer":true, "labels":{ "awesome":"#FF9E00", "gmail":"#A65D03", "labels":"#A4977
立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル:phpspot開発日誌
I will show you how to add that 3D look to your web designs, how to creg web layout with 3D-looking elements in Photoshop 立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル。 次のように、立体感を出した面白いデザインを作成する一連の流れが見れます。 CSS3でリボンにしたりするテクニックですが、こういうデザインも可能なのだなと、面白かったのでご紹介です。 たったこれだけなのに、奥行きが出てインパクトをうまく出せている気がします。 真似してみるのも楽しいかも。 関連エントリ 記事タイトルをリボン風にシンプルに実装するCSSサンプル ブロック要素に巻いて立体感を出せるリボンをWEB上でジェネレート「3D Ribbon Generator」 CSS3で
瞬時にタグクラウドが形成できるjQueryプラグイン「Jimpl Tag Cloud」:phpspot開発日誌
Jimpl Tag Cloud 瞬時にタグクラウドが形成できるjQueryプラグイン「Jimpl Tag Cloud」 次のようにHTMLを定義して $('#tagcloud').tagCloud({separator: '.'}); とするだけで上記のタグクラウドが形成出来ます。 <div id="tagcloud" class="tagcloud"> Image converter. Image converter. Image resizer. Png to ico. Png to ico. Png to ico. Ico to png. Png to jpg. Jpg to png. Jpg to png. Bmp to jpg. Jpg to bmp. Jpg to gif. Gif to jpg. Png to gif. Png to gif. Gif to png. Onl
WEBサイトに使うと忘れられなさそうなパンチの聞いた背景パターン集:phpspot開発日誌
50 Brown Patterns for an Added Impact to your Designs | Naldz Graphics WEBサイトに使うと忘れられなさそうなパンチの聞いた背景パターン集。 今にも動き出すのではどういうのはインパクトの大きい背景パターン集がまとめとして公開されています。 WEBサービスなんかに使ってみてもよいかもしれませんね。 気合の入ったアイデアをインパクトの強い背景画像と共に設定してみるのもいいかも。 関連エントリ 高級っぽさを演出できるPhotoshopパターン500 背景画像に使えるPhotoshopの背景パターン2000 秀逸なテーブルデザインのパターン集 背景画像に使えるシームレスなパターン画像500種 紙質色々なハイクオリティなテクスチャパターン色々
HSL形式のカラーがブラウザ上で作れる「HSL Color Picker」:phpspot開発日誌
HSL Color Picker - by Brandon Mathis HSL形式のカラーがブラウザ上で作れる「HSL Color Picker」 color: rgb(50,50,50) みたいにして色指定できますが、CSS3ではHSLによる色指定も可能だそう。 HSL は Hue(色相) Saturation(彩度) Lightness(輝度) の略で、それぞれ、0〜360、0〜100、0〜100 で指定して色を表現できます。 Photoshopでいう、色相、彩度の調整に似ていて、彩度や輝度を下げたりして類似色を作るのも簡単なので便利そう。 通常の１６進、rgb、hsl 形式が一気に作れるので便利です。
これは覚えておいたほうがいい！というPhotoshopのブラシ５０セット:phpspot開発日誌
50 Free Photoshop Brush Sets Everyone Should Have | Web Design Blog, Web Designer Resources これは覚えておいたほうがいい！というPhotoshopのブラシ５０セット。 かなり使えそうなものが多かったのでご紹介します。 クラウド時代の雲のブラシ。何ともリアル 自然のいい感じが出せそうなブラシ ペンキなんかをぶちまけたようなブラシ いろんなタイプの草のブラシ なんか地球爆発してるっぽいブラシ 油絵っぽい感じを出せるブラシ 光がかっこいいブラシ 北斗の拳の髪の毛もかけちゃうヘアブラシ フラクタル 他にも色々あるので是非元エントリを参照してみて下さい。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 100以上のクールなPhotoShop用ブラシがダウンロードでき
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ:phpspot開発日誌
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ。 「スマートフォン向けサイトの作り方エントリのまとめ」にてスマフォ用サイト作りの基本はまとめましたが、実際にデザインする際の参考になりそうなギャラリーサイトやブログエントリをまとめてみました。 インタフェースの研究ということで、サイトデザインのみではなくアプリのデザインギャラリーも紹介。 ギャラリーサイト CSS iPhone 様々な海外ポータルやデザインサイトのiPhone向けサイトをサムネイル付きで紹介。 どのサイトもよくデザインされており、非常に参考にできる部分が多そうです。 iOSpiration iPhone Web Design Inspirations - iPhone and iPad Design Inspiration iPhone/iPadサイトやiPhone/iPadアプリ・ゲームのデザインギ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/05/grid-design.html
Web Design Tutorial