[B! SVG] n314のブックマーク

Tumblr

Tumblr is a place to express yourself, discover yourself, and bond over the stuff you love. It's where your interests connect you with your people.

n314 2018/09/24

IE
SVG

リンク

グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing

これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i

n314 2017/12/05

リンク

CSSやSVGで実装するローディングアニメーション - NxWorld

以前であればアニメーションGIFを用いることが多かったローディングアニメーション（プリローダー）も最近ではSVGを使ったり見栄えだけでなく動きも含めてCSSのみで実装するということも大分増えてきたので、過去に参考にさせてもらったものや覚えておきたいと思った実装方法のまとめです。また、サンプルやチュートリアル以外に簡単にCSSやSVGを使用したローディングアニメーションを作成できるジェネレータも併せて紹介します。

n314 2017/09/29

css
SVG

リンク

背景画像に使えるシームレスなSVGパターン画像のコレクション「Hero Patterns」

Hero Patterns Hero Patternsは、背景画像に使えるシームレスなSVGパターン画像のコレクションです。 SVGなので、前景色、背景色、透過度の調整が可能です。現在、オリジナルのパターン画像、20点が公開されています。パターン画像は、生成されるCSSのコピペで実装することができます。また、ベースとなるSVGを﹁Download unstyled SVG﹂のリンクからダウンロードすることも可能です。コピペしたCSSでSVGを背景画像として実装 svgをbodyの背景画像に設定してみます。コピペしたCSSをスタイルに設定するだけです。 HTML + CSS <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> body { background-color: #DFDBE5; ba

n314 2017/01/05

css
SVG

リンク

SVGを使用してる企業・団体のサイトを22ヶ国、160件以上調べてみた - 聴く耳を持たない(片方しか)

このダイアリーでは過去に何度かSVGの記事を書いているのですが、それに対する反響で SVGって未だに使ってるところを見たことが無いとかいつになったら使えるようになるのか永遠に普及しなさそうみたいな意見をよく見かけます。そうした反応にカチンときた……というほどではないのですが、納得してもらうには実例を挙げて反論するのが分かりやすいだろうな、と考えてSVGの利用状況を調査してみました。かといって個人サイトの利用例を挙げるだけでは説得力がないでしょうから、著名な企業や団体でのSVG採用事例をリストアップしてみた次第です。そしてもう一つの動機として、Webサイトの制作現場でSVGの導入を検討する際に、同僚や上司、またクライアントからの同意を得る・説得する手段としても、既に実際に利用している企業や団体を提示できれば話を進めやすいだろうな、……といった狙いもあります。例えばあの有名な

n314 2015/05/25

SVG

リンク

JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT

昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;

n314 2014/05/10

リンク

はてなブックマーク

タグ

関連タグで絞り込む (4)

SVGに関するn314のブックマーク (6)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス