CSSとSVGで曇りガラスのような効果を作る
2011年の9月に「CSSとSVG filterでガラスっぽい効果をつける」というのを書きましたが、これはFirefoxのみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品Frosted glass effect with CSS & SVG 背景画像にはWetFoto.comによる#246 Wetlook with Beautiful Brunette in Leggings and Jacket. Girl in black jacket, white wetlook leggings and skirt in boots, get wet fully clothed in the sea.を使用しています（リンク先はFlickrです）。 この画像はCC BY-NC-SA 2.0でライセンスされています。 背景画像にはBeryl Ch
SVG & CSSでアンサガのスキルパネルのようなメニューを作る
「SVGにチャレンジ！ 第1回」です。第2回があるかは分かりません。 インラインSVGを使って『アンリミテッド：サガ』というゲームのスキルパネル風のメニューを作ります。 実物は「アンリミテッドサガ スキルパネル」とかで画像検索してみてください。 このスクエアさんの『アンリミテッド：サガ』というゲームがすごく好きでですね……以前からこれをウェブページとして作ってみたいと思っていたんですよ。 クリッカブルマップとかも考えましたが、あれあまり好きじゃない。 というわけでSVGでやることにしました。拡大しても綺麗ですしね！ Unlimited Saga Style Panel Menu with SVG & CSS デモファイルをダウンロード 表示確認で一番期待通りに表示できたのは、Firefox 7とChrome 16 devです。 IE 9とSafari 5.1は、transitionしません
CSSとSVG filterでガラスっぽい効果をつける
SVGのフィルタについては以前も少し書きましたが、今回はfeGaussianBlur要素を使って、ガラスのようなエフェクトを付けてみたいと思います。 デモページは以下ですが、たぶんFirefoxでしかちゃんと見れないと思います。 Glass effect with CSS & SVG filter デモファイルをダウンロード 背景にはrachel a. k.さんの「52. she’s gone where the goblins go」を使用しています。 この画像はCC BY-NC-SA 2.0でライセンスされています。 今回作ったSVGファイルにはこんな感じのが書かれています。 <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
