Na různých webech jsem viděla takový zajímavý efekt a tím je páska přes roh stránky. Marně jsem přemýšlela, jak je to udělané a říkala si, že na to asi nikdy nepřijdu. Jenže pak jsem se pustila do pátrání a zjistila jsem, že to je vlastně hrozně jednoduché. Tedy teoreticky. Chvilku mi to stačilo ke spokojenosti, ale dneska jsem chtěla něco s podobnou páskou zkusit. A tak jsem se pustila do bádání přímo na svém pokusném webu a pak protože se mi efekt líbil, tak jsem jej dala i semka. V akci jej ale uvidí jen přihlášení čtenáři místo zeleného nadpisu.
V čem je tedy ta veliká záhada tohoto efektu a celé jeho tajemství? V GIFu a jedné jeho vlastnosti a totiž průhlednosti jedné barvy. Nejprve je tedy potřeba si připravit obrázek, kde je namalovaná ona páska. Jakou bude mít barvu a jestli bude mít nějaké ozdoby není důležité. Co důležité je to, aby obrázek měl jednobarevný podklad a této barvě se pak nastaví průhlednost. Já to dělám třeba v programu Irfan View, ale umí to téměř všechny ostatní. Tedy krom Malování, které je součástí Windows. Alespoň těch mých, jestli to mají novější jinak, to nevím.
 Obr. 1 – obrázek s páskou, pravá varianta
 Obr. 2 – obrázek s páskou, levá varianta.
Když je obrázek hotový, je potřeba do CSS souboru vložit něco podobného tomuto zápisu:
.paskavlevo {position: absolute; top: 0px; left:50%; margin-left: -425px;}
.paskavpravo {position: absolute; top: 0px; left:50%; margin-left: +275px;}
Jinak řečeno, je potřeba obrázek prostě „napoziocovat“ na správné místo a umístit jej tam absolutně, aby byl tam, kde být má. No a pak ve vlastním HTML souboru se objeví třeba takovýto zápis:
<{if $xoops_isuser == true}>
<div class="paskavpravo"><img src="<{$xoops_imageurl}>images/paska_vpravo_zelena.gif" width="150" height="150" border="0" alt="Zelená páska" title="Zelená páska značí přihlášeného uživatele :-)"></div>
<{/if}>
A tím je páska na svém místě. Jednoduché a velmi efektní  Zde uvedené příklady jsou přímo z Žirafovin, pro svoje potřeby si je jistě snadno upravíte. Rozměry obrázku pochopitelně mohou být libovolné, nemusí to být mnou použitých 150 x 150 pixelů.
Při používání barev je třeba myslet na to, že pokud je jedna průhledná, je průhledná na celém obrázku, ne jenom na pozadí, takže pokud bude mít stejnou barvu třeba text, bude v pásce „díra“, čehož se ale dá s úspěchem použít na další zajímavé efekty.
Aktualizace ze dne 24. ledna 2016
Bohužel tu mám aktualizaci článku, neboli tiskovou opravu, protože jsem zjistila, že původní řešení dobře funguje v Opeře, Safari i Internet Exploreru, ale nefunguje ve Firefoxu.
Naštěstí jsem ale našla řešení, koukáním jinam , a to řešení je vlastně jednodušší, než jsem původně vymyslela.
Pozicování obrázku se nedá do CSS souboru, ale přímo do HTML souboru. Nějak takto:
<img src="<{$xoops_imageurl}>images/paska_vpravo_zelena.gif" style="position: absolute; top: 0; left:50%; margin-left: 275px;0;" width="150" height="150" border="0" alt="Zelená páska" title="Zelená páska značící přihlášeného uživatele :-)">
Vypadá to, že všechny moje prohlížeče ukazují stránku stejně, takže snad už to tak bude i jinde. Jednou se z té různé interpretace zdrojových kódů stránek v různých prohlížečích asi zblázním. Ale teďka mám radost, že se to povedlo i bez zbláznění
|
