スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries - かちびと.net
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
150 best jQuery effects for web designers and developers « Web Design Blog – WebDesignShock
Since the arrival of the jQuery library, the life of JavaScript programmers have gotten a lot easier because now it’s simpler to develop web 2.0 applications. With jQuery, the programmers can keep their code organized and concise, which is the major slogan of the library, “write less, do more”. You can utilize jQuery to handle events, generate animations, and even add an Ajax support into your web
[JS]透過処理をした写真画像の転送量を軽くする方法
通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。 デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。 ;(function() { var create_alpha_jpeg = function(img) { var alpha_path = img.getAttribute('data-alpha-src') if(!alpha_path) return // Hide the original un-alpha'd img.style.visiblity = 'hidden' // Preload the un-alpha'd image var image = document.cre
「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」:phpspot開発日誌
Quovolver | a simple jQuery plugin for revolving quotes 「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」。 「これは素晴らしい！革命的である」- by. phpspot みたいなものをアニメーションしながら次々表示できるjQueryプラグインです。 商品の説明ページなんかに利用者や著名人の声などとして表示する際に使えそうです。 アニメーションしながら切り替わります。 使い方は、必要なJSを読み込んだ後、要素を複数並べておきます。 例えば次のように。 <blockquote>aaa</blockquote> <blockquote>bbb</blockquote> あとは、$('blockquote').quovolver() のようにするだけです。 関連エントリ 通貨、日付のグローバリゼーションを可能にする
CSS-EBLOG - (X)HTML+CSS/JavaScript Tips site.
デザインを体感して学べるデザインブログです。Illustrator（イラレ）やPhotoshop（フォトショ）の使い方やWordPressやSWELLのCSSやJavaScriptカスタマイズやアフィリエイトまで読むだけで楽しめる情報を発信しています。
デザイナー・デベロッパーのためのjQueryプラグイン30 – creamu
jQueryを使ってクールなインターフェースを実装したい。 そんなときにおすすめなのが、「30 Useful Jquery Plugins For Developer & Designer」。デザイナー・デベロッパーのためのjQueryプラグイン集です。 結構いい感じのものが揃っています。 YoxView – jQuery image viewer plugin 動きの軽快なlightbox系プラグイン Exposure Jquery Plugin かっこいい見せ方ができる画像ビューア jQuery Constant Footer フッタをブラウザ下部に固定配置するためのスクリプト。RSSを読み込んだりもできる ezMark jQuery Plugin チェックボックス、ラジオボタンをかわいいデザインに 変更できるプラグイン Cloud Zoom これはすごい気がする。画像の一部を拡大して
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」:phpspot開発日誌
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」 2010年07月26日- Sudo Slider jQuery Plugin Demo#1 画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」。 簡単な定義でなんでもスライダーとして動作させちゃうことが出来ます。 <div>の中に<ul>リストで<li>内にコンテンツを並べるだけであとは順次スライドしてくれるようです。 あとはAjaxによるコンテンツ読み込みにも対応してるみたい 以下にサンプルをご紹介。 シンプルな画像スライダー ページ送りを追加した例 ページ送りは番号だけじゃなくて特定文字列の定義も可能 タブっぽいUIにすることも可能。コンテンツの高さは自動でアニメーションしながら調節されるようにしたりもできる 他にも色々
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
iPhone向けWebサイトを作るのに最適なテンプレート&JavaScript·moobile MOONGIFT
moobileはHTML/JavaScript製のフリーウェア（ソースコードは公開されている）。iPhone/Androidを中心とするスマートフォンのシェア拡大は留まることを知らない。モバイルネットワークが発展している限り、この流れは止まることはないだろう。Webサイトを提供する上でもスマートフォンは欠かせない存在になる。 ボタンバー ネイティブアプリを提供する手もあるが、もっと容易なのが最適化されたWebサイトを提供することだ。そもそもネイティブアプリを提供するほどのニーズがないサービスもあるはずだ。そこで使えるのがmoobileになる。 moobileはiPhoneやAndroidといったWebKitベースに対応したWebサイトフレームワークだ。HTML5で作成されているのが特徴だ。フォームやボタン、ボタンバーなどのUIをテンプレート化している。これを使えば最適化されたWebサイトが
アニメーションの残像が残るjQueryアニメーションチュートリアル:phpspot開発日誌
Shadow Motion Effect in 5 Lines Of jQuery | AEXT.NET MAGAZINE アニメーションの残像が残るjQueryアニメーションチュートリアルが公開されてます。 次のようにアニメーションした後の残像が残ります。CSS3の機能なども盛り込みつつ実装されてるみたいです。 サンプルは簡単な円のアニメーションを使いながらコードの説明があります。 Flashに比べるとパフォーマンスはそこまで出てない気はするのですが、なかなか面白いですね。 関連エントリ キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム クールにアニメーションする色合い様々なjQueryメニューサンプル色々
アイコンがふわっと拡大するjQuery – creamu
マウスオーバー時に気持ちのいい効果をつけたい。 そんなときにおすすめなのが、『BubbleUP』。アイコンがふわっと拡大するjQueryです。 アイコンにマウスオーバーすると、ふわっとサイズが大きくなりますね。動きが滑らかで気持ちいいです。 デモは以下から。 jQuery Menu Plugin: BubbleUP 実装方法も詳しく解説されているので、ぜひ見てみてください。 Learning jQuery: Your First jQuery Plugin, “BubbleUP” ブログ遅くなりました。。昨日は書けなかった。すんまへんm(_ _)m 急いで作業しているところでOSが起動しなくなり、ここ数年で一番大変な日を過ごしました。。。 セキュリティーについて深く考えさせられたので、心機一転してがんばります。
PHP・CSS・jQueryを使った横向きのタイムライン実装例:phpspot開発日誌
Advanced Event Timeline With PHP, CSS & jQuery ? Tutorialzine PHP・CSS・jQueryを使った横向きのタイムライン実装の例とチュートリアル、サンプルプログラムが公開されています 次のような、横にスクロールするイベント表みたいなものが作れます。ツールなどに組み込む場合に参考にできるかもしれません。 デザインもカッコよくてスクロールバーの細かな部分も綺麗に実装されています。 関連エントリ 1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」 JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル
クールにアニメーションする色合い様々なjQueryメニューサンプル色々:phpspot開発日誌
jQuery Menu Style 01 (Black) クールにアニメーションする色合い様々なjQueryメニューサンプルが色々と公開されているサイトのご紹介です。 種類が３種類ほどで６種類のカラーの中から選んで好きなものをダウンロードすることができるようです。 個人的には以下のデザインがシンプルでクールだと思いました。 カラーバリエーションは以下のように色々あります。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 jQueryでフリップするカッコいいメニュー作成のチュートリアル jQueryで幅の大きなドロップダウンメニュー作成チュートリアル
[CSS]ハック無しで、不透明なパネルをドロップダウンするナビゲーション
IEをはじめとするクロスブラウザ対応の不透明なスタイルを適用したドロップダウン型のナビゲーションをCSSplayから紹介します。 IE6でのキャプチャ ナビゲーションはJavaScriptやtableは使用しておらず、スタイルシートもハックや条件付きコメントは使用していません。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(Win), Chromeとのことです。 また、同様に垂直型のナビゲーションも公開されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptは盗んで学べ！ 知識0のデザイナーでもできるjsdo.itの遊び方
【ネタ帳】すべてのデザイナーはGetしておくべきハイクオリティなフォント50種類 25記事*二十歳街道まっしぐら
画像にぼかし効果を与えられるjQueryプラグイン「Image Blur」:phpspot開発日誌
動きがかわいいcss3+jQueryのコンテンツスライダー・Pretty Simple Content Slider - かちびと.net
moto-mono.net
stefanoverna.com