タグ

CSS3に関するQuphondiのブックマーク (2)

  • 10 Easy Image Hover Effects You Can Copy and Paste

    Sneak Peek Before we get started, take a look at the demo below to see all of the various hover effects that we’ll be building. Demo: Click here to launch. Setup Before we begin creating the individual demos, some basic setup is required. Here’s a chunk of CSS that we’ll be using to dictate the basic appearance of all of the examples. * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box

    10 Easy Image Hover Effects You Can Copy and Paste
  • JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる

    ちょっと調べ物をしたのでメモ。 画像1枚だけで、グレースケール、 マウスホバーでカラー画像に、 みたいなのを実装したい、出来れ ばJavaScriptも使用せず、みたい な内容です。 2枚用意しろよと言われたら実も蓋もないんですけど、画像1枚だけでグレースケール⇔カラー画像を実装したい。画像の数は半分で済むし、加工の時間も不要になるのは大きなメリットです。 1年前に同じ事をunformedbuilding(アップデート版もありました)さんがやってますので合わせてどうぞ。 Sample マウス乗せるとカラーになる、という良くあるホバーエフェクトですが、極力無駄を省きたい。画像が1枚で済めば、20枚必要なところが10枚で済むし、画像が追加されても加工したり、マークアップしなおしたりファイルをアップロードする必要がなくなります。 IE IEはfilterプロパティ使えばいいですね。 img{ f

    JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる
  • 1