Tvorba webových stránek
Myslíme na Vaše návštevníky
zákazníky
zákazníky
Pomocí CSS lze obyčejné odkazy velmi snadno přeměnit na velmi
efektní trojrozměrné buttony.
Menu založené na CSS má jedinou nevýhodu - hůře
se adaptuje pro weby s velkým počtem stránek. Na webových stránkách časopisu EJE jsme tento problém řešili pomocí
podmenu specifických pro určitý okruh stránek.
Základem je nastavení barev tak, aby tlačítka vzbuzovala plastický dojem. Hypotetický směr osvětlení je z levého horního rohu. U vystupujícího tlačítka jsou proto levá a horní hrana světlejší než plocha tlačítka a ta je opět světlejší než pravá a horní hrana. Stisknuté tlačítko splývá s podkladem. Pokud by podklad nebyl tak tmavý, bylo by možné vzbudit dojem zamáčknutí nasvětlením pravé a dolní hrany tlačítka.
Příklad menu: |
HTML definice:
<p class="tlacitko">
<a title="..." href="...">
Tvorba www stránek
</a>
</p>
<p class="tlacitko">
<a title="..." href="...">
Tvorba webových stránek
</a>
</p>
<p class="tlacitko">
<a title="..." href="...">
Tvorba internetových stránek
</a>
</p>
<p class="tlacitko">
<a title="..." href="...">
Tvorba webu
</a>
</p>
|
CSS definice:1. Je třeba definovat třídu tlačítka odstavec <p> vytvářející tlačítko a v něm obsaženou kotvu <a>.Vlastnosti které bude mít odstavec <p> s vystupujícím tlačítkem:
.tlacitko P {
padding: 0px;
margin: 0px;
width: 118px;
}
Společné vlastnosti defnované pro vystupující i zmáčknuté tlačítko:
.tlacitko, .tlacitkoPressed {
font-weight: bold;
text-align: left;
padding-bottom: 10px;
margin-top: 0px;
width: 118px;
}
Vlastnosti odkazu ve vystupujícím tlačítku:
(nastavení barev v border zajišťuje požadovaný plastický efekt)
.tlacitko A, .tlacitko A:visited {
padding: 2px 0 2px 4px;
text-decoration: none;
display: block;
color: #224059;
background-color: #ddeeff;
border-top: 3px #e0e0ff solid;
border-left: 3px #e0e0ff solid;
border-bottom: 4px #31557f solid;
border-right: 4px #31557f solid;
width: 118px;
}
Vlastnosti odkazu ve zmáčknutém tlačítku:
.tlacitkoPressed A,
.tlacitkoPressed A:visited {
display: block;
padding: 2px 0 2px 4px;
text-decoration: none;
background-color: #000077;
border-top: 4px #000077 solid;
border-left: 4px #000077 solid;
border-bottom: 3px #000077 solid;
border-right: 3px #000077 solid;
color: #ffffff;
width: 118px;
}
Vlastnosti odkazu, nad kterým je kursor myši:
.tlacitko A:hover,
.tlacitkoPressed A:hover {
color: #ffffff;background-color: #7ea8cf;
border-top: 3px #e0e0ff solid;
border-left: 3px #e0e0ff solid;
border-bottom: 4px #31557f solid;
border-right: 4px #31557f solid;
text-decoration: none;
}
.tlacitkoPressed A:hover {
background-color: #000077;
border-top: 4px #000077 solid;
border-left: 4px #000077 solid;
border-bottom: 3px #000077 solid;
border-right: 3px #000077 solid;
}
|
CSS pochopitelně neumí poznat, které tlačítko je zrovna zmáčknuté. Problém lze řešit následovně: