Responsive Placeholder Image by Shaw on CodePen
tl;dr Transparent Pixels I became interested in image replacement techniques to keep page size down, AJAXing in full images later as needed, and I stumbled across The Smallest Transparent Pixel. Using a bas64 encoded 1x1 transparent pixel as a placeholder, you set the width and height attributes to the space you want to fill. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAA
The Gooey Effect | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a post by Lucas Bebber. Lucas the originator of some of the most creative effects I’ve ever seen on the web. So much so I couldn’t resist blogging about them myself several times. Much better this time: we got the man himself to explain how SVG filters work and how you can u
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
svgビュー指定って知ってますか？
svgをimg要素等から参照する場合，直接ファイル名を指定する他に「svgビュー指定」と呼ばれるパラメータを渡すことが出来るんです．これってグラフィックの作画に直接関わる機能じゃないので，あまり知られていないのですが，憶えておくと結構便利ですから是非マスターして下さいね． 2014/03/24 ちょこっと内容を追加．基本は変わらず． ※注意：記事を書いては見たものの，その後いろいろ試してみたら結構な動作不良っぽいものがザクザクと． ですから，フル活用する前にきっちりと動作検証をして下さいね． 私はブラウザベンダーにフィードバック入れときます． 率直にsvgビュー指定って何？ 簡単に言うと，「svgファイルのviewBox指定をsvgの呼び出し側で指定する仕組み」のことです． 通常svgをブラウザで表示する場合，urlバーやimgやobject要素にsvgファイルへのパスを指定しますが，この
SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る
SVG によるアイコンデータと CSS による背景色の指定を組み合わせてサイズやカラーを自在に変更可能なアイコンボタンを作るお話。あわせて主要 Web サービスのロゴデータを SVG で用意する方法や注意点なども。 透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG （Scalable Vector Graphics） でやることでサイズ変更にも対応しやすいやつを作るっていうお話。 手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 （スマートフォン表示だと隠れてると思いますが） にある 「Follow」 メニュー部分で使ったので紹介。 やってることは簡単です。白抜きにしたい部分をそのまま白色、背景は透過するよ
14islands
Case Study: How we built the scenes on Google Santa Tracker December 12th, 2013 The christmas spirit has arrived early this year at 14islands! We got approached to help on a very exciting project from Google called Santa Tracker. Google Santa Tracker is a christmas calendar that consists of 24 interactive scenes. From elves having a good time and doing some work to mini-games to keep you entertain
Create A Responsive Imagemap With SVG | thenewcode.com
To begin, it is important to understand what SVG is and how it differs from other image formats. SVG is a vector-based image format that uses XML code to define shapes and lines, making it ideal for creating scalable graphics that can be easily manipulated in a web browser. This makes SVG perfect for creating responsive image maps, as they can be scaled up or down without losing image quality. To
Animated line drawing in SVG
There's a demo you're missing here because JavaScript or inline SVG isn't available. I like using diagrams as a way of showing information flow or browser behaviour, but large diagrams can be daunting at first glance. When I gave talks about the Application Cache and rendering performance I started with a blank screen and made the diagrams appear to draw themselves bit by bit as I described the pr
URLエンコードを利用したData URIなSVGでSassのインターポレーションを利用する
Base 64ではなくURLエンコードを利用したData URIなSVGは記号類以外は普通のテキスト。なので簡単なものならばSassのインターポレーション機能(#{$foo})を使いダイナミックにデータを弄ることができる。一年半前くらいにヨモツネットで書かれてたグラデーション・ミックスインとかで使われている。それのもっと単純で即戦力な利用例。 例えばSVGのfillで使う色をSassで定義したカラースキームに従ったものに変えるようにできる。通常はカラースキームからカラーコードをコピーし、それを使ってSVGを編集し保存、更にData URIに変換した後でSassにペースト、という手順を踏むことになるが、その手順のほとんどが必要なくなる。 $color: #369; $image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2
SVGO
SVGOはSVGに不要なホワイトスペースの削除に留まらない最適化を行ってくれるステキなソフトウェア。ちょっと前までなかなか挙動不審だったので、利用を避けていたんだけどv0.3.7では安定している感じなのでまた使い始めた。デフォルトでは入力ファイルを上書きしちゃうのでバックアップを取るように心がけたい。 SVGOは大体において本当に素晴らしい効果を発揮してくれる。Data URIを使ってCSSに埋め込む時のようにファイルサイズがダイレクトに響いてくるケースには積極的に利用すると良い。デフォルトではviewBox属性消えちゃうとか「アレッ？」と思うところもあるけど、気になるなら残すように設定もできる。ドラッグ・アンド・ドロップでまとめてSVGOに通してくれるSVGO GUIとかもあるのでそんなに使い方は難しくない。 $ svgo -i test.svg -o - --datauri=base6
Media Queries within SVG - Web Performance Consulting | TimKadlec.com
There has been a lot of interesting chatter regarding SVG as of late, including thorough posts by David Bushell and Chris Coyier. One aspect in particular that is getting quite a bit of attention is the ability to embed media queries within SVG files. Even more amazing is the fact that this was first talked about by Andreas Bovens of Opera all the way back in 2009! The renewed interest in the tech
GitHub - estelle/clowncar: Clown Car Responsive Image Technique
We can use media queries within SVG to serve up the right image. The beauty of the "Clown Car" technique is that all the logic remains in the SVG file. I've called it the "Clown Car" technique since we are including (or stuffing) many images (clowns) into a single image file (car). When you mark up your HTML, you simply add a single call to an SVG file. <img src="awesomefile.svg" alt="responsive i
svgで徐々にパスを描画 - jsdo.it - Share JavaScript, HTML5 and CSS
<?xml version="1.0" standalone="no"?> <svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <path stroke-dasharray="1000" d="M 124.5,178.5 C 112.08536,182.05786 96.206744,147.40714 84.071837,142.98836 71.936929,138.56959 37.495318,154.89681 30.275263,144.18922 23.055208,133.48164 51.103236,107.67251 51.5
svgのfilterを使ってドット階調っぽい効果をつける
ノスタルジックなドット階調表示をfilterで作ってみた．operaだとfeTileが上手く動作しないようなので，見た目がおかしい．hrefで参照する図形がsvgだとダメっぽいので，別途png画像等を使えば何とかなるかもしれない． 画像の明度を取得 明度を5階調に分割する(1) 明度毎のドットパターンを生成する(2) (2)の図形を(1)で切り抜いて重ねあわせる． <?xml version="1.0" standalone="no"?> <svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <defs> <filter id="dotted"> <
SVG Stacks | simurai
Image sprites are wildly used for downloading lots of icons or UI elements all at once with just a single HTTP-Request. But they are somewhat cumbersome to use because you have to calculate the background-position offsets. You can’t easily add, remove or reorder them with recalculating. Or change the size without a neighbour peeking in from the side. How could it be solved? Well, by stacking them
SVGのテキストとMedia Queries | 水無月ばけらのえび日記
公開: 2012年2月13日16時10分頃 最近、SVGを使うことが多くなってきたのですが、テキストの処理がHTMLとは少し異なり、やや癖があります。そのあたりを少しメモしておきます。 テキストの改行HTMLの場合は、要素内に適当にテキストを書くと、その要素の中にテキストが表示されます。要素の幅に対して長いテキストが入った場合は、テキストは自動的に改行されます。 SVG1.1の場合、テキストを置くにはtext要素を使い、text要素自体にx属性、y属性で座標を指定して配置します。この要素には幅という概念がなく、テキストが自動で折り返されることはありません。SVG1.1では「自動改行はない」という旨がはっきり書いてあります。 SVG performs no automatic line breaking or word wrapping. To achieve the effect of m
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create A Responsive Imagemap With SVG | thenewcode.com
SVG Hover Effect | CSSDeck
http://berjon.com/presentations/20130910-ricg-switch/
スタイル設定 - svg要素の基本的な使い方まとめ