セクシーに動作するスライドメニューバー実装JSライブラリ:phpspot開発日誌
Sexy sliding JavaScript side bar menu using mootools at Andrew Sellick When trying to conceive ways in which space could be saved on a web page I decided a sliding menu would work well as shown in the images below.セクシーに動作するスライドメニューバー実装JSライブラリ。 クリックするとニューっとアニメーションしてセクシーに開いてくれるメニュー実装のためのライブラリが公開されています。 デモはこちら CSSによってデザインできるので、デザインも簡単です。 ちょっと変わり種ということで、デザイン系のサイトで使えそうですね。
Appleサイトの画像っぽく3Dで鏡面反射画像を作るJSライブラリ:phpspot開発日誌
Ajaxorized 3d image reflection with javascript week, this week an image reflection script, using unobtrusive javascript. Appleサイトの画像っぽく3Dで鏡面反射画像を作るJSライブラリ。 画像に次のようなエフェクトをかけることが可能です。 使い方は簡単で、次のように３ステップ。 prototype.js、scriptaculous、reflection.js(配布しているもの) を読み込み <div id="holder"><img></div> を定義 <script> new Reflect3D('holder'); </script> 黒の背景画像にも対応しているようです。 1枚の画像でも、雰囲気のある画像として表示させることが出来ますね。
SlashDot風のサイトメニューを作る「Slashdot Menu」:phpspot開発日誌
Prototype.js を利用して作られたJavaScriptライブラリまとめサイト「Scripteka... 次の記事 ≫：Javascript で HTMLエスケープを行うPHP関数、htmlspecialchars を実装 Dynamic Drive DHTML Scripts- Slashdot Menu This is a stylish collapsible menu modelled after the navigational menu found on Slashdot. SlashDot風のサイトメニューを作る「Slashdot Menu」。 次のようなSlashDot風のメニューを実装することが出来ます。 大メニュー選択でアニメーションもします。 実装コードは次のようにシンプル。 var myMenu = new SDMenu("main_menu"); // I
RSSアイコンデザインいろいろ:phpspot開発日誌
51 Top RSS Button For Your Blog | Make Money Online RSSアイコンデザインいろいろ RSSアイコンのデザインが51種類ほど紹介されています。 RSSのアイコンも、デザインの仕方でここまで色々な種類が出来るのか、と感心させられます。 これだけポピュラーになってしまったRSSアイコンですが、あなたもユニークなRSSアイコンを作ってみてはいかがでしょう。 関連エントリ 丸っこいデザインが可愛いアイコン集「3D Cartoon Icons」 RSSやデスクトップ用のアイコンが詰まったアイコン集「FreshIcons」 目を引くRSSアイコン配布サイト色々
Web2.0風バッジ作成用素材:phpspot開発日誌
adClustr Some Free Web 2.0 Badge Starbursts - Free Ad Backgrounds & AdSense Advice I created these for one of the ad backgrounds, but figured I would clean them up a bit, and release them as a download. Web2.0風バッジ作成用素材が公開されています。 配布されているＺＩＰパッケージを展開すると次のような3種類のバッジ画像が取り出せます。(それぞれPNG/JPEG方式) ジェネレーターもいいですが、こうして素材の形にしておいてもらえると、PhotoShopなどで柔軟にカスタマイズできて良いですね。 関連エントリ Web2.0風バッジをWEB上で作れる「Web 2.0 Badges」
PhotoShopでMacOS、Leopard風ロゴを作るチュートリアル:phpspot開発日誌
Create A Leopard ‘X’ in Photoshop Take a dark photo will very little color so you can see the X in proper lighting. PhotoShopでMacOS、Leopard風ロゴを作るチュートリアル。 PhotoShopで次のようなLeopard風の画像を作れます。 元画像は次のような、プレーンなXが描かれているものです。 チュートリアルでは「Myriad Pro Bold」というフォントを使用 「P」という文字で試してみたところ、それっぽいものが出来ました。 Leopard の凄くリアルな立体感を再現してみたいという方は是非こなしてみましょう。 関連エントリ 煙風エフェクトをカッコよく作るPhotoShopチュートリアル WordPressのロゴを美しく輝かせるPhotoShopチュ
ロイヤリティフリーで使える高品質アイコン集「Danish Royalty Free Icons」:phpspot開発日誌
ロイヤリティフリーで使える高品質アイコン集「Danish Royalty Free Icons」 2007年11月19日- Home I did some 32x32 px toolbar icons. I decided to release these free for developers and private individuals alike. SO use them in your apps, in your toolbar, on your website. ロイヤリティフリーで使える高品質アイコン集「Danish Royalty Free Icons」 次のような32x32のMacOSで使われているようなカッコいいアイコン集がロイヤリティフリーで使えます。 ICO, PNG, TIFF 等の形式で配布されています。 サイトに使えば、サイト全体が映えそうですね。Macなサイ
ページ送り部分のデザイン研究:phpspot開発日誌
Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine ページ送り部分のデザイン研究。 SmashingMagazine にて様々なサイトのページ送り部分を色々とまとめたエントリが公開されました。 なるほど、ページ送りといえど様々なデザイン方法があるようで、勉強になります。 色々なサンプルを見るうちに、自分のサイトのページャーはどんなのが合うか？といったことも分かってきそうです。 PHPでページャーを作る場合は、「PEAR :: Package :: Pager」を使えば簡単に作れます。
線を組み合わせてリボン状に加工し、美しい画像を作成するPhotoShopチュートリアル:phpspot開発日誌
線を組み合わせてリボン状に加工し、美しい画像を作成するPhotoShopチュートリアル 2007年11月21日- CornOnCob : SwooshyLines Tutorial In this tutorial, I will show you how to make an abstract ribbon-like effect using only Adobe Photoshop 線を組み合わせてリボン状に加工し、美しい画像を作成するPhotoShopチュートリアル。 次のような美しい画像を作成するチュートリアルです。 PhotoSohpであれば、素材を使わずとも、こういった美しい画像が作れます。 応用することで、オリジナルの美しい画像が幾通りも作れそう 関連エントリ PhotoShopでMacOS、Leopard風ロゴを作るチュートリアル 煙風エフェクトをカッコよく作るPhotoS
Photoshopで幻想的なファイナルファンタジー風のロゴ作成チュートリアル:phpspot開発日誌
PSDTuts - Photoshop Tutorials and Links - A Slick Supernatural Text Effect In this tutorial we'll be creating a smokey night effect on text to give it an eerie supernatural sort of feel. Photoshopで幻想的なファイナルファンタジー風のロゴ作成チュートリアル。 次のようなロゴを素材を使わずに1から作成していくPhotoShopチュートリアルが公開されています。 フィルタのみで星空を作ったり、波形フィルタを何度もかけて煙のようにしていくテクニックは色んな場面で使えそう。 チュートリアルを辿って次のような画像を作成してみました。 チュートリアルをこなすことで様々なテクニックを身に付けられるので一度こなして
超クールなブログデザイン11集30:phpspot開発日誌
30 More Excellent Blog Designs | Design Showcase | Smashing Magazine It’s not hard to design a weblog, but it’s getting harder when you try to achieve a unique weblog design. 超クールなブログデザイン集30。 SmashingMagazine にてクールなブログ特集が公開されました。 いくつか気になったものをブックマーク。 Webデザイナーのためのリンク集 個性的かつ印象的なブログを作る際の参考にできそうです。 関連エントリ プロレベルのWEBデザインをオンラインで簡単生成「doTemplate」
WEBデザイナーのための超便利リンク集:phpspot開発日誌
For Webdesigners - 332 helpful links for webdesigners WEBデザイナーのための超便利リンク集。 Ajax、カラー、CSS、Flash、フォント、無料写真、ジェネレーター、素材、アイコン、インスピレーション、PhotoShopチュートリアル、xhtml に関するサイトが332もまとまっています。 どのカテゴリも厳選されていて、WEBデザイナーの方には便利なものになっています。 フォントや写真、アイコンなどの素材を探す場合にはここから探してもよさそう。 関連エントリ 超クールなブログデザイン集30 プロレベルのWEBデザインをオンラインで簡単生成「doTemplate」 ページ送り部分のデザイン研究
CSSのみでクールな階層メニュー作成サンプル:phpspot開発日誌
Stu Nicholls | CSSplay | Cross browser flyout menu examples using only css CSSのみでクールな階層メニュー作成サンプル。 次のようなカッコいい階層メニューのサンプルが公開されています。 クールなのでそのままサイトに組み込んで流用できそう。 IE5.5 , IE6, IE7, Firefox, Opera 等で動作。 関連エントリ CSSでちょっと変わっているピル風の形をしたナビゲーションを作成 セクシーに動作するスライドメニューバー実装JSライブラリ クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」 CSSのクールなメニューをオンラインで簡単生成「CSS Menu Generator」
56のクールなPhotoShop用レイヤースタイル集:phpspot開発日誌
Spice up your design with 56 Photoshop layer styles | Jayhan Loves Design & Japan I had been working with Photoshop for more than a year and through out this year, I designed works by using this great tool, really can’t live without it. 56のクールなPhotoShop用レイヤースタイル集。 次のようなレイヤースタイル集が配布されています。 インストールは簡単で、ダウンロードして解凍後のファイルをダブルクリックするだけ。 次のような効果を簡単に与えられます。 関連エントリ １クリックでクールなWeb2.0/Apple風ボタンを作れるPhotoShopレイヤー
SafariのCSSリファレンス「Safari CSS Reference」:phpspot開発日誌
Safari CSS Reference: Introduction to Safari CSS Reference All Safari web browsers use the Web Kit engine to display web pages. The Web Kit is an open source framework in Mac OS X that lets developers embed web browser functionality into applications. SafariのCSSリファレンス「Safari CSS Reference」。 「Supported CSS Properties」にてSafariのCSSのサポート状況について知ることが可能です。 apple の本家サイトによるドキュメントなので、SafariのCSSについて調べたい場合は便利
つやつやしたベクター形式のボタン素材７７:phpspot開発日誌
liquidicity 77 Vector Buttons hot off the press. Can’t be bothered with making buttons? Want some new ones to add to your collection? Need a little inspiration? つやつやしたベクター形式のボタン素材７７。 次のようなボタン素材がベクター形式でダウンロード可能。ベクターなので拡大縮小してもクオリティが変わりません。 Adobeイラストレーター形式でダウンロード可能です。 比較的大きいサイズのＪＰＥＧ形式でも配布されているので、こちらはイラストレーターがなくても使えます。
CSSでお店のメニュー風なページを作成:phpspot開発日誌
CSS - A Recipe for Success If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean. CSSでお店のメニュー風なページを作成。 CSSで次のような、お店のメニューとプライスを書いたようなページを作成するチュートリアルです。 実際のデモページはこちら マークアップも次のように美しく作れます。 <ul> <li> <p><em>Lorem
CSSで出来たシンプルに使える丸っこいデザインのボタンサンプル集:phpspot開発日誌
Dynamic Drive CSS Library- CSS Oval buttons These buttons use the sliding doors technique of CSS, plus two sliced background images with "on" and "off" states, to create flexible oval shaped CSS buttons, similar to CSS Square Buttons. CSSで出来たシンプルに使える丸っこいデザインのボタンサンプル集。 次のようなボタンのＣＳＳとＨＴＭＬが公開されています。 マウスオーバーでホバーします。 マークアップは次のように、div と a , span タグを併用 <div class="buttonwrapper"> <a class="ovalbutton" hre
訂正：ハイクオリティなベクターアイコン90:phpspot開発日誌
Web Design Blog 90 Free Vector Icons Set Amazing set of 90 free vector icons, all in one EPS file. 訂正：フリーハイクオリティなベクターアイコン90。 (フリーではなく、オリジナルの配布元はシェアウェアでした) 次のようなアイコンが入手できます。 配布形式はＥＰＳとなっていてイラストレータ等で開けるようです。 追記）紹介したサイトでフリーで配布されているようですが、実際にはYellow Iconにて配布されているシェアウェア（３４９ＵＳＤ）でした。配布しているサイトへのリンクは削除しました。 関連エントリ つやつやしたベクター形式のボタン素材７７ オンラインでマルチサイズのアイコンを簡単に作れる「Genfavicon」 ロイヤリティフリーで使える高品質アイコン集「Danish Royalty
テキストを自由な位置で折り返せる「CSS Text Wrapper」:phpspot開発日誌
CSS Text Wrapper The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle.テキストを自由な位置で折り返せる「CSS Text Wrapper」。 テキストを円形等、好きな形の範囲内に収める仕組みが考案されたようです。 次のように、円形の中にテキストを並べる等、まさに自由自在です。 昔はこういった形でのテキストは空白を挟んだりして実現は難しいと思っていましたが、実現できるんですね。 デザイン系のサイトなんかで活用できそうな仕組みです。 こんな仕組みがあるとは知らない人に見せたらアッと驚くこと間違いないでしょう。 ちょっとしたサプライズを与えたい場合に使えますね。
物凄く美しいオーブのアイコンセット:phpspot開発日誌
Mystic Orb Icon Packet by ~basstar on deviantART 物凄く美しいオーブのアイコンセット。 次のような美しいアイコンがPNG、ICO形式でダウンロード可能。 256, 128, 64, 32 .ico and .png 256, 128, 64, 32 .ico and .png 素材として使うのもいいし、ディテールを見れば、物体の輝かせ方についての研究が出来たりします。 これは素晴らしいですね。
バナー画像の3倍の効果をあげたテキストリンク（powered by beBit） | SiMPLE*SiMPLE
バナー画像の3倍の効果をあげたテキストリンク（powered by beBit） November 6, 2007 3:41 PM written by Gen Taguchi ※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。 今回ご紹介するのはレシピサイト、Cookpad.comの事例です。Cookpad.comでは有料会員（月額300円）があるのですが、その会員数が伸び悩んでいました。 そこでbeBit社に相談するのですが、それまではかわいいバナーをどーんとサイドバーに貼っていました。 ↑ なかなかかわいらしいバナーです。凝っていますよね。 しかしユーザビリティ調査をしてみると、そのバナー広告がほとんど見られていないことがわかりました。最近は「広告＝邪魔なもの」というイメージがありますよね。 そこでbeBit社ではこのバナーのかわりに次のテキスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
凄く美しいVistaパッケージ風の各種OSアイコン81集:phpspot開発日誌
ハイクオリティな和風アイコン集「Yoritsuki」:phpspot開発日誌
可愛いMac風のフォルダアイコン集:phpspot開発日誌
秀逸イラストレーターチュートリアル65:phpspot開発日誌
フリーのPhotoshopプラグインいろいろ:phpspot開発日誌
オープンソースのEコマースソフトいろいろ - DesignWalker
http://www.designwalker.com/2007/11/site-layout.html
Connection Problem
Connection Problem
【2ch】ニュー速クオリティ:平野綾がデコビッチ卒業