Následující vlastnosti slouží jen k "ozdobení", zpestření stránek, navíc fungují jen v některých prohlížečích (nebo jejich verzích).
Přechody stránek
Přechody stránek jsou zajímavým efektem, který se projevuje při otevření stránky nebo přechodu na jinou stránku (zavření stránky). Mezistránkové přechody zajistí parametry v tagu META v hlavičce stránky (.html):
Pro mezistránkový přechod stačí do hlavičky stránky (určitě už nějakou máte) doplnit:
<head>
<meta http-equiv="Page-Enter"
content="revealtrans(duration=3.0, transition=23)">
<meta http-equiv="Page-Exit"
content="revealtrans(duration=3.0, transition=23)">
</head>
Řádek s Page-Enter zajistí přechod při otevření stránky, řádek s Page-Exit při odchodu ze stránky. Dalšími parametry jsou:
duration - délka přechodu v sekundách, transition - typ přechodu
Typů přechodů je 24 (čísla od 0 do 23), například:
0 = do čtverce, 1 = ze čtverce, 2 = do kruhu, 3 = z kruhu, 4 = zespodu, 5 = shora, 6 = zleva, 7 = zprava .... 12 = zrnění, ... 15 = vodorovně do středu, .. 18 = zuby zprava dolů, 23 = náhodný efekt
Další dvě "ozdůbky" je možné využít jen díky stylům, v samotném html je nebylo možné na stránky vložit.
Rolovací lišta
Pro obarvení rolovací lišty stačí do stylu tagu body (v css) doplnit následující vlastnosti (styl pro body už určitě máte, takže jen doplnit), změnami barev si vyzkoušejte, které části lišty lze obarvit:
body {
scrollbar-track-color: silver;
scrollbar-face-color: blue;
scrollbar-highlight-color: color;
scrollbar-3dlight-color: green;
scrollbar-darkshadow-color: black;
scrollbar-shadow-color: purple;
scrollbar-arrow-color: red;}
Vlastnost cursor
Pokud jste na některých stránkách narazili na netradiční kurzor, bylo opět využito stylů, konkrétně vlastnosti cursor, kterou je možno použít pro kterýkoliv element stránky. Uvedený příklad zajistí, že se při najetí myšky na nadpis h1 změní kursor na "křížový".
h1 {cursor: crosshair;}
Kromě uvedeného kurzoru ve tvaru kříže (crosshair) je možné využít například tyto další předdefinované hodnoty:
pointer - ukazovátko označující odkaz
move - kurzor naznačující přesun objektu
e-resize - kurzoz pro přesun východní hrany prvku (podobně ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize)
text - textový kurzor
wait - přesýpací hodiny
help - kurzor pro nápovědu
Pokud vám nestačí tyto předefinované hodnoty, můžete použít i jiné typy obrázkových kurzorů - souborů s příponou .cur, .csr nebo .ani, pokud k nim uvedete cestu:
a:hover {cursor: url(3dwno.cur);} - jako kurzor se použije obrázek 3dwno.cur při "najetí" myši na odkaz
Úkoly:
Úkol (2 body):
Doplň mezistránkový přechod na svůj index a některou další stránku.
Úkol (2 body):
Obarvi rolovací lištu například indexu vhodnými barvami (esteticky :-) ).
Úkol (2 body):
Například pro menu na svém indexu zkus nastavit obrázkový kurzor (můžeš použít kurzory, které našel J. Provázek ze složky Y:\HTML\tvorba www\kurzory).
| Název školy: | Základní škola, Hradec Králové, M. Horákové 258 |
| Název projektu: | EU peníze školám |
| Číslo projektu: | CZ.1.07/1.4.00/21.2575 |
| Téma: | Tvorba WWW stránek |
| Název: | VY_32_INOVACE_23_10B_tvorba www23 |
| Autor: | Pavel Petr |