メガネのレンズがあるところだけクリアに画像が見えるCSSの画像フィルターblurを使ったアイディア | 9ineBB
メガネを使えばこんなに綺麗見れますよっていう宣伝につかったり、メガネの部分を虫眼鏡にして遊べるWebサイトを作ったりと使えそうですね – CODE – HTML <div class="background-image"></div><div class="workspace"><div class="lens"></div></div> CSS body { height: 100%; width: 100%; margin: 0; cursor: none; overflow: hidden; background: #000; } .background-image { position: absolute; top: 0; left: 0; background: #bada55 url(http://thehomesitter.com/wp-content/uploads/201
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] filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法
この記事は SVG Advent Calendar 2014 の2日目の記事です。前日の記事は、t_motooka さんの「clip と transform との組み合わせ – 職業プログラマの休日出勤」でした。 SVG の filter 要素を使うとどんなことができるのかという基本的なことと、filter 要素を使ったわりと簡単にできるマウスオーバー効果の作り方をご紹介します。 filter 要素でどんなことができるのか filter 要素では SVG 内の画像をぼかしたり、色相を変えたりするようなフィルターを作ることができます。 ただ、filter 要素単独でフィルターを作る訳ではなく、原始フィルター（フィルターの効果を定義するようなもの？）と呼ばれる要素を子要素として記述しセットで使います。 原始フィルター要素は、feGaussianBlur（ぼかし）・feColorMatrix（明
![[SVG] filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/3af36800c727b01cdc29d731d974d7938ff24136/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F12%2Ficon.jpg)
SVGファイルをIllustratorで簡単に作成し、HTML5で表示する方法 - Wataame Frog
というふうな感じ。 マークアップ言語（XML）でできているってのが一番の驚きでした。 Adobe Illustrator で作成する ↑ 今回は簡単な画像で作成。キャンバスをオブジェクトと同じサイズにします ↑ 保存の際に「SVG」を選択 ↑ 上記オプションがいい感じだと思われます ↑ 出来上がったsvgファイル。私の環境では、IEの様なアイコンとなりました ソースコード 作成したsvgファイルを秀丸などのテキストエディタで開くと、以下の様な内容です。 XMLで出来ているのがわかると思います。 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUB
イラレデータがあれば簡単！SVGロゴを表示する
SVGってpngやjpg画像と違ってベクター形式なので綺麗に表示されるという情報は以前から知っていたのですが、実際の業務で使ってきませんでした。 しかし、2016年1月12日をもってIE8のサポート終了されることもあり、思い切ってSVGロゴ表示させてみました。 Internet Explorer サポートポリシー変更の重要なお知らせ SVGロゴの表示の仕方をメモしておきます。 イラストレーターを使ってロゴデータ準備 SVGコードで表示させる方法 htmlにimgタグを使って表示させる方法 イラストレーターを使ってロゴデータ準備 まずは、イラストレータを使ってロゴデータを準備します。 今回はテスト用で適当にテキスト入力したロゴを用意しました。 余計な余白ができないようにアウトライン化します。 「書式」-「アウトラインを作成」 特に必要ないとは思うのですが、念のためアートボードをオブジェクトに
ロゴはSVGにして使いまわそう！簡単スマホ対応。｜ビリオンプランのスタッフブログ
せっかくのスマホサイト、高解像度デバイスで見たらロゴや見出し画像が粗くて残念。 なんてことはよくある話。というわけでロゴだけでもSVGでスマートフォン対応しましょう！ ロゴはSVGで使いまわそう。 サイト内で複数回の使用が想定されるロゴ画像は、いちいちサイズ別に画像を用意するのは面倒です。 ひとつベクターデータのSVGロゴを用意しておけば、使いまわせますし何より高解像度デバイスにも対応できます。 参考：各ブラウザの対応状況 http://caniuse.com/#search=SVG SVGとは？ SVG（エスブイジー）【 Scalable Vector Graphics 】とは、ベクター形式の画像フォーマット／画像記述言語です。ベクター形式なので、画像品質を維持したまま拡大縮小を行うことができます。そのため高品質なグラフィックでも、ファイルサイズが小さいのが特徴です。JPEGやPNGデー
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
アニメーション付きSVGで実装する滑らかで自然なアニメーション | スターフィールド株式会社
軽量できれいな画像を表示させることができるSVGですが、 SVGにはアニメーションに関わるタグがあり、 JavaScriptやCSSを使わなくてもアニメーションさせることができます。 ↓こちらのSVGアイコンを使ったサイトをご覧いただくと、その良さを感じていただけると思います。 SVG Loaders – Sam Herbert IEでは現在最新のバージョンである11ですらこのアニメーションに対応していないので、 現時点ではスマホ用のサイトなどに利用は限られてしまいますが、 GIFのアニメーションと比べて制作の手間も少なく、 何より「軽量」、「拡大してもきれい」「アニメーションがとても滑らか」という利点があるので、 利用価値は大いにあると思います。 今回は以前loading画像として作ったアニメーションGIFを、 SVGで再現してみることにしました。 GIF版 ↓HTML5のインライン
JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。 SVG Loaders -GitHub Step 2: HTML あとは、imgタグで配置するだけです。 <img src="svg-loaders/puff.svg" /> アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。 <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【SVG】レスポンシブ対応してみた
CSSやSVGで実装するローディングアニメーション - NxWorld