Eroticky vlhký blog

Nebojte se, kromě toho nadpisu se spot bude týkat opravdu webdesignu. Co jsem myslel těmi zrezlými nadpisy můžete vidět v Blesku a nebo na následujícím obrázku.

Jak je toho dosaženo? Nadpis (h1, h2, atd...) je napozicován relativně a do něj je vložen prázný span, který je napozicován absolutně. Jako pozadí toho span-u, který nadpis překrývá je jako pozadí nastaven průhledný png nebo gif obrázek. "Špína je vytvořena barvou podkladu (background) toho nadpisu a ztytek je průhledný. Mrkněte na můj png nebo gif obrázek. Možností je více, záleží na vaší šikovnosti a fantazii.

Výhodou je, že text nadpisu zůstává textem a je ho možné generovat z databáze a vyhledávat přes Google. Nevýhody? Takový nadpis nemůže být odkazem. Mně to díky tomu, že absolutně pozicované prvky mají vyšší z-index tyto nadpisy nabourávají navigaci o kousek výše. Navíc tento exekt nefunguje v Opeře. Nelze použít tam, kde podklad nadpisu netvoří jednolitá barva. A o tom, že je pak nadpis hůře čitelný netřeba mluvit.

Pro ty, kterým nestačí výrobu tohoto efektu popsat takto z rychlíku, "výrobní postup" blíže rozepíšu. Dejme to mu, že to budete používat také na bloguje.
Nejprve si musíte upravit šablonu. Před text nadpisu je třeba vložit ten prázdný span. Což třeba pro hlavní nadpis znamená udělat toto:
<h1><span></span><$BlogItemTitle$></h1>
(pokud nemáte nadpis příspěvku jako H1 patřičně si to přizpůsobte a klidně můžete tento efekt aplikovat na více prvků, jen zvažte nevýhody o kterých jsem se zmínil výše).

A teď ještě spácháme odpovídající styly. U nadpisu uděláme všechna písmena velká, aby efekt pořádně vyniknul. takže bude vypadat zhruba takto:
h1 {color:rgb(225,130,0);font: 340%/100% "Impact","Arial Narrow",Arial,Helvetica, sans-serif;text-transform: uppercase;margin:0;padding:0;width:80%;position:relative;padding:.4em;} h1 span {position: absolute;background:url(grime.png);width:100%;height:100%;display:block;_background:url(grime.gif);}
Pro MSIE jsem použil gif, protože se zobrazováním průsvitných png-ů má problémy, ostatní použijí ten png, protože je kvalitnější. Takže asi tak. Pro jistotu článek nalinkuji i do lubriky "blog tunning". Slunce v duši :).

linkuj.cz vybrali.sme.sk