Jak si udělat hezky barevné tlačítko pomocí CSS - Builder.cz - Informacni server o programovani

13. září 2001, 00.00 | Dnes si ukážeme jako pomocí CSS obohatit své formuláře o barevné prvky. Pokud máte pocit že standardní formulářové prvky kazí vzhled vašich stránek, čtěte tento článek!

CSS je mocný nástroj při tvorbě stránek a můžete pomocí něj definovat zobrazení téměř libovolných prvků na stránce. O tom se tady zmiňovat nebudu, to se ostatně můžete dočíst v učebnici CSS.

Nejdříve bych vás chtěl upozornit, že pro dobré pochopení toho, co píši je třeba mít alespoň základní znalosti CSS a slušné znalosti HTML. Pokud nic z toho neumíte, nevadí, na konci stránky si můžete stáhnout hotové stránky, které pak můžete použít pro své další.

Úmyslně jednotlivé styly neaplikuji na všechny formulářové prvky na stránce (byla by to zbytečná práce, každý to ze tří příkladů pochopí), ale to lze snadno změnit a prohlédnout si to můžete, jak jsem již říkal, v přiložených dvou stránkách.

Jak na to

Málo lidí ví, že pomocí CSS lze také měnit zobrazení formulářových prvků (tlačítka, vstupní pole atd...). Často mi vadí, když jsou stránky hezky barevné, ale barva formulářových prvků prostě do stránek nezapadne. Někdo řekne, že je to zbytečnost, ale když to jde, tak proč to nevyužít. Na stránkách jsem viděl daleko větší zbytečnosti a takové tmavě modré tlačítko na světle modrém pozadí vypadá nejen hezky, ale působí i profesionálně.

Tlačítko

Co jsem říkal nyní zkusíme na tlačítku. Nejdříve definuji styl a pak jednotlivé části stylu vysvětlím:

font-family -- Hodnotou je seznam názvů rodin písem a je uspořádán podle priority. Klient by pokud možno měl první uvedenou rodinu. Nemůže-li tak udělat, zkusí další uvedenou rodinu. Prvky seznamu jsou navzájem oddělovány čárkou.

Můžete uvést jména konkrétních rodin. V takovém případě však hrozí, že klient požadované písmo nenalezne, prot je dobré vždy jako poslední položku seznamu uvést jedno ze standardních jmen:

font-size -- Určuje velikost písma. Stupeň lze zadat absolutně nebo relativně. Pokud zadáte velikost relativně, můžete jako u HTML použít:

Určení relativní velikosti můžete i procentem, pak zadáte procentuální odlišnost velikosti písma od velikosti písma okolí. Absolutní určení písma je snadné a nejjednodušší definování je pomocí obrazových bodů (px).

background-color -- určuje barvu pozadí.

border-color -- barva "orámování prvku", tzv. barva okrajů.

text-align -- určuje způsob zarovnávání textu v prvku.

color -- barvu pozadí textu prvku.

No a nyní zkusím aplikaci na tlačítko. Do stránky tedy vložím tlačítko a pomocí atributu class mu přiřadím styl:

Upravujeme vstupní pole

Tlačítko není jediný formulářový prvek, na který CSS lze použít, můžete zkusit třeba ještě vstupní pole. Pro něj však styl trochu upravíme:

Jak vidíte, styl jsem trochu pozměnil. Změnil jsme barvu okrajů, barvu písma (bílá) a písmo jsem zvětšil z 11px na 12px. Zvětšení písma způsobí, že input pole bude o 1px větší než tlačítko. Nevím jak vám, ale mně se to tak to líbí.

Ještě zkusíme aplikaci na obyčejný seznam:

Chtěl bych se omluvit za možnou pošetilost v kombinaci barev, ale já barvám skutečně nerozumím, tak mi to prosím omluvte, stejně si barvy budete muset doladit.

Ke stažení tu mám pro vás dvě stránky. Na té jedné jsou všechny formulářové prvky (tedy i ty, které jsem zde nepopsal) a na druhé stránce je skript, dotazník, který odešle ze stránky na vaší e-mailovou adresu text od návštěvníka stránky.