タグ

ブックマーク / h2ham.seesaa.net (3)

  • CSS3のtransitionプロパティでアニメーションを試してみた

    このブログでもひっそりと使っているCSSでのanimation。結構今更ですが、これも毎回調べたりしつつ使っているので、勉強したことを書きだしておきます。 今回はその中でもtransitionを使ってアニメーションをみてみようと思います。 webkitとOpera、Firefox4で動作 2011年1月現在、CSS3のアニメーションが動作するのはwebkitのSafariとChrome、それとOperaとFirefox4で動作します(IE未確認)。ただし、それぞれのブラウザでベンダープレフィックス(接頭語)がないと動作しません。 まずはデモを まずは簡単に、ブロックが大きくなるデモから。 ■CSS .demo div{ background-color:#0000ff; width:100px; height:100px; color:#ffffff; /*以下アニメーションの設定(○○は

    CSS3のtransitionプロパティでアニメーションを試してみた
  • jQuery自作:簡単な指定だけでテキストを画像と入れ替え(画像置換)ができる”jQuery ReplaceImg Plugin”

    「画像置換が簡単にできないかなー」 なんて言われたことが過去にあったのを思い出した。 CSSでの設定を覚えたら簡単にできるのですが、 それよりも簡単に使えないかなーと考えていたら、 「あ、プラグインでいいじゃん!」 なんていいのか良くわからないまま昨日から構想はじめて、さっきようやく完成した。 いろいろなテストとか実験しながら作ったら時間かかった(汗) でも作りというかスクリプトはものすごく簡単だったりする。 このプラグインを使えば、画像置換を簡単に行えると思う。 出来云々はおいといて、とりあえず紹介! ダウンロードして使用してください。 リンク先を保存で保存できます。 ダウンロード:jquery.replaceImg-1.0.js 動作を確認したブラウザは Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。 使い方 jQueryが無いと動かないので、ダウン

    jQuery自作:簡単な指定だけでテキストを画像と入れ替え(画像置換)ができる”jQuery ReplaceImg Plugin”
  • Firebugの使い方2 THE HAM MEDIA

    以前に『意外と知られていない機能が多い!?Firebugの使い方』というエントリーを書いたところ、気づけばビックリなブクマ数がついたりする。 Firebugってかなりのコーダー(デザイナー)とか、Webに関わる人の多くはいれているアドオンのハズ(未調査なので自分の気持です)だけど、SaCSS参加者では使っていないって人が意外にもいたので書いたエントリーでした。そのブクマしている人の数やコメントをみると、やっぱりみんながみんな、使い切れているものでないですよね。 ということで、前回は紹介しきれなかったけど、こんな使い方してるよ~という自分の使い方を紹介します! 不必要な要素は消してしまおう 前回のおさらいっぽい部分から。 いろいろなサイトをみてまわっていると、時々、「これ邪魔だな」とか思う要素がポッとでてきたりってしませんか?大きいモニタの時はそんなこと特に思わないのですが、小さいモニタを使

    Firebugの使い方2 THE HAM MEDIA
  • 1