ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近はアイコンを画像で提供することが少なくなってきています。バイナリなのでサイズの可変に弱く、サイズも大きくなりがちです。そこで使われるのがWeb Fontなのですが、こちらもちょっとした内容なのにサイズが大きくなってしまいがちです。

そこで使ってみたいのがlittleboxです。スタイルシートだけで作られたシンプルなアイコン集です。

littleboxの使い方

例えばこんなアイコン群。一部はアニメーションもあります。
例えばこんなアイコン群。一部はアニメーションもあります。

旗のアイコン。
旗のアイコン。

決済系アイコンもあります。
決済系アイコンもあります。

littleboxは一つのクラスですべてを表現しているのではなく、例えばカメラの場合は .lb-camera で四角を描き、:beforeと:afterで他の部品を描いています。そのためアイコンの色を変える場合は、

.lb-*, .lb-*::before .lb-*::after {
     border-color: /*YOUR COLOR HERE*/
}

のようにして定義する形になっています。もちろんhoverなども使えますのでlittleboxだけでアニメーションも行う機能性あるアイコン集になることでしょう。

littleboxはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。

littlebox

cmaddux/littlebox

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2