SVGでテキストにマーカーを引いたり、くるっと丸く囲む超軽量JavaScriptライブラリ -Rough Notation
テキストに蛍光ペンで引いたようなマーカーを引いたり、下線をつかたり、丸や矩形で囲ったり、さまざまなスタイルでテキストを強調表示できる超軽量（3.63Kb）のJavaScriptライブラリを紹介します。 アニメーションにも対応しており、マーカーをさっと引いたり、丸でくるっと囲んだりも簡単に実装できます。アニメーションはオフにすることもできます。 Rough Notation Rough Notation -GitHub Rough Notationの特徴 Rough Notationのデモ Rough Notationの使い方 Rough Notationの特徴 Rough NotationはRoughJSを使用して、SVGでマーカーを引いたり、下線をつけたり、丸で囲ったり、さまざまなスタイルでテキストを強調表示できます。マーカーや下線や丸はアニメーションにも対応しており、オフにすることもで
CSSで絵が描ける！コード入力によるアニメーションやパララックス付きSVG風景イラスト12選
speckyboy Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web. SVGとは画像形式の１つで、おなじみのJPG形式やPNG形式と違い、２次元ベクターなので拡大縮小しても画質が落ちないというメリットがあります。また、XMLというマークアップ言語で記述されるため、テキストとしてテキストエディタで編集できるのが特徴です。 このSVGをwebデザインに応用すると、かなりクレイジーなことができてしまいます。なんと、ページにコードを書くだけで、画像ファイルを用意することなくイラストやアニメーショ
imgタグで設置したSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリ「deSVG」
deSVGは、imgタグで設置しているSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリです。 SVGの色をCSSで変更しようと思った場合、imgタグで設置されているSVGファイルは変更できず、インラインSVGとしてHTMLにコードが記述されている必要があります。 ですが、SVGのコードは非常に長くなる場合もあり、HTMLに直接記述するのは嫌だなーと思うかもしれません。そんな時はdeSVGを使えば、HTMLにはimgタグとして記述し、ページが読み込まれた時にインラインSVGに変換するといったことが可能になります。 例えば、以下のようにimgタグでsample.svgを読み込んでいたとします。 <img src="sample.svg" alt="" class="svg"> deSVGを使うと、以下のようなインラインSVGに変換することができます。 <svg i
SVGによるドーナッツ状（円形）のチャートを実装できる「donutty」 – bl6.jp
donuttyはSVGによるドーナッツ状（円形）のチャートを実装できるJavaScript（またはjQuery）ライブラリです。アニメーション付きで、チャートを読み込んだ時にあらかじめ指定されている数値までメーターが伸びていきます。チャートサイズやメーター幅などいろいろなカスタマイズも可能です。 data要素かJSオプションで数値を指定 donuttyの実際のデモ動作やコードの記述例は以下のページから確認できます。 デモ デモではたくさんのタイプの円形チャートが用意されています。メーターが細いものや太いもの、カラーやサイズが異なるものなど、カスタマイズ次第でさまざまなチャートを作れちゃいます。 ページ読み込み時にメーターが伸びていくアニメーションが付いているので、ユーザーに注目してもらうことも可能です。 デザインもシンプルで、余計な装飾もなくとても見やすいチャートに仕上がっています。デモに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
