商用利用無料、UIデザイン用のSVGアイコンが1100種類！Adobe XDやFigmaのツールも完備されてて、これは便利企業サイトをはじめ、プロダクト、オンラインショップ、アプリ、ブログなど、さまざまな商用プロジェクトで無料で利用できるSVGアイコンを紹介します。 SVGアイコンの数は1,100種類以上で、しかもオープンソース！ さらに、Adobe XD, Figma, Sketchなどでアイコンが簡単に使えるツールもリリースされています。
mo.jsを使って、いいね！アイコンをクールにアニメーションさせるデモ:phpspot開発日誌
Icon Animations Powered by mo.js | Codrops mo.jsを使って、いいね！アイコンをクールにアニメーションさせるデモ。 いいね、以外のアイコンも様々にアニメーションする様が実装されています アプリ化の流れで、WEBでもこういったアニメーションはより重要になっていきそうです 関連エントリ オシャレなアニメーションで動作するスライドショー「Elastic Circle Slideshow」 SVGでクールにアニメーションするローディングボタン実装「Loading Buttons」 画像をボケた状態から鮮明にするアニメーション「Blurry-image-load」 CSSを使った3Dアニメーションライブラリ「voxel.css」
SVGでセクションの区切りを斜め線にする
SVGでセクションの区切りを斜め線にする セクションの区切りを斜め線とかにしてしてみると、ちょっと他と違う感がでるかもしれない! 斜め線はCSSで回転させたりする方法もありますが、ここではSVGを使用した方法をご紹介いたします。 投稿日2015年10月14日 更新日2015年10月14日 HTML HTMLは単純にsectionで並べるだけです。 HTML <section id="section1"> <div class="inner"> <h2>Section First</h2> </div> </section> <section id="section2"> <div class="inner"> <h2>Section Second</h2> </div> </section> <section id="section3"> <div class="inner"> <h2>S
Textures.js
SVG patterns for Data Visualization Textures are useful for the selective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .attr("r", radius) .style("fill", t.url()); Lines
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
SVGをjQueryで操作する際にハマったので、書き留めておく。 | 5 LOG
SVGファイルををobjectタグで読み込んで、jQueryで操作しようとしたら、取得出来なくてハマった。 まずは、SVGデータをIllustratorで用意。 その際に、レイヤーグループに名前を付けておくと、<g id=”レイヤーグループ名”>で囲んでくれるので便利。 SVGファイルをobjectで読み込む。 <object id="svg_map" data="map.svg" type="image/svg+xml"></object> インラインSVGの場合、 var $svg_map = $('#svg_map'); で取得可能だが、 objectで読み込んだ場合は、取得出来ない。 iframeと同じようにしてもダメ。 var $svg_map = $('#svg_map').contents(); // ダメ なので、jQueryは使わずに、 var svg_map = doc
Chartist - Simple responsive charts
You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included. Get awesome Dashboard Templates by Creative TimAre y
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」:phpspot開発日誌
SVGMagic - Great jQuery SVG fallback plugin SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」 ブラウザが対応していなければPNG画像に変換して出力ができます。これである程度は気兼ねなくSVGを使えるという感じでしょうか。 初期化を次のようにおこなっておけば、自動変換してくれます。ｊsファイル内に定義しちゃってもいいのかも 関連エントリ Snap.svgを使ったSVGアイコンアニメーションのデモがカッコいい 色々なデザイナーの高品質なSVGアイコンがDLできる「iconmelon」 SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」 美しいSVG背景パターンギャラリー「SVG Patterns Gallery」
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
静かに流行り始めているポリゴン風デザインに挑戦！
2013年5月9日 Webデザイン, インスピレーション, 便利ツール 2013年を代表するデザイントレンドと言えばフラットデザイン。それを横目に、実は静かに流行り始めている「ポリゴン風デザイン」をご存知でしょうか？ローポリと呼ばれているものですね。今回はツールを使って写真からポリゴン風イラストを作ってみましょう！デザインの参考になるWebサイトやグラフィック・アートもまとめているので、オリジナルポリゴンアートに挑戦してみてください！ ↑私が10年以上利用している会計ソフト！ 「triangulator」でポリゴン風イラストを作成 ポリゴンは通常は3D系のソフトで作りますが、PhotoshopやIllustratorでも作ることができます。ただ、それではかなり時間がかかってしまうので、写真をサクッとローポリイラストに変換できる「triangulator」を使用します。こちらの動画をご覧頂け
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tabler Icons
Loading...
スライドショーにSVGでモーションブラーをかけてかっこ良くするデモ:phpspot開発日誌
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
いい感じに動くフラットデザインのローディングインジケーター「SVG Loaders」:phpspot開発日誌
SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ
http://iconmelon.com/