タグ

ブックマーク / asachun.hateblo.jp (1)

  • SVGのオブジェクトごとにCSSで色を切り替える - わすれたあかんえ

    デザインpsdを見ながらhtmlでコーディングするとき、たくさん画像を書き出しますよね。 たとえばpngのアイコンを作る場合、形が同じでも色が違えばpngファイルをたくさん書きださなければいけません。色だけ変えたものをひとつずつ、@2xサイズも用意してちまちまと……書き出して…… やってらんないっすよ! せめて、形が同じなら使いまわしたい…… そう!SVGを使えば、同じオブジェクトを使ってCSSで色だけ変えたものを量産できるのです! 「それだったらwebフォントでいいじゃん」と思われるかもしれませんが、webフォントはアイコンひとつにつき1色しか使えませんよね?SVGでやればアイコンひとつでも複数色使うことができます。 このSVGアイコンを使いまわして、 こんなかんじでカラフルなアイコンを量産しますよー! ベクターでアイコンを作成 アイコン作るのがめんどくさい人はicomoonから適当なア

    SVGのオブジェクトごとにCSSで色を切り替える - わすれたあかんえ
    zmzizm
    zmzizm 2017/08/16
    svg
  • 1