CSS ikony

Chceme-li stránkou obohatit a zpřehlednit ikonami, existují různé možnosti:

  • Použít běžný obrázek (ideálně jako CSS sprite).

  • Použít tzv. font icons (ikony z písma). To funguje tak, že se na stránku připojí speciální font, který místo běžných znaků obsahuje grafické symboly ikon.

  • Nakreslit ikonu přímo v CSS.

Obecné techniky kreslení v CSS už jsem popisoval. Při tvorbě CSS ikon je jen stačí vhodně kombinovat.

U složitějších podob ikon, kde je potřeba více elementů, si lze vypomoci přes :before/:after. A ušetřit tím pár značek, které by jinak musely být v kódu.

Z jednoho elementu tedy můžeme udělat tři, případně přidat další element a získat tak šest částí, což už stačí i na složité výtvory. Ne jen primitivní šipku.

Výhody a nevýhody

Výhody ikonek v CSS jsou:

  1. šetření HTTP požadavků (stačí přidat do CSS definici ikon, nic dalšího se nemusí stahovat),
  2. snadná změna barev a rozměrů bez ztráty kvality (pokud s tím ikonky počítají).

Jako nevýhody lze považovat:

  1. Komplikovanější upravování a rozšiřování. Je jednodušší překreslit obrázek, než laborovat s CSS v :before a :after elementech a obávat se limitu daným počtem elementů pro ikony stanovených.

  2. Slabší podpora některých pro kreslení podstatných CSS vlastností (například kulaté rohy). Plnohodnotnou podobu je reálné očekávat až od IE 9.

  3. Další věc je datová velikost. Při komplikovanějších podobách využívajících lehce nestandardní CSS vlastnosti, může být CSS kód ikony zaneřáděn duplicitními deklaracemi lišící se jen prefixy. A ve výsledku tak být objemnější než běžný obrázek.

  4. Nakonec bude u CSS ikon mnohem slabší výběr hotových setů ikon rovnou k použití.

Hotové ikony

Odkazy na zajímavější kolekce CSS ikon.

UIPlayGround CSS 3 Icons

Web

UIPlayGround CSS 3 Icons

Odkazy jinam

SVG ikony

Font ikony

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Centrování v CSS

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Zobrazení popisku při najetí myší

Popisek po najetí myší

Kterak zobrazovat obsah v tooltipu po najetí myši.

Vícenásobné CSS pozadí

Více obrázků na pozadí

Jak v CSS jednomu elementu přiřadit více obrázků na pozadí.

Komentáře