Průhledné pozadí formulářových prvků v IE

Nastavit libovolnou barvu pozadí formulářového prvku již umíte. Víte ale, že jednoduchým trikem můžete vytvořit průhledné formuláře? Internet Explorer v případě, kdy nastavíte pozadí formulářového prvku na průhledný obrázek (průhledný gif), zobrazí prvek tak, že přes něj prosvítá pozadí…

Mnohem lepšího efektu však dosáhnete, pokud si vytvoříte vlastní obrázek, kterým vhodně doplníte konturu pole formuláře, a s využitím filtru opacity nastavíte určitou průhlednost celého pole formuláře (obrázek sám tedy nebude průhledný, může to být i JPEG). Tak je možné vytvořit stránku s jemným designem, který nebudou hyzdit tvrdé hrany políček formuláře, podívejte se na ukázku.

Výhodou tohoto řešení je, že formulář vypadá do jisté míry podobně i v Mozille 1+ a Netscape 6+. Tyto prohlížeče již podporují nastavování pozadí formulářových prvků, takže jediným chybějícím efektem bude průhlednost. Grafické filtry bohužel podporuje pouze MSIE.

Ukázka obrázku vhodného do pozadí formuláře:

Obrázek musí být delší než nejdelší textové políčko a větší nebo právě tak velký jako pole textarea, pro které ho chcete použít.

Vzor stylopisu políčka formuláře:

K dispozici je rovněž kompletní zdroj ukázky.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.