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

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



Web

Jak si udělat hezky barevné tlačítko pomocí CSS

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:

<style>
<!--
.tlacitko
{
font-family : Arial, Sans-Serif;
font-size : 11px;
color : black;
border-color : #6699cc #6699cc #6699cc #6699cc;
background-color : #6699cc;
text-align: center;
}
-->
</style>

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:

Název

Popis

serif patkové písmo
sans-serif bezpatkové písmo
cursive ozdobná kurzíva
fantasy ozdobné písmo
monospace neproporcionální písmo
Obecné rodiny písem

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:

larger - větší
smaller - menší

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:

<input type="button" value="Button" name="B1" class="tlacitko">

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:

<style>
<!--
.input
{
font-family : Arial, Sans-Serif;
font-size : 12px;
color : #FFFFFF;
border-color : #408BFD #CADDF4 #CADDF4 #408BFD;
background-color : #0b4c9c;
text-align: center;
}
-->
</style>

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í.

<input type="text" name="T1" size="20" class="formular">

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

<style>
<!--
.seznam
{
font-family : Arial, Sans-Serif;
font-size : 12px;
color : black;
border-color : #408BFD #CADDF4 #CADDF4 #408BFD;
background-color : #D6D7B0;
text-align: center;
}
-->
</style>

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.

Tématické zařazení:

 » Rubriky  » Web  

 » Rubriky  » HTML  

Poslat článek

Nyní máte možnost poslat odkaz článku svým přátelům:

Váš e-mail:

(Není povinný)

E-mail adresáta:

Odkaz článku:

Vzkaz:

Kontrola:

Do spodního pole opište z obrázku 5 znaků:

Kód pro ověření

 

 

 

 

Nejčtenější články
Nejlépe hodnocené články

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: