これは簡単でいいね！コンテンツの区切りを斜め線にするテクニック（レスポンシブ対応） -Angled Edges縦長ページなど、コンテンツを積み重ねてレイアウトする際に、コンテンツ間の区切りを斜めにするSassのMixinを紹介します。 斜め線はSVGなので、デスクトップでもスマホでも美しく斜めに表示されます。
SVGと戯れる 第2話「大量のSVGイラストに個別でアニメーションをつける with Snap.svg 中編」DevJam
こんにちは、ヤムチャーtsukasaです。 前回はSVGを用意するとこまで解説しました。フロントエンド編は書いてみると予想以上に長くなったので、今回はsvgの準備からマウス移動の視差効果の付加まで解説します。パーツのアニメーション付加は後編で解説します！ 各種ライブラリを用意する jQuery（無くてもいいですが、今回のサンプルで使ってます） Tweenエンジン（今回はTweenLiteを使用しています） Snap.svg TweenエンジンはjQueryのAnimateでも何とかなりますが、滑らかさや柔軟性を考えるとTweenエンジンの方がいいです。 もしTweenエンジンのライブラリ容量さえも気になるコンテンツであれば、今回のようなSVGコンテンツは見送った方がいいでしょう。 また、書き出されたSVGのidをフックにするため、svgにできる圧縮は改行やスペース等を取ることぐらいで、極端
アニメーションやグラフ等、SVGを使ったJavaScript＆jQueryプラグイン11
2016年11月24日 JavaScript, jQuery, SVG 今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ ラインアート 1. DrawSVG See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. Webサイト｜GitHub｜デモ SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $('#my_svg_element').draw
Essential Icons
A free Iconset containing an essential set of icons you need for UI building. Handcrafted with love, path for path. Use it for free in commercial and non-commercial works, no crediting needed. About me My name is Daniel Swoboda, I am an Art Director based in Frankfurt, Germany. Currently, I am working at D&B; Interactive, crafting experiences for the web and everything digital. I love sneakers, be
SVG LAYERS for Photoshop | Open SVG files as Editable Vector Layers
Import SVG files as editable vector layers and export clean SVGs directly from Photoshop. Introducing SVG Layers SVG Layers is a Photoshop plug-in that enables you to open, edit, and save SVGs as vector layers. This lets you take full advantage of Photoshop as a vector editor, and allows for a simpler and more efficient workflow. How is it different from native SVG support in Photoshop? When impor
Case Study: Our SVG Icon Process
When I wrote about why you shouldn’t use icon fonts in your next web project, I had no idea it would spark so much heated debate and intense discussion. One recurring question stood out to me: How might one actually implement an SVG icon system? It’s a surprisingly difficult question to answer. Should you use <img>, <svg>, <object> or pure CSS? Will you combine your icons into a single sprite or k
Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト | co-jin
Photoshopレイヤーから直接SVGに書き出せる便利なスクリプトをご紹介します。 Photoshopで作成していたデータをSVGに変換したいというときに重宝するスクリプトです。 ご参考になれば幸いです。 Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト「Save as SVG」 「Save as SVG」は、Photoshopレイヤーから直接SVGに書き出せる便利なスクリプトです。 Photoshopで作成したものをSVGに変換したいというケースに重宝するスクリプトです。 シェイプレイヤーをレイヤーごとにSVGに変換してくれます。 CS5以上に対応しています。 スクリプト「Save as SVG」の使い方 こちらのサイトからスクリプトをダウンロードします。 スクリプトファイルをApplications/Adobe Photoshop/Presets/Scripts内
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
sprite画像はもう終わり？gulpでIcon Fontをつくろう！ | Goodpatch Blog
こんにちは。太朗です。 最近案件で使ったアイコンフォントが便利だったのでご紹介致します。 アイコンフォントのメリット スプライト画像はちょっとした色やサイズの変更も画像なので面倒ですよね。アイコンフォントを使えば色やサイズをCSSで自在に編集できるのでメンテナンスがかなり楽ちんです。なお、ベクターデータなので高解像度デバイスにも対応できます！ アイコンフォントをgulpで作る では、どうやってアイコンフォントを作るのか？作り方は色々ありますが、一番手っ取り早いのはgulpで自動で生成させることです。なおgulpのインストールなどは省略させてもらいます。 以下がgulpファイルの例です。 gulp.coffee 'use strict'; gulp = require 'gulp' $ = require('gulp-load-plugins')() # svg を圧縮する gulp.tas
Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる - 歴史雑談録
どうも、松田直樹@まぼろし でございます。 当方、実はWeb制作が本業でして、このような記事を書くハメになってしまいました。（いや、喜んで書いてますよ） 「Fireworks」ってのは Photoshop のようなグラフィックツールでございまして。 Web制作に特化した機能が豊富だったりで Webな方々には多く使われていたりするのですが、僕も右に倣えで頻繁に使用しているわけです。この Fireworks に関する記事を書くにあたり、この歴史雑談録に何とか絡めようと表題のようなテーマに及んだ次第にござりまする。 ということで、この記事は「Fireworks Lover Advent Calendar 2012」の20日目の記事となります。（長いです。すんません） 今現在、Web制作界隈においては「脱ビットマップ」「SVG元年」といったキーワードが脚光を浴びておるわけですから、なんと時勢を読ん
Aaron Beall - Fireworks Guru - Export
Export Commands Command bundle for Adobe Fireworks Aaron Beall 2011 - fireworks.abeall.com Version 1.0.6 Description: An assortment of commands to export Fireworks designs to other formats: Export Pages and States - Exports both pages and states to files at the same time, with a customizable filename schema. Export Slices As Sprites - Exports slices combined as a single image, or each slice as an
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2ndidea.com
loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator
SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース