タグ

jQueryとcssに関するgigi-netのブックマーク (11)

  • jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com

    個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。(ちょっとだけどね。) えらい! jQuery Blog » jQuery 1.8 Released jQuery Blog » jQuery 1.8 Beta 1: See What’s Coming (and Going!) jQuery Blog » The New Sizzle jQuery Blog » jQuery Core: Version 1.9 and Beyond jQuery Blog » jQuery 1.9 and 2.0 — TL;

    jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com
    gigi-net
    gigi-net 2012/08/14
    プレフィックス自動付加はどうなんだろ。最近のMozillaでは非推奨になったしなぁ……
  • Wookmark

    高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま

  • Draggable Image Boxes Grid | Codrops

    Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area. Today we want to create a template with a fullscreen grid of images and content areas. The idea i

    Draggable Image Boxes Grid | Codrops
  • Site Under Maintenance

    We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

    Site Under Maintenance
  • Javascriptのパフォーマンスをあげるポイント | Branberyheag Lab

    30 best practices to boost your web application performance – Web User Interface Architect JavaScriptコーディング等を 書く上でのパフォーマンス確認事項30。 自分へのインプット&メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない(使った事ないですが) for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+=’AAA’;aaa+=’BBB’; の方が aaa=’AAA’+'BBB’;より速い 複数の文字列連結には、Array で文字

  • 技術サイト等で使えそうなページ内に設置する「ソースを見る」ボタンの実装例:phpspot開発日誌

    Make a ‘View Source’ Button | CSS-Tricks 技術サイト等で使えそうなページ内に設置する「ソースを見る」ボタンの実装例。 なんらかのライブラリを配布する際やコードの動作を紹介するデモページなんかに導入しておくと利用者に親切かも。 ボタンクリックでLightBox風にソースを表示させることができ、きちんとハイライトもされた状態になっています。デザインもなかなかいい感じ。 ファイルのダウンロードも可能ですので比較的簡単に実装できますね。 firefoxやChromeでは、view-source:http://〜みたいにするとソースコードを見るページにリンクできますが、そうした方法での実装法も紹介されています。 関連エントリ ブラウザ上で動作するソースコードエディタ『Edit Area』 ブラウザ上でソースコード編集が可能な開発環境を提供「ecoder」

  • HTML5, CSS3, jQuery1.4, WordPress3の厳選チートシート集

    当サイトで紹介した数多くのチートシートの中から、今まさに役立つであろうチートシートを厳選して紹介します。 ※未紹介のものも含まれています。 HTMLのチートシート CSSのチートシート jQueryのチートシート WordPressのチートシート [ad#ad-2] HTMLのチートシート

  • タイトル文字列をファンシーに加工できるjQueryプラグイン「Lettering.JS」:phpspot開発日誌

    Lettering.JS | daverupert.com タイトル文字列をファンシーに加工できるjQueryプラグイン「Lettering.JS」。 jQueryとCSS3を組み合わせて次のようなファンシーなタイトルが画像ではなく文字列で実現出来ます。 タグはこんな感じで普通のHTMLで定義しておくだけでOK <h1 class="fancy_title">Some Title</h1> $(".fancy_title").lettering(); のように初期化して上げれば上記のようにファンシーな感じに変更できます。 マウスカーソルを当てると反応があってなかなか面白いエフェクトがかかってます。 関連エントリ ファンシーなデザインがいい感じのAjax&PHPなコンタクトフォーム作成サンプル 図を枠内にドラッグしてCAPTCHAするファンシーなCAPTCHA「Ajax Fancy Capt

  • jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net

    jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。 Fly-out Menu with jQuery and CSS3 Rocking and Rol

  • 色合いを選べるツールチップ実装jQueryプラグイン「Colortip」:phpspot開発日誌

    Colortip ? a jQuery Tooltip Plugin ? Tutorialzine 色合いを選べるツールチップ実装jQueryプラグイン「Colortip」 デフォルトで6つのテーマを選択することが出来ます。 ツールチップ自体のデザインも次のようになかなかいい感じです。 ヒントに色分けで意味合いを持たせてより、分かりやすいヒントを付けられそうですね。 関連エントリ 画像なしで実現するCSS吹き出しツールチップ実装サンプル色々 画像付きのオシャレなツールチップを実装できるjQueryプラグイン「TinyTips」 スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」 CSSだけで実装するアイコン付きのセクシーなツールチップ作成チュートリアル

  • アニメーションの残像が残るjQueryアニメーションチュートリアル:phpspot開発日誌

    Shadow Motion Effect in 5 Lines Of jQuery | AEXT.NET MAGAZINE アニメーションの残像が残るjQueryアニメーションチュートリアルが公開されてます。 次のようにアニメーションした後の残像が残ります。CSS3の機能なども盛り込みつつ実装されてるみたいです。 サンプルは簡単な円のアニメーションを使いながらコードの説明があります。 Flashに比べるとパフォーマンスはそこまで出てない気はするのですが、なかなか面白いですね。 関連エントリ キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム クールにアニメーションする色合い様々なjQueryメニューサンプル色々

    gigi-net
    gigi-net 2010/04/26
    なにこれすごい
  • 1