, s určitým obsahom vo vnútri a tlačidlom „Zavrieť“, generovaným výlučne pomocou css.

Otvorené okno 1 Otvorené okno 2 Video v okne 3 Fotografia v okne 4

Vo vyššie uvedenom príklade kódu som kvôli prehľadnosti napísal stručné vysvetlenia do kontajnerov modálnych okien. Analogicky vám to zostane v div kontajner vyskakovacie okno, umiestnite akýkoľvek svoj obsah, či už je to jednoduchý text, obrázky alebo videá z akéhokoľvek zdroja tretej strany, YouTube, Vimeo atď. Odkazy na volanie modálnych okien, môžete vytvárať text alebo ich môžete navrhovať vo forme nádherných tlačidiel s prechodom, ako v príklade.

Krok 2. CSS

Ďalší krok, ktorý je najzaujímavejší, je dôležité pripraviť všetky potrebné štýly pre naše modálne okno, usporiadať vzhľad a pridať funkcie. Vynechal som základné štýly stránky, aby som sa nezamieňal, a kvôli prehľadnosti som niektoré pravidlá zriedil komentármi:

/ * Základné štýly zatemnenia a modálnej vrstvy * /. Prekrytie (hore: 0; vpravo: 0; dole: 0; vľavo: 0; z-index: 1; viditeľnosť: skrytá; / * pozadie zatemnenia * / farba pozadia: rgba (0, 0, 0, 0,7); krytie: 0; poloha: pevná; / * pevné umiestnenie * / kurzor: predvolené; / * typ kurzora * / -webkit -prechod: opacita .5s; -moz -prechod: nepriehľadnosť. 5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s;). Overlay: target (visibility: visible; opacity: 1;) .is-image (top: 0; vpravo: 0; dole: 0; vľavo: 0; displej: blok; okraj: auto; šírka: 100%; výška: auto; / * zaoblenie rohov vložených obrázkov * / -webkit -border -radius: 4px; -moz -polomer ohraničenia: 4 pixely; -ms-okrajový polomer: 4 pixely; polomer ohraničenia: 4 pixely;) / * vložené prvky m-médií, rámce * / vložiť, rám iframe (hore: 0; vpravo: 0; dole: 0; vľavo: 0; displej: blok; okraj: auto; minimálna šírka: 320 pixelov; maximálna šírka: 600 pixelov; šírka: 100%;). popup h1 ( / * nadpis 1 * / farba: # 008000; zarovnanie textu: vľavo ; text-tieň: 0 1 s x 3px rgba (0,0,0,, 3); písmo: 24px "Trebuchet MS", Helvetica, bezpatkové; font-weight: bold; ) .popup h2 ( / * nadpis 2 * / farba: # 008000; zarovnanie textu: vľavo; textový tieň: 0 1px 3px rgba (0,0,0, .3); písmo: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Formálne modálne štýly okien *** / .popup (hore: 0; vpravo: 0; vľavo: 0; veľkosť písma: 14 pixelov; z-index: 10; zobrazenie: blok; viditeľnosť : skrytý; okraj: 0 auto; šírka: 90%; minimálna šírka: 320 pixelov; maximálna šírka: 600 pixlov; / * pevné umiestnenie, okno je pri posúvaní stabilné * / pozícia: pevná; výplň: 15 pixelov; orámovanie: 1 pixelov plná # 383838; / * zaoblenie rohov * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; / * vonkajší box-tieň * / -webkit-box-tieň: 0 0 6px rgba (0, 0, 0, 0,8); -moz-box-tieň: 0 0 6px rgba (0, 0, 0, 0,8);- ms-box -shadow: 0 0 6px rgba (0, 0, 0, 0,8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0,8); box-shadow: 0px 0px 6px rgba ( 0, 0, 0, 0,8); / * úplná priehľadnosť okna, ktorá sa zobrazí po kliknutí * / krytie: 0; / * prechodový efekt (objaví sa) * / -webkit -transiti on: all easy .5s; -moz-transition: všetko ľahké .5s; -ms-transition: všetko jednoduché .5s; -o-transition: všetko ľahké .5s; prechod: všetko ľahké .5s; ) / * umožní zobrazenie okna a stmavenie pozadia * /. prekrytie: cieľ + .popup (hore: 20%; / * poloha okna v hornej časti stránky, keď sa zobrazí * / viditeľnosť: viditeľný; nepriehľadnosť: 1; / * odstrániť priehľadnosť * /) / * pomocou tlačidla zatvorenia * /. Zatvoriť (poloha: absolútna; horná časť: -10 pixelov; vpravo: -10 pixelov; výplň: 0; šírka: 20 pixelov; výška: 20 pixelov; orámovanie: 2 pixely plné #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba (61, 61, 61, 0. osem); -webkit-box-tieň: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; zarovnanie textu: stred; textová dekorácia: žiadna; font-weight: bold; výška riadka: 20 pixlov; / * nastavenie hodnôt a efekt prechodu na vznášanie * / -webkit -transition: všetko ľahké .8s; -moz-transition: všetko ľahké .8s; -ms-transition: všetko ľahké .8s; -o-transition: všetko ľahké .8s; prechod: všetko ľahké .8s; ). zatvoriť: pred (farba: rgba (255, 255, 255, 0,9); obsah: "X"; textový tieň: 0 -1px rgba (0, 0, 0, 0,9); veľkosť písma: 12 pixelov;) .close: hover (farba pozadia: rgba (252, 20, 0, 0,8); / * otočenie tlačidla pri vznášaní * / -webkit -transform: rotate (360deg); -moz -transform: rotate (360deg); - ms -transform: rotate (360deg); -o -transform: rotate (360deg); transform: rotate (360deg);) / * voliteľné pri pridávaní príloh * / .popup p, .popup div (margin -bottom: 10px;)

Ako môžeš vidieť Drahí priatelia, všetko je veľmi jednoduché a nedochádza k zbytočnému mišmašovi. Ak robíte všetko správne, dostanete do svojho arzenálu nádherné modálne vyskakovacie okno, do ktorého môžete umiestniť ľubovoľný obsah, či už je to textový obsah, fotografie, rôzne registračné formuláre a spätnú väzbu alebo video z akéhokoľvek zdroja tretej strany. Experimentujte s parametrami, upravte okno podľa svojho srdca a pokiaľ je to možné, podeľte sa o svoje osvedčené postupy a problémy, ktoré zrazu vzniknú, v komentároch.

V dnešnej dobe sú pre rôzne weby štandardom všetky druhy vyskakovacích modálnych okien - vyskakovacie okná - pre registráciu, autorizáciu, informačné okná, - všetky druhy tvarov a veľkostí. Okrem jQuery existuje aj obrovské množstvo doplnkov jednoduché a pohodlné vytváranie také vyskakovacie okná - napríklad ten istý Shadowbox.

Vzhľad, veľkosť a dizajn takýchto vyskakovacích okien sú úplne rozmanité - s prekrytím, tieňmi, animáciami - je čo počítať. To, čo ich spája, je možno skutočnosť, že sa zvyčajne zobrazujú v úplnom strede stránky - horizontálne aj vertikálne. Centrovanie sa vykonáva pomocou JS. Nebudem sa zaoberať podrobnosťami týchto výpočtov, opíšem ich len stručne:

Vyskakovací kód HTML má zvyčajne nasledujúcu štruktúru:

- Vyskakovacie okno s obsahom ->

A CSS ( tu a nižšie zámerne vynechám písanie niektorých vlastností, ktoré sú nevyhnutné iba pre niektoré prehliadače a ich verzie, pričom ponechám iba tie najzákladnejšie):

Popup__overlay (
poloha: pevná;
vľavo: 0;
hore: 0;
pozadie: # 000;
krycia schopnosť:, 5;
filter: alfa (opacita = 50);
z-index: 999
}
.objaviť sa (
poloha: absolútna;
šírka: 20%;
z-index: 1000;
orámovanie: 1px plné #ccc;
pozadie: #fff
}

JS určí prehliadač a verziu prehliadača a na základe toho vypočíta rozmery pracovnej oblasti a rozmery samotného vyskakovacieho okna (ak nie sú uvedené) a potom sa urobia jednoduché výpočty polohy jeho ľavého horného rohu. (vlastnosti css vľavo a hore pre .popup). Na zmenu veľkosti stránky reaguje aj mnoho doplnkov, ktoré to celé zakaždým prepočítajú tak, aby sa vyskakovacie okno nachádzalo presne v strede pracovného priestoru.

Som od prírody perfekcionista (viem, niekedy je to zlé) a často sa trápim aj kvôli malým detailom, snažím sa vylepšiť a dodať týmto detailom maximálnu možnú roztiahnuteľnosť a nemohol som si pomôcť, ale v tejto chvíli som závislý. v práci všetkých týchto doplnkov. Existoval nápad, že všetku prácu na umiestnení kontextového okna je možné presunúť z ramien JS na ramená samotného prehliadača, to znamená, že túto prácu je možné vykonať pomocou CSS.

To je to, čo urobíme.

Nasleduje príklad vyskakovacieho okna, ktoré funguje vo všetkých hlavných verziách veľkých prehliadačov. Aby to v IE správne fungovalo<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Máme teda stránku s tlačidlom, na ktorú by sme mali kliknúť a ktorá sa nám zobrazí modálne okno s určitými informáciami a všetok ďalší obsah by mal byť zatienený prekrytím.

Začnime s HTML kódom. Jeho štruktúra sa bude mierne líšiť od kódu uvedeného vyššie, prečo - viac o tom nižšie v článku; triedy prvkov zostanú rovnaké:

< div class ="popup__overlay">
< div class ="popup">

A niektoré CSS:

Popup__overlay (
poloha: pevná;
vľavo: 0;
hore: 0;
šírka: 100%;
výška: 100%;
z-index: 999
}
.objaviť sa (
}

Pevné veľkosti

Najľahšia možnosť. Nemusíte vymýšľať nič nové:

Objaviť sa (
vľavo: 50%;
horná časť: 50%;
šírka: 400px;
výška: 200px;
okraj -vľavo: -200px;
horný okraj: -100 pixlov
}

Negatívne okraje v polovici šírky a výšky sú triviálne a nudné, nie je na tom nič originálne.

Veľkosti kontextových okien závisia od obsahu

Po prvé, horizontálne zarovnanie sa zdá byť jednoduchšie. Ak má vyskakovacie okno pevnú šírku, bude stačiť nasledujúce:

Objaviť sa (
okraj: auto
}

Toto nijako neovplyvní vertikálne zarovnanie a mimochodom, ak potrebujete iba horizontálne zarovnanie, môžete sa tam zastaviť zadaním iného horného okraja kontextového okna. To nám však nestačí! Pohni sa.

Zvislé zarovnanie. Tu to začína byť zaujímavé. Tabuľka alebo emulácia tabuľky pomocou display: table & display: table-cell si s takouto úlohou samozrejme bez problémov poradila, ale robiť túto prácu v starom IE je drahšie. Stôl tiež zmizne - zo zrejmých dôvodov.

Okraj teda už chýba - nepoznáme veľkosti. Pripomeňme si, aké vlastnosti existujú s podobnými účinkami. Jasné, zarovnanie textu. Ale iba pre vložené prvky. OK. Zdá sa, že Boh sám nariadil použiť display: inline -block - prvok bloku, na ktorý by bolo možné použiť vlastnosti pre vložené prvky. S podporou tejto vlastnosti vo všetkých prehliadačoch je všetko, dalo by sa povedať, v poriadku. Kód sa stane niečím takýmto:

Popup__overlay (
poloha: pevná;
vľavo: 0;
hore: 0;
šírka: 100%;
výška: 100%;
z-index: 999;
zarovnanie textu: stred
}
.objaviť sa (
displej: inline -block;
vertikálne zarovnanie: stred
}

Zostáva zvislé zarovnanie - zvislé zarovnanie je pre nás v poriadku. V akejkoľvek inej situácii by bolo vhodné použiť aj výšku riadka, ale keďže nemáme pevnú výšku stránky (v tomto kontexte výšku riadka), nemožno ho tu použiť. Na záchranu príde jeden trik s vertikálnym zarovnaním prvkov neznámych veľkostí. Presne si pamätám, že som našiel túto metódu na Habrém, ale, bohužiaľ, som nenašiel odkaz na túto tému. Táto metóda spočíva v tom, že sa pridá prvok vloženého bloku s nulovou šírkou a 100% výškou nadradeného prvku, ktorý „rozšíri“ výšku riadka na 100% výšky rodiča, to znamená na výšku pracovnej plochy. stránky. Urobme to elegantnejším pomocou pseudoprvkov namiesto zbytočného označovania:

Popup__overlay: after (
displej: inline -block;
šírka: 0;
výška: 100%;
vertikálne zarovnanie: stredné;
obsah: ""
}

Zostáva pridať polopriehľadné prekrytie stmavením - rgba to zvládne. Všetko! Teraz je pozícia vyskakovacieho okna ovládaná iba pomocou prehliadača na úrovni CSS.

V tejto lekcii neprezradím tajomstvo pre skúsených dizajnérov rozloženia a guruov CSS, ale tento článok bude užitočný pre začiatočníkov. tu sa môžete dozvedieť, ako vytvárať kontextové okná na vrchu celého vášho webu.

Najčastejšie sa takéto okná zobrazujú po vykonaní určitých akcií na webe, napríklad používateľ klikne na odkaz „Požiadať o spätné volanie“ a pred ním sa objaví objednávkový formulár.

Je veľmi vhodné používať okná PopUp v spojení s ajaxom, ale toto je téma pre ďalšiu lekciu.

Na webe sa začína objavovať stále viac webových zdrojov, ktoré používajú vyskakovacie okná PopUp. Každý vie ako príklad. sociálne siete... Všetky nepotrebné údaje zo snímok obrazovky boli odstránené.

V kontakte s

Facebook

Twitter

Myslím si, že existuje dostatok dôvodov, prečo začať študovať otázku: Ako vytvoriť vyskakovacie okno PopUp na vašom webe.

Vyhlásenie o probléme (TOR)

V hornej časti celého webu je potrebné vytvoriť vyskakovacie okno so stmievacou obrazovkou.

Riešenie

Metóda 1

html

css

* (rodina fontov: Areal;) .b-kontajner (šírka: 200 pixelov; výška: 150 pixelov; farba pozadia: #ccc; okraj: 0 pixelov automaticky; výplň: 10 pixelov; veľkosť písma: 30 pixelov; farba: #fff;) .b-popup (šírka: 100%; výška: 2000px; farba pozadia: rgba (0,0,0,0,5); pretečenie: skryté; poloha: pevná; hore: 0px;) .b-popup .b-popup -obsah (okraj: 40px auto 0px auto; šírka: 100px; výška: 40px; výplň: 10px; farba pozadia: # c5c5c5; polomer ohraničenia: 5px; tieň poľa: 0px 0px 10px # 000;)

Výsledok:

Veľmi často sa odporúča použiť:

Poloha: absolútna;
Áno, výsledok je rovnaký, ale vzhľadom na to, že sme nastavili výšku bloku „tieňovania“, zobrazujú sa posúvače. Preto táto metóda nie je vhodná.

Metóda 2

Táto metóda sa dramaticky nelíši od metódy 1, ale považujem ju za pohodlnejšiu.

Html (nezmenené)

Css

* (rodina fontov: Areal;) .b-kontajner (šírka: 200 pixelov; výška: 150 pixelov; farba pozadia: #ccc; okraj: 0 pixelov automaticky; výplň: 10 pixelov; veľkosť písma: 30 pixelov; farba: #fff;) .b-kontextové okno (šírka: 100%; minimálna výška: 100%; farba pozadia: rgba (0,0,0,0,5); pretečenie: skryté; poloha: pevná; hore: 0 pixelov;) .b-kontextové okno. b-popup-content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Výsledok je podobný

Vďaka majetku: minimálna výška: 100%; náš blok "blackout" získal šírku 100% a minimálna výška na 100% obrazovky.

Jediná nevýhoda táto metóda je to tak? internet Explorer podporuje túto vlastnosť iba od verzie 8.0.

Pridanie mágie do Jquery

Teraz pridáme odkazy na skrytie / zobrazenie nášho kontextového okna.

Na to musíte pripojiť knižnicu JQuery a malý skript:

Tiež je potrebné aktualizovať Html:

Výsledok

Teraz, keď sa stránka načíta, vyskakovacie okno zmizne.

Výsledok si môžete pozrieť tu.

V tejto lekcii neprezradím tajomstvo pre skúsených dizajnérov rozloženia a guruov CSS, ale tento článok bude užitočný pre začiatočníkov. tu sa môžete dozvedieť, ako vytvárať kontextové okná na vrchu celého vášho webu.

Najčastejšie sa takéto okná zobrazujú po vykonaní určitých akcií na webe, napríklad používateľ klikne na odkaz „Požiadať o spätné volanie“ a pred ním sa objaví objednávkový formulár.

Je veľmi vhodné používať okná PopUp v spojení s ajaxom, ale toto je téma pre ďalšiu lekciu.

Na webe sa začína objavovať stále viac webových zdrojov, ktoré používajú vyskakovacie okná PopUp. Príkladom sú známe sociálne siete. Všetky nepotrebné údaje zo snímok obrazovky boli odstránené.

V kontakte s

Facebook

Twitter

Myslím si, že existuje dostatok dôvodov, prečo začať študovať otázku: Ako vytvoriť vyskakovacie okno PopUp na vašom webe.

Vyhlásenie o probléme (TOR)

V hornej časti celého webu je potrebné vytvoriť vyskakovacie okno so stmievacou obrazovkou.

Riešenie

Metóda 1

html

css

* (rodina fontov: Areal;) .b-kontajner (šírka: 200 pixelov; výška: 150 pixelov; farba pozadia: #ccc; okraj: 0 pixelov automaticky; výplň: 10 pixelov; veľkosť písma: 30 pixelov; farba: #fff;) .b-popup (šírka: 100%; výška: 2000px; farba pozadia: rgba (0,0,0,0,5); pretečenie: skryté; poloha: pevná; hore: 0px;) .b-popup .b-popup -obsah (okraj: 40px auto 0px auto; šírka: 100px; výška: 40px; výplň: 10px; farba pozadia: # c5c5c5; polomer ohraničenia: 5px; tieň poľa: 0px 0px 10px # 000;)

Výsledok:

Veľmi často sa odporúča použiť:

Poloha: absolútna;
Áno, výsledok je rovnaký, ale vzhľadom na to, že sme nastavili výšku bloku „tieňovania“, zobrazujú sa posúvače. Preto táto metóda nie je vhodná.

Metóda 2

Táto metóda sa dramaticky nelíši od metódy 1, ale považujem ju za pohodlnejšiu.

Html (nezmenené)

Css

* (rodina fontov: Areal;) .b-kontajner (šírka: 200 pixelov; výška: 150 pixelov; farba pozadia: #ccc; okraj: 0 pixelov automaticky; výplň: 10 pixelov; veľkosť písma: 30 pixelov; farba: #fff;) .b-kontextové okno (šírka: 100%; minimálna výška: 100%; farba pozadia: rgba (0,0,0,0,5); pretečenie: skryté; poloha: pevná; hore: 0 pixelov;) .b-kontextové okno. b-popup-content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Výsledok je podobný

Vďaka majetku: minimálna výška: 100%; náš blok "blackout" získal šírku 100% a minimálna výška na 100% obrazovky.

Jedinou nevýhodou tejto metódy je, že program Internet Explorer podporuje túto vlastnosť iba od verzie 8.0.

Pridanie mágie do Jquery

Teraz pridáme odkazy na skrytie / zobrazenie nášho kontextového okna.

Na to musíte pripojiť knižnicu JQuery a malý skript:

Tiež je potrebné aktualizovať Html:

Výsledok

Teraz, keď sa stránka načíta, vyskakovacie okno zmizne.

Výsledok si môžete pozrieť tu.

Modálne okno, ktoré je z hľadiska funkcií jednoduché, je úplne spustené v čistom CSS, kde môžete zadať rôzne funkcie, ktoré sa majú na stránke volať. Toto je pravdepodobne jeden z mnohých, s ktorými som sa stretol pri výbere modálnych okien, pokiaľ ide o nastavenia prostaty, ale aj na inštaláciu. Ale hlavnou vecou je jeho funkčnosť, ktorá nebude nižšia ako ostatné. Tiež je v predvolenom nastavení vyrobený vo svetlom tieni, kde je vpravo horný roh tlačidlo je nastavené, vo forme kríža.

Ktorý prejde na funkciu deaktivácie alebo len na zmiznutie rámca, kde aj na tomto malom prvku existuje vplyv na zmenu palety farieb. Webmaster ho teraz môže umiestniť na web a umiestniť naň popis alebo operátory, ktoré môžu zobrazovať rôzne kategórie, napríklad štatistiky alebo informátorov.

Faktom však je, že ak máte tmavý štýl zdroja, potom v štýle môžete rýchlo zmeniť mierku, alebo skôr ju prispôsobiť pôvodnému dizajnu. Tu je jeden z štandardné metódy ako na to čistá css do modálneho okna, ktoré sa spustí po kliknutí na tlačidlo pod odkazom s ukotvením HTML. Samotné tlačidlo slúži skôr na zviditeľnenie, kde v štýloch zostane odstránenie jednej triedy a názvu, ktoré je možné vložiť do navigácie alebo na ovládací panel, kde sa nachádza hlavná funkcionalita alebo navigácia na stránkach.

To je pri kontrole, či všetko funguje správne:

Začíname s inštaláciou:

Okno s tlačidlom

CSS

Butksaton-satokavate (
displej: radový blok;
textová dekorácia: žiadna;
pravý okraj: 7 pixelov;
polomer hranice: 5 pixelov;
polstrovanie: 7 pixelov 9 pixelov;
pozadie: # 199a36;
farba: # fbf7f7! dôležité;
}

Anelumen (
displej: flex;
poloha: pevná;
vľavo: 0;
horná časť: -100%;
šírka: 100%;
výška: 100%;
zarovnávacie položky: stred;
justify-content: center;
krycia schopnosť: 0;
-webkit-transition: top 0s 0,7s, nepriehľadnosť 0,7s 0s;
prechod: top 0s 0,7s, krytie 0,7s 0s;
}

Anelumen: cieľ (
hore: 0;
krycia schopnosť: 1;
-webkit-transition: žiadny;
prechod: žiadny;
}

Postava Anelumena (
šírka: 100%;
max-width: 530px;
poloha: relatívna;
polstrovanie: 1,8em;
krycia schopnosť: 0;
farba pozadia: biela;
-webkit-transition: nepriehľadnosť .7s;
prechod: nepriehľadnosť 0,7s;
}

Anelumen.lowingnuska postava (
pozadie: # f9f5f5;
polomer hranice: 7 pixelov;
vypchávka: 8px;
orámovanie: 3 pixely plné #aaabad;
}

Anelumen.lowingnuska postava h2 (
margin-top: 0;
čalúnené dno: 3 pixely;
border-bottom: 1px solid # dcd7d7;
}

Anelumen: cieľová figúrka (
krycia schopnosť: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
textová dekorácia: žiadna;
poloha: absolútna;
vpravo: 8 pixelov;
hore: 0px;
veľkosť písma: 41px;
}

Anelumen .nedismiseg (
vľavo: 0;
hore: 0;
šírka: 100%;
výška: 100%;
poloha: pevná;
farba pozadia: rgba (10, 10, 10, 0,87);
obsah: "";
kurzor: predvolený;
viditeľnosť: skrytá;
-webkit-transition: všetky .7s;
prechod: všetky .7s;
}

Anelumen: target .nedismiseg (
viditeľnosť: viditeľný;
}

Musíte si tiež uvedomiť, že štýl CSS a pseudotrieda sú tie, ktoré funkcie CSS plne nevyužívajú s mnohými zaujímavými potenciálnymi aplikáciami.

Začína to keď Url stránka sa zhoduje s identifikátorom jeho prvku, alebo ho môžete dať inak, vtedy používateľ skočí na konkrétny prvok na stránke.