ローディング作成☆
Loading GIF or, so called loader gif is an animation that indicates a loading process on a web-site or an application. Being an critically important part of web-site and application design and usability, mostly the animations are used to show that something is loading on the background (e.g. AJAX applications). The animation objects are usually used in GIF format which is very popular due to it's
svg / canvas出力ができるbodymovinの紹介 - KAYAC engineers' blog
やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で１番プログラムできないおじさんの町田（@machida-yousuke）と申します。 今回は、「映像業界?フロントエンド業界？が注目しているオープンソースライブラリ bodymovin」について紹介します。 ちなみに私は、元某インターネット広告代理店の映像クリエイター兼フリーランスのモーショングラフィッカーでした。 ※この記事はAfterEffects（以下「AE」と称する）の基本的な操作、用語を理解している前提で進めていきます。 ※bodymovinのバーションは V 4.6.10、AEのバーションはadobe AfterEffects cc 2017で進めていきます。 （V 4.6.10から使用言語によっておきるバグの修正がされています。） ※使用PCはMacです。 bodymovinとは AE
SVGOMG - SVGO's Missing GUI
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transform precision Features Remove doctype Remove XML instructions Remove comments Remove <metadata> Remove xmlns Remove editor data Clean up attribute whitespace Merge styles Inline styles Minify styles Style to attributes Clean up IDs Remove raster images Remove unused defs Round/rewrite numbers Round/rewri
Elastic SVG Sidebar Material Design
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。
パソナテックさん主催コミュニティ「SHIBUYA☆LABU」のイベントの際のスライドです。 https://shibuya-labu-pt.doorkeeper.jp/events/30744 現在Web制作の現場において、コーダーとしてお仕事されているみなさん、今後のご自身のキャリアマップは描けていますでしょうか？ 専門的なフロント知識を活かして技術を極めていくのか、それともディレクターとしてキャリアを積んでいくのか悩まれている方も多いかと思います。 もしディレクターへのキャリアを考えているそんなあなたに！ ご自身の制作経験や強みを活かして、作れるディレクターとして活躍できるディレクション術をお伝えいたします！
SVGをbase64(URIスキーマ)のコードに変換してくれるコード 『SVG-encoder』 | 9ineBB
SVGの画像データをbase64の画像データに変換してくれるものです コードをPaste SVG code に貼り付けるだけで、即座に下の方に Take Code に表示されます javascriptを使ってクライアントサイドで変換の処理が行われています 出力されたものは CSSのbackground: url(data:image/svg+xml:utf8, ここにコード); imgタグの src=”data:image/svg+xml:uft8, ここにコード” このようにしてインライン画像として使うことが出来ます ちなみに SVG画像はどんなに拡大しても画質が下がることはないですよ javascript var doc = document; var initTar = doc.querySelector("#init"); var resTar = doc.querySelecto
Trianglify
About My name is Quinn Rohlf, and I'm a roaming engineer/designer based in the western United States. Trianglify is an open-source library I wrote to generate low-poly style patterns by combining a Delaunay triangulation with some nice colors. It was originally released in April of 2014. It has a sibling project, Trianglify.io, that provides a user-friendly GUI for the library and helps fund libra
FLAT ICON DESIGN -フラットアイコンデザイン- | WEBデザインやDTPですぐ使えるフラットアイコン素材がフリー（無料）ダウンロードできるサイト
フラットデザインに最適なフラットアイコン素材がフリー（無料）でダウンロードできる「FLAT ICON DESIGN」。 WEBデザインやDTP他、PPTなどでもすぐに使える商用利用可能なアイコン素材。利用規約はこちら ファイルのフラットデザインアイコン ノートのアイコン素材 あざらしのフラットアイコン 博士のフラットアイコン素材 はさみのフラットデザインアイコン ハンマー（とんかち）のフラットアイコン ドル袋のフラットアイコン素材 無料の暴れ牛のフラットアイコン素材 スペースシャトルのフラットデザインアイコン ギリシャのパルテノン神殿風のフラットアイコン 目玉のアイコン素材 にわとりのフラットアイコン素材 計算機のフラットアイコン素材 その2 コーヒーカップのフラットアイコン素材 バッファローのフラットアイコン 乳牛のフラットアイコン 海外の大学帽子のフラットアイコン おさるさんのフラット
【10分ぐらいでできる！】Illustratorで作るSVGローディングアニメーション | s-oyama.me
SVGアニメーションのことについて調べているとこんな動画を見つけたので、真似してデザインやアニメーションを少し変更してローディング用のアイコンを作ってみました。 完成するとこんな感じになります。 1.イラレでアニメーションにするアイコンのデザインを作成する アートボードのサイズは100px × 100pxです。 2.SVG形式で保存する キャプチャはIllustrator CS5のものです。 SVGオプションは恐らくデフォルトのままでOKかと思います。 3.index.htmlを作成して、imgタグで保存したSVGファイルを読み込む <!DOCTYPE> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SVG anim
Blurred Scrollable Overlay
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
新品複合機コピー機最新機能
ビジネスで複合機（コピー機）を使用する際に、最も使用頻度が高い機能はプリント（プリントアウト）機能ではないかと思います。会議の資料、見積書、申込書、顧客への提案資料など、PCで作成した資料を印刷して使用するケースは非常に […]
SVG Filter & CSS3 を使いグレースケールやぼかしを利用する方法 | Stronghold Archive
こんにちは Honma です。今回はデザインする際に役立ちそうな SVG (Webkit は CSS3) を使った、Grayscale Effect と Blur Effect (ぼかし) の利用方法です。記述はすごく簡単！ HTML <!– Grayscale Effect –> <img id=”grayscale-effect” src=”URL” alt=”” /> <!– Blur Effect –> <img id=”blur-effect” src=”URL” alt=”” /> /* Grayscale Effect */ #grayscale-effect { -webkit-filter: grayscale(100%); filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/sv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Shape Shifter
Shape Shifter
Android Icon Animator
GitHub - GianlucaGuarini/Vague.js: Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters
http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm
http://ios.robs.im/
イラレ作成からWeb書き出しまで
