タグ

2014年6月22日のブックマーク (3件)

  • [CSS]この発想はすごい!画像をモザイクからくっきり見せるスタイルシートのテクニック

    一枚の画像を使って、モザイク状の画像をアニメーションで少しずつくっきりさせるスタイルシートのテクニックを紹介します。 もうほんと、ナイスアイデア! コードを見る前に実装方法をちょっと考えてみてください。 ↓はブラウザでの表示をアニメーションgifにしたものです。 Gif Style CSS3 Animation アニメーションはロード時のみなので、繰り返し見たい時はリロードで。 実装はこんな感じです。 HTML HTMLは非常にシンプル! 画像はdivの背景として表示します。 <body> <div class="image"></div> </body> CSS スタイルシートも非常にシンプル、一枚の画像にモザイクからくっきりまでの各コマを並べ、CSSスプライトで次々にアニメーションで表示しています。 コードを見るまで、どうやって実装してるのか全く分かりませんでした。 body { ba

    s99e209
    s99e209 2014/06/22
    プロフィールページの写真とかで使えそうなアニメーション。CSSだけでやっているとは思えない動きしてる。
  • Library Detector - あのサイトはどのJavaScriptライブラリを使っているか MOONGIFT

    Webシステムを開発していると他のサイトがどういった仕組みで動いているか気になったりしますよね。HTMLソースやURLからどんなプログラミング言語で、どんなフレームワークか知ったりするのは面白いです。 サーバサイドは実際のところは分からないのですが、フロントエンドは分かります。ということで入れてみたいのがLibrary Detectorです。 Library Detectorの使い方 Library DetectorはGoogle Chrome機能拡張としてリリースされています。 インストール後、任意のWebサイトを見ると使われているライブラリがチェックできるようになります。 Yahoo! JapanはYUI 2を使っているようです。 Yahoo! ニュースはjQueryです。 jQueryはさすがにjQueryを使っていますが、さらにModernizrも使っています。 Backbone.

    Library Detector - あのサイトはどのJavaScriptライブラリを使っているか MOONGIFT
    s99e209
    s99e209 2014/06/22
    真似たいサイトのJavascriptライブラリがさくっと確認できていい感じ。ChromeのAppspectorアドオンと併せて使うと大体確認できる。
  • Mac始めて6年目にして、使い続けている開発ツール73選 - Qiita

    先日Macを再インストールするに当って、いい機会なので使ってないツールを省き使っているツールを厳選してインストールすることにした。あまり増やす気はなかったが、使うものだけ入れても73個になった。 コマンドライン ツール管理 brew-cask: HomebrewでMacアプリをインストールできる。 brew-gem: Homebrewでgemツールをインストールできる。 brew-pip: Homebrewでpipツールをインストールできる。 npm: Node.jsのパッケージ管理ツール。 DevOps ansible: Python製の構成管理ツール。Chefから乗り換え。 boot2docker: MacDockerを使える。 packer: 仮想マシンのイメージを作るのに便利。 Git git: バージョン管理ツール。 hub: GitHubのコマンドラインクライアント。プルリク

    Mac始めて6年目にして、使い続けている開発ツール73選 - Qiita
    s99e209
    s99e209 2014/06/22
    たくさんツール紹介されててどれも使ってみたい。