大量の汎用SVGアイコンがダウンロードできる「Zondicons」:phpspot開発日誌Zondicons 大量の汎用SVGアイコンがダウンロードできる「Zondicons」 一般的に使えそうな汎用アイコンが収録されていて順次アップデートもされていそうです。 関連エントリ クリックで広がるアイコン型メニュー実装「jquery-dice-menu」
checkboxをBootstrapのGlyphアイコンで可愛くできる「bs-checkbox」:phpspot開発日誌
GitHub - ktasos/bs-checkbox: A simple jQuery plugin that replaces the default checkbox and uses Bootstrap glyphicon icons. checkboxをBootstrapのGlyphアイコンで可愛くできる「bs-checkbox」 BootstrapのGlyphアイコンをベースに次のようなcheckboxを実装できます。 色を文字色に合わせられたりするので、よりフラットなデザインのページにもマッチしそうですね 関連エントリ Bootstrapのテーブルをソート可能にする「Bootstrap Sortable Tables」 Bootstrapのナビゲーションバーをお好みにカスタマイズできる「Bootsnav」 Bootstrapなサイトで階層的なツリービューを作成できるUIライブ
Bootstrapのモーダルダイアログを通知風にページサイドからスライド表示させる「notiModal」:phpspot開発日誌
GitHub - netfox01/notiModal: a jquery plugin to make a bootstrap notification modal Bootstrapのモーダルダイアログを通知風にページサイドからスライド表示させる「notiModal」 次のようにダイアログをページの右側からアニメーションしつつ表示できます。通知等でユーザの邪魔をしない感じのダイアログ表示として使えそうです 関連エントリ Bootstrapのテーブルをソート可能にする「Bootstrap Sortable Tables」 BootstrapでiOSアプリ風UIを作るBootstrapテーマ「Bootstrap iOS7」 Bootstrapでたて型のタブを実装できる「Bootstrap Vertical Tabs」 Bootstrapなサイトで階層的なツリービューを作成できるUIライブラ
Bootstrapのナビゲーションバーをお好みにカスタマイズできる「Bootsnav」:phpspot開発日誌
Bootsnav - Bootstrap menu multi purpose header Bootstrapのナビゲーションバーをお好みにカスタマイズできる「Bootsnav」 デフォルトのツールバーはCSSなどで結構いじくらないと制約があったりしますが、Bootsnavであれば豊富なサンプルから使いたいnavbarが見つかりそうです。 メニューを大きめのメガメニューにしたり、ハンバーガーメニューでフルスクリーン風にしたり、スクロール固定したり、よく使われるパターンが網羅的にサンプルかされていて、非デザイナーの方も苦労なく目的のナビを実現できそうです。 関連エントリ Bootstrapのテーブルをソート可能にする「Bootstrap Sortable Tables」 Bootstrapなサイトで階層的なツリービューを作成できるUIライブラリ「bootstrap-treeview」 Bo
Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hoverify Bootnav」:phpspot開発日誌
Hoverify Bootnav 1.0.0 Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hoverify Bootnav」 ナビゲーションメニューに様々なアニメーションを付けることが出来ます。 関連エントリ 画面サイズ目一杯使えるレスポンシブなナビゲーションメニュー実装「okayNav」 ナビゲーションとコンテンツが同期して分かりやすいナビ実装「NavSync」 レスポンシブで階層的なスライダーナビゲーション実装jQueryプラグイン「yohoho.slyder」 ページサイドにセクションのナビゲーションを自動生成する「Section Scroll」 CSS、jQueryでレスポンシブな高品質サイドバーナビゲーションを作成するデモ
inputフォーカス時にフォーカスをクールにアニメーションさせる２４サンプル:phpspot開発日誌
Awesome input focus effects - Usingcss3 inputフォーカス時にフォーカスをクールにアニメーションさせる２４サンプル input要素にフォーカスをうつした際にボーダーや背景、ラベルなどをカッコよく、派手すぎない感じにアニメーションさせるサンプル集です。 関連エントリ input[type=file]をいい感じにスタイリングするチュートリアル 入力文字に応じて自動伸縮するinput[type=text]を実装できるjQueryプラグイン「autoGrowInput」 カッコ悪いinput[type=file]をモダンにしてドラッグ＆ドロップ対応にする「Dropify」
高品質なMaterialデザインのBootstrapテーマ「Material Kit」:phpspot開発日誌
タッチ端末でも使いやすそうなjQueryカラーピッカー「jquery-palette-color-pi... 次の記事 ≫：時間をユニークな方法で指定するUI実装jQueryプラグイン「timedropper」
Rebound.jsとCanvasを使った超カッコイイローディングアニメーション実装デモ:phpspot開発日誌
Spring Loaders with Rebound and Canvas | Codrops Rebound.jsとCanvasを使った超カッコイイローディングアニメーション実装デモ Facebook製のアニメーションライブラリRebound.jsを使った、これまで見たことのないようなローディングを実装するデモです 関連エントリ ピュアCSSでシャキシャキ動くローディングアニメーション集「Loaders.css」 CSSで14種のローディングアニメーションが実現できる「waitMe」 モダンなローディングエフェクトを作成できる「PleaseWait」 SVGでクールにアニメーションするローディングボタン実装「Loading Buttons」
プログラマ向けのCSSスタイリングJSライブラリ「Descartes」:phpspot開発日誌
Descartes プログラマ向けのCSSスタイリングJSライブラリ「Descartes」 CSSは様々なスタイリングが可能ですが、JSONベースでスタイリングを書くことで関数を絡めてCSS単体よりもより複雑なことができるようにしてみた実験的ライブラリ。 JSを絡めることで更に自由度が高いスタイリングが実現できるみたいです。 JSを別途書くよりも、スタイリング用のファイルとしてCSSと混合しつつ独立させられそうです。 関連エントリ CSSを使った3Dアニメーションライブラリ「voxel.css」 CSSオンリーで動作するタイムラインUI「timelined」 次世代のCSSホバーエフェクト全部のせ「iHover」
枠のサイズに応じてテキストサイズを自動調整してくれるjQueryプラグイン「TextFill」:phpspot開発日誌
TextFill 枠のサイズに応じてテキストサイズを自動調整してくれるjQueryプラグイン「TextFill」 文字数がおおくなってしまっても自動で文字サイズを小さくして枠内に収まるようにしてくれます。 次のように、文字を収めてくれます。動的なコンテンツにおいても便利に使えそうです 関連エントリ 文字がパラパラめくれるヒンジパネル風のテキストエフェクト実装「FLAPPER」 枠のサイズに応じてテキストを自動省略できる「Jquery-quickfit」 テキストのグラデーションを表現するReactコンポーネント「React Text Gradient」 Flashレスでクリップボードにテキストをコピーできるようにする「clipboard.js」 テキストに背景画像を設定してクールなテキストを表示できる「TextHoler.js」
モバイルアプリ風のUIを提供するBootstrapベースのフレームワーク「Mobility」:phpspot開発日誌
GitHub - cblanquera/mobility: Mobility is a super light weight HTML, CSS, and JS framework built on top of Bootstrap for developing mobile applications. モバイルアプリ風のUIを提供するBootstrapベースのフレームワーク「Mobility」 次のように、タブバーやスライドメニュー、リスト等、iOSアプリ風のUIをWEB上で実現できます。 アプリっぽいモバイルサイト作成時の選択肢として覚えておいてもよさそう 関連エントリ Bootstrapのテーブルをソート可能にする「Bootstrap Sortable Tables」 Bootstrapのパラメータ入力スライダー実装「bootstrap-slider」 Bootstrapなフォームで
mo.jsを使って、いいね！アイコンをクールにアニメーションさせるデモ:phpspot開発日誌
Icon Animations Powered by mo.js | Codrops mo.jsを使って、いいね！アイコンをクールにアニメーションさせるデモ。 いいね、以外のアイコンも様々にアニメーションする様が実装されています アプリ化の流れで、WEBでもこういったアニメーションはより重要になっていきそうです 関連エントリ オシャレなアニメーションで動作するスライドショー「Elastic Circle Slideshow」 SVGでクールにアニメーションするローディングボタン実装「Loading Buttons」 画像をボケた状態から鮮明にするアニメーション「Blurry-image-load」 CSSを使った3Dアニメーションライブラリ「voxel.css」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapなサイトでツリービューを実装できる「easy-tree」:phpspot開発日誌
フラットデザインが良い感じの日付ピッカー「flatpickr」:phpspot開発日誌
時間をユニークな方法で指定するUI実装jQueryプラグイン「timedropper」:phpspot開発日誌
IllustratorとSketch対応のiOS 9.3のUI Kit:phpspot開発日誌
フォームの送信をAjax化できるjQueryプラグイン「Submitter」:phpspot開発日誌
豊富な色が選べるBootstrapカラーピッカー「jquery.colorbrewer」:phpspot開発日誌
チャット等のUI実装に活用できそうなUIキットPSD、Sketchテンプレ「Free Chat UI kit」:phpspot開発日誌
JS＆CSS3でWindowsMetroのタイルUIを実装する「TileJS」:phpspot開発日誌