タグ

htmlと加工に関するjed_leeのブックマーク (1)

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

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

    SVGのオブジェクトごとにCSSで色を切り替える - わすれたあかんえ
    jed_lee
    jed_lee 2017/09/18
    スプライト限定だが、svg内の各オブジェクトへカラーリング指定をするcssの記述方法。条件やイベントで切替えたい時に有効。デザインフェーズでの効率化も併せて導入できればベター。
  • 1