EVENTs Design – クリスマス・ハロウィン、お正月イラスト
イラストの使用条件とQ&A イベントデザインプレミアムにアーカイブしているイラスト素材の著作権はTopeconHeroesダーヤマが保持しますが、累計20個まで使用報告無しで、WEBデザインやDTPデザイン各種プレゼン資料やフライヤー、企画書などの素材として無料でご使用いただけます。その際下記のルールを守ってご利用ください。 20個以上使う場合は条件を一つクリアしてください。 イベントデザインの素材は累計20個までは無料でお使い頂けます。20個を超える場合は下記条件のいづれか一つをクリアすると使えます。 以後20個おきに一つ条件をクリアしてください。スタンプ以外は無料で出来ます。 累計で20個以上素材を使う場合の条件 ●twitterでTOPECONHEROESのサイトをどれかひとつ紹介。 ※一番上のヘッダーに一覧あります。 ●TOPECONHEROESダーヤマのスタンプを嫌々一つ購入。
これでもうアイコンには困らない！永遠に無料利用できる1,800種類のミニマルにデザインされたアイコン素材
FREE for you, forever. 1,800種類ものミニマルにデザインされた、永遠に無料利用できるアイコン素材を紹介します。 PSD, AI, Sketch, SVGも完備されており、ダウンロードしておいて損はないですね。 1,800種類は多すぎるので、ごく一部 カテゴリは16、それぞれ100種類くらいある感じです。 Utilities Arrows Messages, Mails Emoji Map, Transport Tools Design Media Network, Web Users Time, Education Social Tech Shop Other Files, Folders アイコンの基本サイズは20x20pxで、鋭角と角丸の2種類でデザインされています。
Homepage | GSAP
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
Font Awesomeで回転したいときfa-spinが便利 - Qiita
<div> <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa
いまさら聞けないSVG——Web制作に便利な3つの理由 (2/2)
Web制作でSVGが役立つ3つのシーン 前に解説したとおり、SVGはラスター画像の画像フォーマットとは異なる性質を持っています。この性質をWeb制作のさまざまな場面で活かせます。 レスポンシブWebデザイン SVGは拡大・縮小に強いで、レスポンシブWebデザインで有効です。ロゴ画像や、図版に使えば、1つの画像ファイルでスマートフォンからPCまで対応できます。 マルチデバイス対応 「拡大・縮小に強い」性質に似ていますが、SVGはベクター画像なので1ピクセル未満を表現できます。そのため、iPhoneのRetinaディスプレイなど、高ピクセル密度画面のデバイスでもきれいにぼけずに表示できます。デバイスのピクセル密度の違いを気にすることなく利用できるのは、大きなメリットでしょう。 UIやインタラクションの作成 「マークアップ言語である」特徴を活かし、HTMLにSVGを融合させると、地図や折れ線グラ
いまさら聞けないSVG——Web制作に便利な3つの理由 (1/2)
スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 本連載では、SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。（編集部） Webの表現を広げるSVGの魅力 SVGと聞くと、「単なるベクターの画像でしょ」と思う方も多いでしょう。確かにSVGは「Scalable Vector Graphics」の略なので、ベクター形式の画像フォーマットであることには間違いありません。 一方で、SVGには、PNGやJPEGといった、他の画像フォーマットとは異なる魅力があります。SVGをWebページに使うことで、これまでのHTMLやCSSだけ
A JavaScript framework for building fantastic SVG widgets - Svidget.js
Build fantastic visual SVG Widgets. Svidget.js is a JavaScript framework for creating immersive and fully interactive SVG widgets. By componentizing your data visualizations as widgets, you can quickly and easily embed them on any website while keeping a clean separation between SVG and HTML. Svidget.js is no longer being maintained, and has been archived. You can still use it, but it is recommend
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
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
HTML5 と SVG で考える、これからの画像アクセシビリティ
This document discusses Yarn and its advantages over npm. It notes that Yarn uses yarn.lock files instead of npm-shrinkwrap.json files to lock down dependency versions. Yarn is also described as being faster, able to work offline by caching dependencies, and potentially more secure than npm with features like flat mode and module folders. The document suggests Yarn may handle dependencies and devD
[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js
demo: pie menu アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。 wheelnav.jsの使い方 Step 1: 外部ファイル 当スクリプトとRaphaël.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head> Step 2: HTML ナビゲーションを
![[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/302021738966caaf051fa35a7a6c058cd7935a66/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015022401.png)
SVGを使いこなすための便利ツールいろいろ
2015年1月28日 SVG, 便利ツール SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術。高解像度ディスプレイでもくっきりはっきり表示できるので、近年海外サイトを中心に見かける機会が増えてきました。SVGについてはWebクリエイターボックスでも何度か取り上げてきたので、耳にしたことのある方も多いかと思います。今回はそんなSVGを使いこなすための便利なオンラインツールやJavaScriptなどを紹介します。SVGってなんぞや？という方は、過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ ラスター画像をSVGに変換 Vector Magic Vector MagicはJPEG、GIF、PNG形式の画像をベクター画像に変換し、EPS
商用利用無料、シンプルでかわいいデザインのアイコン素材100種類、コリス限定全員にプレゼント！
お馴染みの freepik.com 提供によるベクター素材をコリス限定で全員にプレゼント！ もちろん個人でも商用でも無料で利用できます。 今回は2015年の新年を迎えて、シンプルでかわいいデザインの使い勝手のよいアイコン素材です。 freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でももちろん利用できます。アイコンに特化したflaticon.comも運営しており、こちらには現在64,000個以上のアイコンが無料で利用できます。 freepik.comでアイコンの検索する時は、下記のページからが便利です。 freepik.comでアイコンを探す またfreepik.comは、そのブログだけのオリジナルの素材を配布するコラボをしています。 日本ではコリスが初！今回でいよいよ第15弾となりました！ 第1弾〜14弾まではこちら。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
本気で使いこなす「SVG」再入門【2015年版】
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js![[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/22479d89713c68e7c04be9754415c079ec9f7950/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015032308.png)
GitHub - mariuszostrowski/subway: Subway is a set of 306 pixel perfect crafted icons optimized for iOS, Apple Watch, Windows and BlackBerry 10.
Power Up With The Right Gears and Wheels -Transform Icons
フリーの高機能ドローソフト「Inkscape」がv0.91に大幅なアップデート
