Vlajky států čistě s využitím CSS a jediného DIVu

Bez vlajek států se neobjede téměř žádný vícejazyčný web a mnohdy i běžné weby, které někam odkazují. Z toho důvodu by vás mohlo zajímat povedené řešení implementace vlajek na web, které spočítá jen a pouze v zápisu CSS k jediné HTML značce DIV.
reklama

Proč nepoužít obrázky? Inu, nenapadá mě pádný důvod, proč se vyhnout například ikonkám v SVG. Nicméně vezmeme-li v úvahu tradiční GIF nebo PNG, tak u nich je problém se škálovatelností a zachováním ostrého obrazu na Retina displejích.

U vektorové grafiky tvořené navíc jen odpovídajícím poskládáním prvků v HTML kódu, je vše ostré. A navíc je velice jednoduché prostě přiřadit nějakému DIVu příslušnou třídu a nechat CSS, ať vlajku vykreslí.

Co k tomu budete potřebovat? Vlajky států v CSS najdete na webu CSS Flags. Kouknete-li pozorně, najdete zde odkaz na Github, odkud si vše stáhnete.  Kvůli některým speciálním symbolům na vlajkách musel autor vytvořit vlastní font. Sada je zatím otestována v Safari a Chrome, ve Firefoxu se mi zdá také v pořádku. Tedy až na naši českou vlajku... Můžete ostatně vyzkoušet a posoudit sami.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru