フリーな1262種類のフラットアイコン「COSMO MINI」:phpspot開発日誌
Blog, Freebies | Icojam - sweetest free & premium royalty-free stock icons フリーな1262種類のフラットアイコン「COSMO MINI」 次のようなフラットアイコンが配布されていて、WEBの他、色々な場所で使えそうです 40x40サイズのPNG形式で配布されていて、ベクターではありませんが、十分使えそう。 関連エントリ フラットが美しすぎるアイコン24個セット 地図と共に使えそうな２００のフリーベクターアイコン集 シンプルで使えそうな５０のベクターアイコンセット 汎用で使えそうなフリーのアイコンフォント「Genericons」 ピクトグラムアイコンの検索に便利な「IconsDB」 iPhone用のアイコン３００個セット「ICON BEAST」 アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを
フラットが美しすぎるアイコン24個セット:phpspot開発日誌
Free PSD: 24 Flat Icons | Premium Pixels フラットが美しすぎるアイコン24個セット。PSD形式で配布されているそう。 iPhoneの時期OSがフラットになるとか、マイクロソフトやグーグルは既にフラットだとか、フラットの合理性に注目があつまっていたりしますが、フラットでもこれだけ美しくできるのだなと再確認させられるアイコンセット。 今後出てくるアイコンなんかもこうした美しいフラットアイコンだとWEBサイトやアプリも作りやすく、シンプルに美しくなるのかも。 関連エントリ シンプルで使えそうな５０のベクターアイコンセット アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル 地図と共に使えそうな２００のフリーベクターアイコン集 汎用で使えそうなフリーのアイコンフォント「Genericons」
文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」:phpspot開発日誌
Countable.js?live word-counting in JavaScript 文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」 文字数を数えるライブラリは沢山ありますが、段落や単語数までカウントしてくれるライブラリははじめてかも。 文字数、段落のカウントは日本語にも対応しています（単語数は非対応） 文書を書いてもらって送ってもらうような場合の入力補助ライブラリとして使えそうです 関連エントリ 美しくアニメーションさせられる線・棒グラフ描画JSライブラリ「xCharts」 jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」 シンプル多機能なW
自分でスタイリングして好きなアイコンを選んでセットでDLできる「Iconbench」:phpspot開発日誌
Style, hand pick & download icons of your choice. 自分でスタイリングして好きなアイコンを選んでセットでDLできる「Iconbench」。 アイコンセットといえば多数の画像ファイルから構成されるアイコンセットが殆どですが、今回は、まずアイコンのDropShadow等のデザインからはじまり、多数のアイコンセットからクリックでポチポチ選んでCSSスプライトでDLできるという優れものです。 アイコンスタイルをデザイン 見本アイコンからポチポチ選びます。 選んだものはショッピングカート風にどんどん追加されていきます Downloadボタンでジェネレート CSSスプライト出力も可能 これはとても便利ですね。 こういう感じのアイコン配布プラットフォームがあっても面白そう 関連エントリ WEBサイト制作に使えるベクターアイコンセットｘ２５ Windows8
WEBサイト制作に使えるベクターアイコンセットｘ２５:phpspot開発日誌
25 Free Vector Icons Pack For Web and Graphic Designers | Icons | Graphic Design Junction WEBサイト制作に使えるベクターアイコンセットｘ２５。 綺麗なアプリケーションアイコンを中心に手書き風のアイコン等がまとまっています。 これだけあればアイコンに困らないってぐらいありますが、作りたい物の印象に合うアイコンを選ぶ際に使えそう 関連エントリ ６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」 iOSのAppアイコン作成用PSDテンプレート 超気合の入ったiOSアプリケーションアイコン４０ RetinaディスプレイOKなアプリ用PSDアイコン350
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
ピュアCSSで実装するスクロール要素へのドロップシャドウ効果:phpspot開発日誌
Scrolling shadows ピュアCSSで実装するスクロール要素へのドロップシャドウ効果。 スクロール位置がトップにある状態だと下位置にシャドウが表示。 中間位置までスクロールすると上下に表示 フッタに移動すると下のみに表示 ピュアCSSでこれが実装できるみたいです。 :before, :after 内のbackgroundを使ってうまく実装されているみたいですね 関連エントリ ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」
FacebookスタイルのシンプルなドロップダウンをjQueryで実装するサンプル:phpspot開発日誌
Facebook Style CSS JQuery drop down menus Swadesh's Programming Blog FacebookスタイルのシンプルなドロップダウンをjQueryで実装するサンプル Facebookのインタフェースはやっぱり素晴らしいと思う今日この頃ですが、facebookのドロップダウンを実装する例が紹介されています。 どちらかっていうとCSSよりなんでしょうか。とりあえずサンプルをダウンロードしてそのまま使うこともできるのでそれっぽいものを実装したい場合には使えそうです シンプルだけど立体感がうまく出せていてアプリっぽいのがいいですよね。 今世界で一番伸びてるサービスのインタフェースを真似てみることはいいことかもしれませんね 関連エントリ Facebookのタイムラインを作る際に便利なPhotoshopテンプレート faviconを書き換えてfa
超シンプルなマークアップで実現できる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 プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった
カッコいい管理画面のHTMLテンプレート総まとめ:phpspot開発日誌
カッコいい管理画面のHTMLテンプレート総まとめ。 これまで紹介したエントリや、新しく発見したエントリで紹介されているものを全てマージしてみました。 有償のものも混じってますが、カッコいい管理画面を作りたいといった際にカタログ的に使ってみてもいいかも。 独断ですが、クオリティ順に並べ替えてます。 Simpla Admin Boxie Admin Complete Liquid Admin InAdmin Admin (FREE) Adminizio Lite – Admin Template Admin Templates - Professional XHTML Back-end Template Spring Time – Simple Admin Template Internet Dreams Admin Skin Visual Admin ThePixelDeveloper Ad
白黒だけど汎用的にシンプルデザインのWEBアイコン５００:phpspot開発日誌
500 web icons pack for web & graphic designers | Psdblast 白黒だけど汎用的にシンプルデザインのWEBアイコン５００。これはなかなか使えそうです。 次のようなアイコンが５００個セットになっています。WEBサイトだけでなく、アプリなんかにも使えそうですね。 PSD形式のベクターでダウンロード可能です。拡大してもいけるのはいいですね 関連エントリ 立体的にアイコン付きでいい感じにデザインされたボタン作成Photoshop素材＆チュートリアル 秀逸なiOSアプリケーションアイコンのサンプル色々 フラットなフリーの日本向けソーシャルアイコンセット
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」:phpspot開発日誌
FontSize | jQuery Plugins 指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」 特定のエレメントをクリックした際に、指定した要素のフォントサイズをUPさせることが可能。最大や最小のサイズも指定出来ます。 使い方は簡単で、必要なライブラリを読み込んだら次のように呼び出すだけです。 $(element).fontSizer({ action: "up", elements: "#content", max: 36 }); デモページはこちら コンテンツをどんどん大きくしていった例。maxを指定しておくと一定以上からサイズは大きくならなくなります。 エレメントを絞ることで、サイト全体のレイアウトが崩れることもありません。 ちょっとしたユーザビリティの向上に知っておいてもよさそうなプラグインですね。 関連エントリ コンピ
瞬時にタグクラウドが形成できる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
IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」:phpspot開発日誌
IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す
カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」:phpspot開発日誌
カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」 2010年10月28日- jQuery vScroll ? Simple animated vertical content scroller supporting varying heights HibboBlog カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」 通常、divなんかにサイズを指定して、overflow:auto とかにすると次のようにスクロールバーがでますよね。 ただ、このスクロールバーはブラウザ依存でちょっとデザインにあわなかったりしてカッコ悪いという場合があります。 デモページ そこでこのプラグインを使えば、スクロールバーを消してしまうことが可能。 消しちゃうとコンテンツ見れないじゃん、という心配は不要で、ボタンをクリック
写真にビンテージ感を出せるPhotoshopのアクション集:phpspot開発日誌
80 Photoshop Actions for Giving Your Pictures a Vintage Look | Web Design Ledger 写真にビンテージ感を出せるPhotoshopのアクション集が多数まとまったエントリのご紹介です。 いろいろと簡単に実施できるのでそれぞれやってみて一番よいものを、といった使い方なんかによさそうですね。 元の写真もいいんだと思いますがサンプルはかなりよい感じになってますね。 関連エントリ 肌をツルツルに綺麗にしてくれるPhotoshopアクションが凄い 写真を一瞬でクールに出来るPhotoshopアクションが色々 １クリックで写真の印象を簡単に変えてしまうPhotoshopアクション集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリーのiOS7アイコン800個セット:phpspot開発日誌
WEBページに使えそうなアイコンっぽい図形フォント:phpspot開発日誌
小さくで可愛いグラフが描けるjQueryプラグイン「Piety」:phpspot開発日誌