Tipy na moderní web: Font Awesome, šipky pomocí CSS

Wed, 17 Dec 2014 17:22:12 +1100

Webdesign je oblast, která se pořád vyvijí a pokud chce člověk držet krok, je potřeba stále studovat nové technologie a využívat vše, co nám nynější prohlížeče dovolí. V dnešním článku si ukážeme jednu kodérskou vychytávku, a to, jak vytvořit jednoduché šipky pouze pomocí css. V druhé části představím piktogramové písmo Font Awesome spolu se stručnou ukázkou použití.

Šipky pomocí kaskádových stylů

Šipky různých barev a velikostí najdeme dnes téměř na každém webu. Zvyšují přehlednost a obecně se těší oblibě grafiků. Jako nejsnazší řešení ve smyslu "hlavně ať už to mám hotové" se nabízí jednoduše uložit šipku do obrázku a nastavit na background-image odkazu. Jenže takový postup se nám dříve nebo později vymstí. Pamatuji si projekt, kde bylo navrženo asi pět různých barevných modifikací šipky, každá ve dvou velikostech. Nebyl čas ani prostor na experimentování, a tak jsem si vše uložil do png. Web byl hotový a začlo ladění pro mobilní zařízení. A můj domeček z šipek se rozbil. Mít tehdy trochu více času, vyřešil bych zvýraznění odkazů jako nyní, pouze přes styly.

Nejdříve se podíváme na ukázku: sipky.html

Na první pohled se může zdát, že je tam toho kódu trochu hodně, jenže tady se díváme na řešení, které je nachystané pro copy+paste na další projekt.

Při stylování využijeme pseudo-třídu *:before a *:after, díky které nebudeme muset zanořovat žádné další spany či podobný nepořádek; HTML kód bude čistý. Samotnou šipku pak vytvoříme rámečkem, a to kombinací border-color a border-width. Při správné definici barvy respektive šírky pro rámeček horní / pravý / spodní / levý pak vznikne trojúhelník.

Jednoduchá šipka

a.shipka-next {display:inline-block;color:#007bff;}
a.shipka-next:after {width:0;height:0;content:' ';display:inline-block;margin-left:5px;
	border-style:solid;
	border-width:5px 0 5px 5px;
	border-color:transparent transparent transparent #007bff;
}

Úplná šipka

Pro celou šipku využijeme oba pseudo-elementy, z nichž jeden bude trojúhelník přes rámečky a druhý pouze vybarvený obdélník.

a.shipka-next-adv {display:inline-block;position:relative;color:#ff0022;margin-right:18px;}
a.shipka-next-adv:before {content:' ';position:absolute;top:50%;right:-12px;margin:-2px 0 0 0;height:4px;width:7px;background:#ff0022;}
a.shipka-next-adv:after {content:' ';position:absolute;top:50%;right:-16px;margin:-5px 0 0 0;width:0;height:0;
	border-style:solid;
	border-width:5px 0 5px 5px;
	border-color:transparent transparent transparent #ff0022;
}

Hover

Změna barvy na hover je pak velice jednoduchá. Jenom změníme color, border-color a background-color. U border-color pak samozřejmě pouze ten směr, který je nadefinovaný pro danou šipku. (Pořadí je horní - pravý - spodní - levý, stejně jako u marginu či paddingu).

a.shipka-next:hover {color:#0000b3;}
a.shipka-next:hover:after {border-left-color:#0000b3;}

a.shipka-next-adv:hover {color:black;}
a.shipka-next-adv:hover:before {background:black;}
a.shipka-next-adv:hover:after {border-left-color:black;}

Generátor CSS tvarů

Na chvíli se ještě vrátím k šipkám. Pamatovat si, jak přesně nastavit border-color a border-width abychom docílili patřičného tvaru není úplně v lidských silách, ale naštěstí existuje chytrý generátor, který styly vytvoří za nás. Stačí zazáložkovat a ušetříme si spoustu času při kódování grafiky.

CSS triangle generator

Pokud by nám trojúhelníky nestačily, můžeme použít některý z příkladů na stránkách "The Shapes of CSS". Space Invader sice není něco, co bychom chtěli mít na firemním webu, ale vědět, že i takového zobrazení lze docílit se někdy může hodit :-)

The Shapes of CSS

Font Awesome

Font Awesome je písmo vektorových ikon, díky kterému můžeme mít stránky zase o něco lepší. Opět nám ušetří hromady obrázků, kde za použití CSS a knihovny piktogramů dostaneme přístup k rozumnému množství ikonek. Takové ty jako email (obálka vedle odkazu), telefon (ikonka vedle telefonu), uživatel (človíček vedle odkazu na profil) a spoustu dalších.

Na této url si můžeme stáhnout celý balík včetně předdefinovaných tříd pro CSS a samotného fontu: fortawesome.github.io/Font-Awesome/. Výchozí použití je poměrně jednoduché, podíváme se na seznam dostupných ikonek a danému elementu nastavíme tu správnou třídu: astronautweb.co/snippet/font-awesome/.

Font Awesome @ GitHub
Font Awesome icon list

Doporučené použití

Na výše uvedených odkazech najdeme vše, co je potřeba pro nasazení Font Awesome. Balík také obsahuje i poměrné velké CSS se všemi třídami a zde začínají problémy. Sám nerad používám hotová řešení, kde nemám jistotu, že se mi někde něco nerozbije... Přeci jen pokud se nejedná o jQuery, na kterou se lze spolehnout, nikdy nemáme jistotu, že se nějaké definice nezačnou hádat. Proto doporučuji zjednodušenou implementaci.

Nejdříve nadefinujeme font:

@font-face{
	font-family:'FontAwesome';
	src:url(fonts/fontawesome-webfont.eot);
	src:url(fonts/fontawesome-webfont.eot?#iefix) format('eot'),
		url(fonts/fontawesome-webfont.woff) format('woff'),
		url(fonts/fontawesome-webfont.ttf) format('truetype'),
		url(fonts/fontawesome-webfont.svg#fontawesome-webfont) format('svg');
	font-weight:normal;
	font-style:normal;
}

A následně si nastavíme pouze ty třídy, které reálně využijeme:

.awesome-ico:before {display:inline-block;font:15px/15px FontAwesome;padding-right:10px;color:#000;vertical-align:middle;}
.awesome-ico.email:before {content:'\f0e0';}
.awesome-ico.phone:before {content:'\f098';}
.awesome-ico.user:before {content:'\f007';}