CSSで画像を白黒にして、カーソルをあわせるとゆっくり色がつくようにする。 | RifRif.net
Tweet こんにちは、りくとです。 今回は、CSSで画像を白黒にして、カーソルをあわせるとぼんやりともとの色がつく、というのをやってみようと思います。 ちなみに、これには「filter」というのを使いますがCan I use…で見るとwebkit(GoogleChromeとか)でないといけないようですので、その他のブラウザではうまく動作しませんのでご注意を。あと、IEでも出来るみたいです。執筆現在手元にIEがないので確認はしていません。 それでは早速。 まずは画像の色を白黒に -webkit-filter: grayscale(100%); /* webkit用 */ filter: gray; /* IE用 */ これだけです。これで、画像は白黒になります。ですから、まあすべてのimgに対してなら単純に img { -webkit-filter: grayscale(100%); f
CSSで半透明にできるOpacityプロパティとIEでの問題について
ちょっと上手くいって感動したので書きます。今回も番外編で、小ネタです。 ブログのデザインを変更していると、ある要素を透明にしたい時がある。透明にするには、CSSでは次のように設定する。 要素を透明化する CSS プロパティ CSS3 で入ってきたプロパティのようだが、opacity を設定すれば透明化できる。 opacity:0.7; 0 が透明で 1 が不透明、0～1 の値を指定する。 これで Firefox や Chrome では透明化できたのだが、IEでは出来ない。ネットで調べると、IE では Opacity は使えず、filter を使うそうだ。 filter: alpha(opacity=70); /* ie 6 7 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ IEの透明度は0～100の％で指定する。 この他、Firefox や
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
