タグ

JSと cssに関するchokuchokoのブックマーク (4)

  • 画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js

    画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQMのCSSをロード幅が1024px以下なら何も読み込まないそれ以外はJQMのCSSをロードこう設定すれば、601px~1024

    画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js
  • クールな通知件数表示のCSSデザインサンプル:phpspot開発日誌

    Menu with Notification Badges CSS Snippet | WebInterfaceLab クールな通知件数表示のCSSデザインサンプル。 タブの上にずらして件数表示を分かりやすくクールにデザインしたCSSデザインサンプルです。 色が色々あっていいですね。 マークアップもこんな感じで簡単です。 画像ではなくCSS3デザインなのでradius変えたい場合もちょっと触ればOKです 関連エントリ ブロック要素にいとも簡単にiOS風の通知件数を表示できる「Badger」 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 簡単なコードでアイコン付きの分かりやすい通知を実装できる「Notifier.js」 分かりやすい通知ボックスを作れる「Humane JS」

  • [JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス

    ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています

  • 今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。

    みなさんこんにちは、カッシーです。 先日6月8日に26歳になりました。充実した26歳にできるよう頑張っていきます! 今回は手軽に実践できる効率アップTIPSをご紹介したいと思います。 WEB業界のデファクトスタンダードっていうよりは僕が実践しているものがメインです。 こういう効率アップTIPSとかは共有してどんどん仕事の効率を上げれば ・コストダウン(人件費) ・定時に上がってアフターを楽しむ ・費用は下がるし仕事は早くできるしモチベーションは上がるはいいこといっぱい! なんでどんどん情報をシェアしたいですね! もしこんなのものあるよーって方はコメントなりtwitterなりメッセージ頂けると嬉しいです。 目次 ・WEBサイトの新規作成キットを利用する ・拡張機能を利用する ・コード共有・アセット ・よく使う単語は辞書に登録 ・素材や過去のデータは整理しておく ・効率の高いファイルの送受信

  • 1