CSSans Pro - The Colourful, Sassy, CSS Font カラフルで楽しいCSSフォント「CSSans Pro」 パーツ別に自由に色を変えたりとCSSならではのフォントが実装されています。 関連エントリ クッキー風の英文フォント「AK Cookies」
Multi-Column-Select Demo selectを大きいボタンの複数カラム形式にできる「Multi-Column-Select」。 selectタグのUIを次のようなUIに変更してくれます。タッチデバイスでも使いやすそうで、マルチセレクトも可能。 submit時に通常のselectと同様に受け取れ、サーバサイドはそのまま使えるのもよさそう 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 フラットでカッコいいselectボックスを作成できるjQueryプラグイン「EasyDropDown」 リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flexselect」
flexselect: a jQuery plugin 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flexselect」 項目数が多いと探すのが大変。UI的に欠陥なのかもしれません。 ということでinputしてインクリメンタル検索だと便利ですね。選択肢に無いものを入れても空にされるので、動きはselectと同じです。 関連エントリ selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」 フラットでカッコいいselectボックスを作成できるjQueryプラグイン「EasyDropDown」 selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」 Bootstrapのse
implement a blur view of iOS7 style with css and jquery. oblurlay iOS7風の背景をボカしてオシャレにするエフェクト実装「oblurlay」。 iOSで、バックグラウンドをすりガラスですかして見たようなエフェクトがありますが、これをブラウザ上で実現するためのjQueryプラグインです。 背景に馴染む上になんかシャレオツ! 関連エントリ iOS7用インタフェース作成用のワイヤーフレーム「iOS 7 Wireframe Kit」 フリーのiOS7アイコン800個セット iOS7のワイヤーフレーム作成用illustratorキット「Awosomekit」 iOS7のUIが詰まったPSD「iOS7 GUI PSD」
Minimal Form Interface | Codrops 入力抵抗を少なくできるかも、なミニマムなフォームインタフェースの一例。 フォームにはたった1つのinputしか用意されておらず1個1個の質問に答えていけば完了するというUIの実装デモです。 デザインがフラットでいい感じにアニメーションする部分もトレンドにのっている感じでいいのですが、入力抵抗を少なくすることでコンバージョンが上がるかも、ということで登録フォーム等でのテストをしてみてもよいのかもしれません。 関連エントリ クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」 フォームでの洗練されたアイテムへのタグ付けUI実装jQueryプラグイン「taggingJS」 複数画面にわたるステップ別のカッコいいフォームを実装できる「Ideal Forms 3」
jQuery Color Picker Sliders 色の細かなカスタマイズが可能なスライド式カラーピッカー「jQuery Color Picker Sliders」 単にパレットから色を選ぶのではなく、各種パラメータを調整して色を作ることができるカラーピッカーです。 シンプルなカラーピッカーもいいですが、色に特にこだわりたい方はより細かな色の設定ができそうです。 関連エントリ 高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」
favico.js - Make a use of your favicon faviconにアニメーション付きのバッジをつけられる「favico.js」 faviconに通知等の件数を付与し、単に付与するだけではなく、アニメーションをつけられるJS。 タブがバックグラウンドにある時に、分かりやすいですね。 このライブラリを利用して簡単に実現できるので通知等があるサイトの場合は実装しておくとよいかもですね 関連エントリ faviconを円グラフにしてアニメーションできる「Piecon」
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
Flare jQuery Plugin | Run a Startup 光ながらアニメーションさせるエフェクト作成jQueryプラグイン「Flare」。 次のようにロゴやグラフィック上を光るアニメーション効果を付けることができます 若干まだショボさがありますが、応用することでもっとリッチなエフェクトをかけることができそうです。 関連エントリ CSSアニメーションでページを紙芝居の様に切り替えるデモ レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 Flashみたいに美しいCSSテキストアニメーションデモ ハードウェアアクセラレーションで高速なCSS3アニメーションを実現できるjQueryプラグイン「Minimit anima」 CSS3を使った多彩なアニメーション用ライブラリ「magic」 アニメーションスクロールをデフォルト化できるj
ZURB ? Interaction Design and Design Strategy 画像のdiffができるjQueryプラグイン「TwentyTwenty」。 画像の上にスライダーを付けて、ドラッグ&ドロップで移動できるようなUIが作れます。 激的ビフォアアフターなUIを作りたい場合に最適。 マークアップとJSコードは以下。超簡単。 関連エントリ Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」 サムネイルをクリックでその場で画像ズームできるjQueryプラグイン「Ion Zoom」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」 画像レイアウト関連で便利なjQueryプラグイン等まとめ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」
Munee: Standalone PHP 5.3 Asset Optimisation & Manipulation 画像やCSS/JSを動的に圧縮したり結合したりできるコンテンツ配信最適化ツール「Munee」 LESS, SCSS, CoffeeScriptのコンパイル、画像の圧縮・操作、CSS/JSを圧縮して1つのファイルにする、コンテンツのgzip化等、コンテンツ配信に便利なサーバインストール型のツールが公開されています。 サービスを作っているとよく使うコンテンツの最適化機能が入っていてなかなか便利そうです。 例えば、画像の縮小は以下のように指定して動的にリサイズをかけることが可能です。 <img src="/img/my-image.jpg?resize=w[200]h[300]e[true]s[true]"> JavaScriptもカンマ区切りで次のようにしてやればコンバインし
CSS Checkbox | Cross Browser CSS Checkbox Generator | Free Checkbox CSS 好みのチェックボックスのデザインが簡単に作れる「CSS Checkbox」。 豊富なピュアCSSでデザインされたチェックボックスを選んでダウンロードが可能です。 必要なものだけど選んで、HTMLとCSSをコピペで使えるようになっているみたいです。 クロスブラウザかつ、ピュアCSSということでとても使いやすそうです ちょっとオシャレなチェックボックスにしたい、という場合は参考にできそう 画像はこのサービスのサーバを直指定しているようなので、トラフィックの大きなサイトでは予め画像をダウンロードして使うとよいでしょう。 関連エントリ チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」
もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」 2013年07月22日- Readmore.js: jQuery plugin for long blocks of text もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」。 ブログ等でよくある、「ReadMore」。クリックすることで全文が見れるような物ですが、サーバサイドでやるとリロードが必要。 jQueryで$(element).readmore() ってやればすぐにテキストを短くしてくれるところが便利そうです。 クリック時のアニメーションなんかもできます。地味だけど便利ですね 関連エントリ selectをカッコよくしてくれるjQueryプラグイン「Minimalect」 タブ切り替え時のエフェクトがクールなタブUI実装jQueryプラグイン「Tabulous.js」 サ
FTPソフト終了のお知らせ:PHP/AjaxなブラウザベースのFTPツール「MonstaFTP」 2013年07月17日- Open Source PHP/Ajax Drag & Drop FTP Manager | Monsta FTP FTPソフト終了のお知らせ:PHP/AjaxなブラウザベースのFTPツール「MonstaFTP」。 FTPソフトをインストールしてFTP経由でサーバにアップロードをしている場合、このツールを使えば、もうFTPソフトなんて使わなくても、ブラウザだけで完結しちゃいそうです。 ブラウザがドラッグ&ドロップに対応したことによって、ファイルのアップロードは格段に簡単になりましたがその機能を活用してFTPソフトっぽくできています。 サーバにこのオープンソースソフトウェアをインストールしておく必要がありますが、インストールさえ終われば、どの環境からでもFTPソフトなし
Beyond grep: ack 2.04, a source code search tool for programmers grepをよく使うプログラマはどう考えても乗り換えるべき新しいgrepコマンド「ack」。 サーバに入ってコードを書いている人はかならず使うgrepですが、grepよりも高速に検索でき、git,svn等のソースコード以外のソースはgrepしないで検索できるツールらしいです。 Perlで書かれていて、Perlの強力な正規表現が使え、ハイライトしてくれます。ソースツリーの下で「ack 検索ワード」で検索するだけというシンプルさもいいです WEBサービスを書いているとhtmlやphp等色々なソースをいじりますが、ファイルの検索対象も選べるため、便利です。 ack --php <検索ワード> でphpのソースのみを対象とし、ack --nophp <検索ワード>でphp
The MobileESP Project: Easily detect mobile web site visitors About MobileESP スマホ等のモバイル判定が簡単に行えるライブラリ「MobileESP」 Android、iPhone、Blackberry等、大量のモバイルデバイスが存在しますが、そうした物の判定を行ってくれる各種言語用のライブラリ群です。 docomo, kddi, vodafoneなんていう記述もあったりしてガラケーも対応してるっぽいです。 対応言語は、PHP, Java, APS.NET (C#), Ruby ,さらにはJavaScript版もあるようです iPhone端末かどうかを調べるには次のようなコードを書きます。 $uagent_obj = new uagent_info(); if ($uagent_obj->isTierIphone =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く