ソシオメディアが独自に提供するUIデザインパターン集。これを使えばUI設計を効率化できます。
![ソシオメディア | UIデザインパターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/49d830fc020446de280bd686d17ce59a737032af/height=288;version=1;width=512/https%3A%2F%2Fwww.sociomedia.co.jp%2Fassets%2Fimages%2Fsociomedia-logo-ogp-512.png)
そのままですが、Mashableで「Forget Photoshop: 15 Online Graphics Generators」が紹介されていました。 これはメモしておかねば。 Buttonator ボタンがいろいろ作れます。設定がいろいろあって良いですね。 RoundedCornr: Rounded Corner and Gradient Generator いわゆる角丸パーツを作れます。 Web 2.0 free buttons maker! 2.0っぽいボタンが作れます。 glassy buttons こちらもボタンジェネレータ。 Ajaxload – Ajax loading gif generator Ajaxのローディング中のパーツが作れます。 Web2.0 Logo Creator by Alex P Logo Maker : Web 2.0 Stylr 2.0っぽいロゴ
DHTML Site - 10 Free CSS and Javascript Calendars Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. フリーのCSS&JavaScriptカレンダースクリプトいろいろ 多くのウェブアプリに必要になってくるのがこのカレンダー機能なんですが、フリーで高機能なものが沢山出回っています。 ドラッグ&ドロップなどでGoogleカレンダーライクなものまで色々とあるようです。 Monket Calendar Quick Calendar Using AJAX and PHP Integrating Googl
Corner.js Corner.js 1.0 allows you to add corners to images on your webpages. It uses unobtrusive javascript to keep your code clean. class属性指定で簡単に画像エフェクトをかけられる「Corner.js」。 classに courner や ishadow40 , inverse などの値を指定&組み合わせすることで次のように画像に簡単にエフェクトをかけられます。 javascriptファイルを読み込んで置くだけであとは class 名指定をするだけで画像にエフェクトをかけられるということでなかなか便利ですね。 ただし、IEでは使えないようなので注意が必要です。 関連エントリ 注目!Flashを応用してHTML&CSSだけでは通常作れない画像効果を得る「
これは素敵な資料です。 ウェブ上の小粋なインターフェースがFlickr上で集められています。「カレンダー」、「ログイン画面」、「友達を追加」などなど、かなり使える事例が満載です。 「ここのインターフェースはどうしようかな・・・」というときに参考にされてみてはいかがでしょうか。 どういったインターフェースが掲載されているか、以下にいくつか見ていきましょう。 ↑ 「友達を追加」のインターフェース。SNS的要素には必要ですね。 ↑ カレンダーのインターフェースいろいろ。参考になりますね。 ↑ フッターのインターフェース。ユーザーアクションを促すには大事です。 ↑ アップロード系のインターフェース。CGMには必須ですね。 他にも「404ページ」や「タグクラウド」などがありますね。全部で18種類あります。 ご覧になりたい方は以下よりどうそ。 » Collection: Design Patterns
ちょこっとした作業をするときにウェブ上のツールは便利ですよね。今回はそうしたウェブ上のツールでも変換系をまとめて紹介している記事をご紹介。 ファイル形式の変換や、Favicon、カラーコードの変換ツールなどなど。知っていると便利ですね。 全部で39個あります。以下よりどうぞ。 ■ 高機能変換ツール Media-Convert とにかく機能が豊富なコンバーター。これ一つ覚えておけばいいぐらいです。テキスト、PDF、CSV、パワーポイント、音声、画像など。 txt2tags インデントなどで構造的に書かれたテキストをHTMLやLaTeXに変換してくれるツール。 Zamzar こちらも万能系。文書、画像、音声、ビデオなどについてさまざまなファイル形式の変換をサポートしています。 ■ 開発系変換ツール HTML Converter HTMLをPHP、Javascript、ASPに変換してくれます。
Free Fonts of the Month: Geo Sans, OT Versa, Diavlo | Smashing Magazine We continue to collect most beautiful high quality freefonts, which can be used for both private and professional projects without any restrictions whatsoever. フリーで汎用に使えるフォントがいろいろと紹介されてました。 特に使えそうで気にいったものを紹介。 Geo Sans Light Diavlo Tuffy Greyscale Basic 続きを見る サイトのロゴなんかで使うとシンプルだけど栄えるロゴが作れそう。 関連エントリ 超クールなフリーフォント5種 知っておくべき5つの英文フォン
JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Sucke... 次の記事 ≫:花火アニメーションをJavaScriptで実装「Fireworks.js」 Ajax Back Button Hack Ajaxなページで「戻るボタン」を機能させる方法。 Ajaxなページでは、ブラウザの「戻るボタン」を押すと、通常は、前に開いていたページに戻ってしまいます。 Ajaxでページを1,2,3と開いていって、2に戻りたいのに、前に開いていたページに戻るのは利用者としては不本意な動作です。 そこで、IFRAMEを使った、Ajaxでの「戻るボタン」実装ハック方法の紹介。 Ajaxで画面を切り替えた際に、IFRAMEのsrcも切り替えることで戻るボタンを動作させることが出来ます。 例えば、javascriptで次のようにIFRAMEのsrcを切り替えます。 <ifram
JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Suckerfish HoverLightbox Redux」 2007年02月21日- Suckerfish HoverLightbox Redux - Monday By Noon When the original Suckerfish HoverLightbox was published, I was honestly surprised at the amount of attention it received. JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Suckerfish HoverLightbox Redux」。 次のような写真の見せ方のサンプルファイル(html+JavaScript+CSS)がダウンロードできます。 ↓ マウスオーバーで画像レ
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメント部分やコメントフォームのデザインを色々集めたサイト。 いろんなブログのコメント部分やコメントフォーム部分の画像をコレクションしているようです。 コメント部分 コメントフォーム部分 これだけのデザインサンプルがあると、自分がデザインする時に大いに参考に出来そうですね。 形が決まったら後はオリジナリティを加えてデザインを完成させるという方法でデザインすれば効率よくカッコいいコメント部分が作れそうですね。 関連エントリ 2006年を彩った50の超美麗CSSデザインサイト集 ウェブデザインに便利なツールをまとめた「Web Design Tools」
Showing Hyperlink Cues with CSS (Ask the CSS Guy) I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari. CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与する方法が紹介されていました。 自動付与、というのは、例えば、<a href="***.pdf">pdfファイル</a> のようなリンクがあったとすると、pdfという最後
iMini Are the regular 16px icons taking too much space? Try the iMini pack, a set of ultra mini icons, which are suitable for blog, CMS, and ecommerce websites. ブログやCMSに最適なクールアイコン「iMini」。 次のようなクールなアイコンが175種類。 $30ドルのシェアウェアですが、約3600円で175種類を買えると考えると安いですね。 自分で作るとなるととても3600円では作れないことを考えるとお得です。 8x8ピクセルの82個のアイコンセットなら無料で使えるようです。 アイコンってほんっとにいいものですね。 関連エントリ フリーで使える超クールアイコン集「The Last Order Icons」 フリーのアイコン配布サイ
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
PXLGFX- Polished Text Make your text seem as if it is spankin' new, right out of the package. WEB2.0なロゴを作成するPhotoShopチュートリアル。 微妙な光沢や影を出すにはどうすればいいのか?なんかが解説されていていい感じです。 ↓最終的に出来上がる画像 PhotoShop使いの方は是非作ってみましょう。 関連エントリ 80種類のフリーのテンプレート配布とチュートリアルサイト「Zymic」 Firefoxアイコン作成チュートリアル PhotoShopでRSS標準アイコンを作成するチュートリアル
HTML_AJAX : ProgressMeter Documentation for the HTML_AJAX Powered file upload progress meter. PEARのHTML_AJAXを使ったリアルタイム進捗表示アップローダーのサンプル。 ソースはWeb上のSVNリポジトリから取得できます。 ファイルの何%が終わったか?という進捗状態を取得するためには、ここで配布されているPHPエクステンションをインストールし、 upload_progress_meter_get_info という独自の関数を使えるようにしなくてはいけません。 PHPエクステンションをインストールしない場合でも、進捗状態であることをアニメーションしつつアップロードするようなプログラムは作れるようです。 PHPにはアップロード中のファイルが何%UP完了したかを知る方法は標準では備わっていないよ
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what problems can be solved with pure CSS. CSSの小技集、20個。 どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。 角丸 画像なしの角丸 投票用スターの作成 テーブルなしのフォーム リストをCSSでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ 印刷とCSS RSSフィードにスタイルシートを指定 固定フッター 要素にHoverエフェクトを加える HRタグへのCSS FloatのClearに関するテクニック CSSでポップアップ小窓 ボックスの見出し(Box Punch)を表現 CSSボタン オレンジのRSSボタンをP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く