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. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  2. CSS

    よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

    blockquoteのデザインって色んなパターンがあって面白いですよね…

  3. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  4. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  5. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  6. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

最近の記事

  1. シービージャパン 耐熱ボウル
  2. メンソレータム リップスティック
  3. スイデンテラス 濃厚バターチキン
  4. ドトール マンデリン
  5. 厚切りトーストツナチーズメルトとブラックコーヒー

アーカイブ

PAGE TOP