littlebox

CSS

CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

littleboxは画像を用いずにCSSだけで作られたシンプルなアイコンセットです。どれも小さくて可愛らしいデザインが特徴的で、使い方も非常に簡単。国旗のアイコンなんかも用意されています。

littleboxの使い方

このようなアイコンをCSSだけで表示させることができます。

littleboxのアイコン

以下は国旗のアイコンです。

国旗のアイコン

中にはアニメーションが付いているアイコンもあったりしておもしろいですね。

littleboxの使い方は、まずダウンロードしたCSSファイルをhead内に読み込みます。

<link rel="stylesheet" type="text/css" href="lib/littlebox.min.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css" />

そして以下のようにアイコンをマークアップすればOKです。

<div class="lb-icon lb-*"></div>

「*」の部分は各アイコンによって異なります。littleboxのページで自分が使いたいアイコンにマウスオーバーして確認することができます。

実際に使ってみましたがとても簡単に実装することができるので手間もかからずいい感じでした。CSSのクラス名を変更するだけでアイコンを気軽に変えることができるので管理もしやすいと思います。

アイコン自体もシンプルなのでどんなサイトにも合いそうですね。

littlebox

jQuery Hero Slider Pluginダイナミックなスライドが印象的なレスポンシブ対応スライダー「jQuery Hero Slider Plugin」前のページ

CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方次のページCSSで文字の長さに合わせる

最近の記事

  1. クリスマスブレンド エスプレッソロースト
  2. CIO Mate Magnet Stand
  3. 抹茶クリームドーナツ
  4. FAST
PAGE TOP