Cropping Image Thumbnails with SVG
Our friend Aaron Parecki recently blogged about a technique he used for centering and cropping image thumbnails using CSS. It’s a clever technique used by WordPress (and many others), but it requires a containing element with explicit dimensions, making it less than ideal for responsive design. Using SVG, we can make a cropped image that still acts like an image. No CSS required, works in IE9 and
【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方
ほとんど無料ですがいくつか有料のも混ざっています。有料のを選ぶとアイコンセレクト画面ではなく『お金払ってね』的な画面に切り替わりますのですぐわかるかと思います。 また、絵柄ごとにライセンスが異なります。Removeボタンすぐ上のライセンスで確認してください。英語の説明ですが、翻訳サイトを使うとなんとなく意味が分かります。 欲しい画像がみつからなかったら・・・ 上記のところにも欲しいアイコンが見つけられなかった場合、icomoonは自作のアイコンやフリーのSVGアイコンなどもWEBフォント化することが出来るのです。WEBフォント化にすることができるのはSVG形式の画像です。SVG形式の画像はIllustratorなどで作成することができますが、探せば無料で利用できるサイトもたくさんあります。 2014年、無料で商用利用できる最新フリーアイコン素材のまとめ これらを組み合わせれば、さすがに好み
Scroll Drawing | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! We’ve taken an in-depth look at how SVG line drawing works before. It’s a clever trick where you use dashed lines for the stroke, but the gap in the dash is so long it covers the entire path. Then you can move it such that it covers the entire path again, which makes it appear as if it’s dra
正式版がリリースしたAvocodeの便利な使い方をご紹介（コリス限定の優待コードもあるよ） | コリス
制作の効率が劇的にアップする『Avocode』の正式版が、1/29にリリースされました！ Avocodeは簡単に言うと、PSDのプレビューや書き出しをPhotoshop無しで行うもので、書き出しは画像だけでなく、SVGやCSSにも対応しています。画像のスライスやスタイルシートのコーディング作業がググッと楽になるWin/Mac/Linux対応のアプリです。 正式版で、特に大きく変わったのがデザイナー用簡単GitHub。これは無料で単体利用できる機能で、PSDファイルの共有やリビジョン管理が非常に簡単にできます。 ベータ版の時から、そして正式版がリリースされてからみっちりと試したので、Avocodeの使い方や登録方法を紹介します。 Avocode Avocodeには無料と有料のプランがあり、有料プランの優待コードがコリスのビジター限定でもれなく使用できます。無料プランだけを使ってもよし、有料プ
deSVG
deSVG Remove inline SVG bloat from your HTML document. Style SVGs with CSS. SVGs still accessible without JavaScript. What does it do? deSVG takes the <img /> tags you supply. It then grabs, using AJAX, the raw SVG you've set in the "src" attribute and replaces that <img /> with the <svg /> it downloads. Include the JavaScript file on your page <script src="path/to/desvg.js"></script> Kick off deS
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
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
::beforeによる(画像)置換の終焉
なんだか最近のGoogleのペンギン先生は::beforeや::after擬似要素で仕込まれるモノもバッチリ解釈するとかいう噂(本当か嘘かは知らない)を聞いた。スクリーンリーダーも読んじゃうらしい。ここのロゴは::before擬似要素でHを一文字挿入して実現していたので、もし解釈されるとなるとウェブサイトのタイトルが「Hhail2u.net」になってしまう。 特に::beforeや::after擬似要素に限った話ではなく、古き良きtext-indentプロパティーによるものやattr()関数とかでも問題が起こるという話だと思うので、画像置換とその類のテクニックはもう本格的にアレな時代なのかもしれない。別の方法を……といってもCSSが解釈されて隠したり改変したりするのもチェックしてるという話なので、CSSでどうにかしようというのは無理がある。::before擬似要素でcontentプロパティ
The Graphical Web Experiment | Web Platform Team Blog
The Quest for the Graphical Web was an experimental presentation we put together to tell the story of how the web is evolving from a graphical perspective. You can watch the full recording of the presentation from the Create the Web event. A web version can be viewed online at thegraphicalweb.com. We’ve also open-sourced the presentation on github. For the presentation we wanted to show some key
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Motion Path - Chrome Platform Status
Animated Text Fills - SVG text with animated dashed stroke pattern