ipsace i tiskace

Úvodem musím upozornit, že Zákon o ochraně olympijských symbolik č. 60/2000 Sb zakazuje používat slovo olimpyjský s původním pravopisem y/i, proto tento původní pravopis nebudu již více psát. Mám zde totiž reklamu bloguje.cz, která není omezena pouze na tzv. partnery olimpyjského výboru. A gůglátko je mrška, ti drábové od pěti kruhů si přes ně najdou každého.

Potřeboval jsem si vyrobit logo, kde bude nějak přeškrtnut olimpyjský symbol s pěti kruhy. Ovšem výše uvedený zákon zakazuje i toto, proto mě napadlo jiné řešení. Místo kruhů použít symbol dolaru či obecně peněz, který mnohem lépe vystihne novodobou olimpyjskou chartu.

Dolar vypadal blbě, zato euro (€) se ukázalo jako greficky velmi dobře zneužitelné. Původně jsem to chtěl dělat v grafickém editoru, pak mě ale napadlo, že existuje elegantnější cesta. CSS!

Logo jsem "namaloval" přímo v prohlížeči, pokochejte se:

K vytvoření tohoto uměleckého skvostu poslouží tento jednoduchý kód

Podívejme se, jak je to uděláno. Nápis je tvořen dvěma řádky. V horním jsou tři symboly eura, takto: €€€, v dolním analogicky dva. Abychom k sobě oba řádky přiblížili a vytvořili tím ono charakteristické "spletení", posuneme horní řádek výš. Celý text je zarovnán na střed, originální symbol je totiž také vycentrován. Teď to projdeme řádek po řádku kódu.

Celé je to umístěno v obalovém divu, který určuje společné parametry "loga". Ty jsou dány v inline stylu style="font-size:220px;letter-spacing:0.1em;text-align:center;. První vlastnost určuje, jak to celé bude velké. Zvolil jsem velikost písmene 220px, čili je to hodně velké. Protože všechno ostatní uvnitř obalového divu je určeno jednotkami em, přizpůsobí se mezery a ostatní proporce tomuto jedinému číslu. Vy si ovšem místo 220px můžete dát třeba 50px, co je malé, to je milé. Znám lidi, kterým by naopak nestačilo ani 580px, aby měli největší olimpyj... nebudu jmenovat :-)

Následuje záhadná vlastnost letter-spacing:0.1em;. Dal jsem ji tam proto, aby se vodorovné octupy "kruhů" trochu zvětšily. Lépe to pak odpovídá předloze. Kdybych tuto vlastnost vynechal, byly by kruhy blíže k sobě. Poslední vlastnost na řádku text-align:center; určuje, že se má text uvnitř celého bloku centrovat, důvod je zřejmý.

Druhý řádek kódu je už vlastní nápis. Řádek je tvořen divem. Nemusel by nutně být, ale z důvodů, které přesahují rámec spotu, jsem to celé dal do divu. Jediný problém, který se zde řeší, je obarvení písmen. Každé písmeno je dáno do řádkového elementu span. Jednotlivé spany jsou pak ostylovány vlastnostmi color: #xxx. Pozor, mezi spany nesmí být v kódu mezera ani přechod na nový řádek! Udělalo by to mezeru mezi "kruhy".
Ještě stojí za zmínku, že se vám možná nepovede do kódu napsat znak eura. Je to jednoduché, prostě použijte znakovou entitu €. Vypastujte si odtud, ale pozor. Sytém bloguje.cz mi neumožňuje to korektně zadat. Najeďte si myší sem a v bublině uvidíte to, co máte napsat.

Na dalším žádku kódu jsou spodní dva kruhy, které se proplétají s horními. Celý řádek se proto musí posunout výše. Nejjednodušeji to lze provést záporným marginem. Viz: style="margin-top: -0.72em;". Záporná hodnota řádek posunuje nahoru, kladná by jej posunovala dolů. Hodnotu 0.72em jsem určil empiricky, metodou pokus-omyl.

No a to je celé, zbývá je uzavřít obalový div. Teď můžete zkoušet různé psí kusy

příklady

Například je možné celý obrázek zmenšit a dát mu bílé pozadí, aby některý kruh nesplýval s barevným.

Můžeme to celé šoupnout ke straně a přeškrtnout, k čemuž se docela hodí lomítko. Aby mělo lomítko větší sklon, napíšeme ho kursívou. Lze to provést přes CSS, ale já jsem pro změnu použil element <i>/</i>. Opět je to v řádku, který má záporný margin, tentokrát vychází dobře hodnota margin-top: -0.96em;. Místo lomítka by se dalo použít třeba písmeno "X" nebo vodorovná pomlčka patřičně zvětšená, to nechám na vaší fantasii. Je to vlastně takový smajlík.

Zdrojový kód si zobrazte přímo na stránce.

Enjoy!