, ar noteiktu saturu iekšpusē un pogu “Aizvērt”, kas ģenerēta tikai, izmantojot css.

Atvērt logu 1 Atvērt logu 2 Video logā 3 Fotoattēlu 4. logā

Iepriekš minētajā koda piemērā skaidrības labad es uzrakstīju īsus paskaidrojumus modālo logu konteineros. Pēc analoģijas tas paliek jums div konteiners uznirstošajā logā, ievietojiet jebkuru savu saturu, vai nu vienkāršu tekstu, attēlus vai videoklipus no jebkura trešās puses resursa, YouTube, Vimeo utt. Saites uz modālajiem logiem, varat izveidot tekstu vai noformēt tās brīnišķīgu, gradienta pogu veidā, kā piemērs.

2. solis. CSS

Nākamais solis, tas ir visinteresantākais, ir svarīgi sagatavot visus nepieciešamos stilus mūsu modālajam logam, sakārtot izskats un pievienot funkcionalitāti. Es izlaidu lapas pamata stilus, lai nesajauktu, un dažiem skaidrības labad pievienoju dažus komentārus:

/ * Pamata aptumšošanas un modālā slāņa stili * /. Pārklājums (augšējā: 0; labā: 0; apakšējā: 0; kreisā: 0; z-indekss: 1; redzamība: slēpta; / * aptumšošanas fons * / fona krāsa: rgba (0, 0, 0, 0,7); necaurredzamība: 0; pozīcija: fiksēta; / * fiksēta pozicionēšana * / kursors: noklusējums; / * kursora tips * / -webkit -pāreja: necaurredzamība .5s; -moz -pāreja: necaurredzamība. 5s; -ms-pāreja: necaurredzamība .5s; -o-pāreja: necaurredzamība .5s; pāreja: necaurredzamība .5s;). Pārklājums: mērķis (redzamība: redzama; necaurredzamība: 1;) .is-attēls (augšējā: 0; pa labi: 0; apakšā: 0; pa kreisi: 0; displejs: bloks; mala: automātiska; platums: 100%; augstums: automātisks; / * noapaļojot iekļauto attēlu stūrus * / -webkit -border -radius: 4px; -moz -robežas rādiuss: 4 pikseļi; -ms-robežas rādiuss: 4 pikseļi; robežas rādiuss: 4 pikseļi;) / * iegultie m-multivides elementi, rāmji * / iegulšana, iframe (augšā: 0; pa labi: 0; apakšā: 0; pa kreisi: 0; displejs: bloks; mala: automātiska; minimālais platums: 320 pikseļi; maksimālais platums: 600 pikseļi; platums: 100%;). popup h1 ( / * virsraksts 1 * / krāsa: # 008000; text-align: left ; teksta ēna: 0 1p x 3px rgba (0,0,0, .3); fonts: 24px "Trebuchet MS", Helvetica, bez sērijas; fonta svars: treknraksts; ). popup h2 ( / * 2. virsraksts * / krāsa: # 008000; text-align: left; text-shadow: 0 1px 3px rgba (0,0,0, .3); fonts: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Veidot modālos logu stilus *** / .popup (augšpusē: 0; pa labi: 0; pa kreisi: 0; fonta lielums: 14 pikseļi; z-indekss: 10; displejs: bloks; redzamība : slēpta; mala: 0 automātiska; platums: 90%; minimālais platums: 320 pikseļi; maksimālais platums: 600 pikseļi; / * fiksēta pozicionēšana, ritinot logs ir stabils * / pozīcija: fiksēts; polsterējums: 15 pikseļi; apmale: 1 pikseļa stabila # 383838; / * noapaļoti stūri * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; fona krāsa: #FFFFFF; / * ārējā kaste-ēna * / -webkit-kaste-ēna: 0 0 6px rgba (0, 0, 0, 0,8); -moz-box-shadow: 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); / * pilnīga loga caurspīdīgums, kas parādās uz klikšķa * / necaurredzamība: 0; / * pārejas efekts (parādās) * / -wkitkit -transiti ieslēgts: viss viegli .5s; -moz-pāreja: viss viegli .5s; -ms-pāreja: viss viegli .5s; -o-pāreja: viss viegli .5s; pāreja: viss viegli .5s; ) / * iespējot loga parādīšanos un padarīt tumšāku fonu. 1; / * noņemiet caurspīdīgumu * /) / * veidojiet aizvēršanas pogu * /. Aizvērt (pozīcija: absolūta; augšējā: -10 pikseļi; pa labi: -10 pikseļi; polsterējums: 0; platums: 20 pikseļi; augstums: 20 pikseļi; apmale: 2 pikseļi cieta #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. astoņi); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; kaste-ēna: 0 pikseļi 0 pikseļi 10 pikseļi # 000; text-align: center; teksta dekorēšana: nav; fonta svars: treknraksts; līnijas augstums: 20 pikseļi; / * iestatīt vērtības un pārejas efektu uz kursoru * / -webkit -pāreja: viss viegli .8s; -moz-pāreja: viss viegli .8s; -ms-pāreja: viss viegli .8s; -o-pāreja: viss viegli .8s; pāreja: viss viegli .8s; ). aizvērt: pirms (krāsa: rgba (255, 255, 255, 0,9); saturs: "X"; teksta ēna: 0 -1 pikseļi rgba (0, 0, 0, 0,9); fonta lielums: 12 pikseļi;) . aizvērt: virzīt kursoru (fona krāsa: rgba (252, 20, 0, 0,8); / * pagriezt pogu, lai novietotu kursoru * / -webkit -transform: pagriezt (360 grādi); -moz -transformācija: pagriezt (360 grādi); - ms -pārveidot: pagriezt (360 grādi); -o pārveidot: pagriezt (360 grādi); pārveidot: pagriezt (360 grādi);) / * pēc izvēles, pievienojot pielikumus * /.

Kā jūs redzat dārgie draugi, viss ir diezgan vienkārši un bez liekiem mishmash. Ja jūs darāt visu pareizi, jūs savā arsenālā iegūsit brīnišķīgu modālu uznirstošo logu, kurā varat ievietot jebkuru saturu, vai nu teksta saturu, fotoattēlus, dažādas reģistrācijas veidlapas, un atsauksmes vai video no jebkura trešās puses avota. Eksperimentējiet ar parametriem, mainiet logu, kā sirds vēlas, un, ja iespējams, komentāros dalieties savā paraugpraksē, kā arī pēkšņi radušās problēmās.

Mūsdienās dažādās vietnēs visu veidu uznirstošie modālie logi - uznirstošie logi - reģistrācijai, autorizācijai, informācijas logi - visu veidu formas un izmēri ir kļuvuši par normu. Papildus jQuery for vienkāršs un ērta izveidešādi uznirstošie logi - tā pati Shadowbox, piemēram.

Šādu uznirstošo logu izskats, izmērs un dizains ir pilnīgi dažādi - ar pārklājumiem, ēnām, animācijām - ir daudz ko saskaitīt. Viņus vieno, iespējams, tas, ka tie parasti tiek parādīti pašā lapas centrā - gan horizontāli, gan vertikāli. Un centrēšana tiek veikta, izmantojot JS. Es neiedziļināšos šo aprēķinu detaļās, es tos aprakstīšu tikai īsi:

Uznirstošajam HTML kodam parasti ir šāda struktūra:

- Uznirstošais logs ar saturu ->

Un CSS ( šeit un turpmāk es apzināti izlaidīšu dažu īpašību rakstīšanu, kas nepieciešamas tikai dažām pārlūkprogrammām un to versijām, atstājot tikai visvienkāršāko):

Uznirstošais_pārklājums (
stāvoklis: fiksēts;
pa kreisi: 0;
augšā: 0;
fons: # 000;
necaurredzamība: .5;
filtrs: alfa (necaurredzamība = 50);
z-indekss: 999
}
.popup (
pozīcija: absolūta;
platums: 20%;
z-indekss: 1000;
apmale: 1px cieta #ccc;
fons: #fff
}

JS nosaka pārlūkprogrammu un pārlūkprogrammas versiju, un, pamatojoties uz to, tā aprēķina darba zonas lielumu un paša uznirstošā loga lielumu (ja tie nav norādīti), un pēc tam tiek veikti vienkārši tā augšējā kreisā stūra pozīcijas aprēķini (css rekvizīti pa kreisi un augšpusē .popup). Daudzi spraudņi arī reaģē uz lapas lieluma maiņu, katru reizi pārrēķinot visu, lai uznirstošais logs atrastos tieši darbvietas centrā.

Pēc savas būtības esmu perfekcioniste (es zinu, dažreiz tas ir slikti), un es bieži uztraucos pat par sīkumiem, cenšoties uzlabot un pievienot šīm detaļām maksimāli iespējamo paplašināmību, un es nevarēju neķerties uz šo brīdi visu šo spraudņu darbā. Radās doma, ka visu darbu pie uznirstošā loga novietošanas var pārvietot no JS pleciem uz pašas pārlūkprogrammas pleciem, tas ir, šo darbu var veikt, izmantojot CSS.

To mēs darīsim.

Zemāk es sniegšu uznirstošā loga piemēru, kas darbojas visās galveno pārlūkprogrammu galvenajās versijās. Lai tas pareizi darbotos IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Tātad, mums ir lapa ar pogu, uz kuras noklikšķinot, tai vajadzētu parādīties modālais logs ar kādu informāciju un visu pārējo saturu vajadzētu aizēnot ar pārklājumu.

Sāksim ar HTML kodu. Tās struktūra nedaudz atšķirsies no iepriekš norādītā koda, kāpēc - vairāk par to zemāk rakstā; elementu klases paliks nemainīgas:

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

Un daži CSS:

Uznirstošais_pārklājums (
stāvoklis: fiksēts;
pa kreisi: 0;
augšā: 0;
platums: 100%;
augstums: 100%;
z-indekss: 999
}
.popup (
}

Fiksēti izmēri

Vienkāršākais variants. Jums nav jāizgudro nekas jauns:

Uznirstošais logs (
pa kreisi: 50%;
augšpusē: 50%;
platums: 400 pikseļi;
augstums: 200 pikseļi;
mala pa kreisi: -200 pikseļi;
augšējā mala: -100 pikseļi
}

Negatīvās robežas pusē platumā un augstumā ir triviālas un garlaicīgas, tajā nav nekā oriģināla.

Uznirstošo logu izmēri ir atkarīgi no satura

Pirmkārt, šķiet, ka horizontālā izlīdzināšana ir vieglāka. Ja uznirstošais logs ir fiksēta platuma, tad pietiek ar sekojošo:

Uznirstošais logs (
piemale: auto
}

Tas nekādā veidā neietekmēs vertikālo izlīdzināšanu, un, starp citu, ja jums ir nepieciešama tikai horizontāla līdzināšana, varat apstāties, norādot kādu citu uznirstošā loga augšējo malu. Bet ar to mums nepietiek! Virzieties tālāk.

Vertikālā izlīdzināšana. Šeit kļūst interesanti. Protams, tabula vai tabulas emulācija, izmantojot displeju: table & display: table-cell, tiktu galā ar šādu uzdevumu bez problēmām, taču veikt šo darbu vecajā IE ir dārgāk. Arī tabula pazūd - acīmredzamu iemeslu dēļ.

Tātad rezerve jau trūkst - mēs nezinām izmērus. Atcerēsimies, kādas ir īpašības ar līdzīgu iedarbību. Jā, izlīdziniet tekstu. Bet tikai iekļautajiem elementiem. LABI. Šķiet, ka pats Dievs lika izmantot displeju: inline -block - bloka elements, uz kuru varētu attiecināt īpašības inline elementiem. Ar šī īpašuma atbalstu arī visās pārlūkprogrammās viss, varētu teikt, ir kārtībā. Kods kļūst apmēram šāds:

Uznirstošais_pārklājums (
stāvoklis: fiksēts;
pa kreisi: 0;
augšā: 0;
platums: 100%;
augstums: 100%;
z-indekss: 999;
text-align: centrs
}
.popup (
displejs: inline -block;
vertikāli izlīdzināt: vidū
}

Saglabājas vertikālā līdzināšana - vertikālā līdzināšana mums ir piemērota. Jebkurā citā situācijā būtu lietderīgi izmantot arī līnijas augstumu, taču, tā kā mums nav fiksēta lapas augstuma (šajā kontekstā līnijas augstums), to šeit nevar izmantot. Viens triks nāk palīgā ar nezināmu izmēru elementu vertikālu izlīdzināšanu. Es precīzi atceros, ka šo metodi atradu Habré, bet diemžēl nevarēju atrast saiti uz šo tēmu. Šī metode sastāv no sekojošiem: tiek pievienots nulles platuma un 100% augstuma vecāka inline bloka elements, kas "paplašina" līnijas augstumu līdz 100% no vecāka auguma, tas ir, darba zonas augstumam no lapas. Padarīsim to elegantāku - nevajadzīgas iezīmēšanas vietā mēs izmantosim pseidoelementus:

Uznirstošais logs: pēc (
displejs: inline -block;
platums: 0;
augstums: 100%;
vertikāli izlīdzināt: vidū;
saturs: ""
}

Atliek pievienot daļēji caurspīdīgu pārklājuma aptumšošanu - rgba tiks galā. Viss! Tagad uznirstošā loga pozīciju regulē tikai pārlūkprogramma CSS līmenī.

Šajā nodarbībā es neatklāšu noslēpumu pieredzējušiem maketētājiem un css guru, taču šis raksts būs noderīgs iesācējiem. šeit jūs varat uzzināt, kā izveidot uznirstošos logus visas vietnes augšpusē.

Visbiežāk šādi logi parādās pēc noteiktu darbību veikšanas vietnē, piemēram, lietotājs noklikšķina uz saites Pieprasīt atzvanīšanu un viņa priekšā tiek parādīta pasūtījuma veidlapa.

Ir ļoti ērti lietot PopUp logus kopā ar ajax, taču šī ir tēma citai nodarbībai.

Arvien vairāk tīmekļa resursu sāk parādīties tīmeklī, kuros tiek izmantoti uznirstošie logi. Ikviens zina kā piemēru. sociālie tīkli... Visi nevajadzīgie dati no ekrānuzņēmumiem ir noņemti.

Sazinoties ar

Facebook

Twitter

Es domāju, ka ir pietiekami daudz iemeslu, lai sāktu pētīt jautājumu: kā savā vietnē izveidot uznirstošo logu.

Problēmas izklāsts (TOR)

Jums ir jāizveido uznirstošais logs ar aptumšojošu ekrānu visas vietnes augšpusē.

Risinājums

1. metode

html

css

* (fontu saime: Areal;). b-konteiners (platums: 200 pikseļi; augstums: 150 pikseļi; fona krāsa: #ccc; mala: 0 pikseļi automātiski; polsterējums: 10 pikseļi; fonta lielums: 30 pikseļi; krāsa: #fff;) .b-popup (platums: 100%; augstums: 2000px; fona krāsa: rgba (0,0,0,0,5); pārplūde: slēpta; pozīcija: fiksēta; augšējā: 0px;) .b-popup .b-popup -saturs (mala: 40 pikseļi automātiski 0 pikseļi automātiski; platums: 100 pikseļi; augstums: 40 pikseļi; polsterējums: 10 pikseļi; fona krāsa: # c5c5c5; apmales rādiuss: 5 pikseļi; lodziņa ēna: 0 pikseļi 0 pikseļi 10 pikseļi # 000;)

Rezultāts:

Ļoti bieži tiek ieteikts izmantot:

Pozīcija: absolūta;
Jā, rezultāts ir tāds pats, bet sakarā ar to, ka esam iestatījuši "ēnojuma" bloka augstumu, parādās ritjoslas. Tāpēc šī metode nav piemērota.

2. metode

Šī metode krasi neatšķiras no 1. metodes, bet man šķiet ērtāk.

HTML (nemainīgs)

Css

* (fontu saime: Areal;). b-konteiners (platums: 200 pikseļi; augstums: 150 pikseļi; fona krāsa: #ccc; mala: 0 pikseļi automātiski; polsterējums: 10 pikseļi; fonta lielums: 30 pikseļi; krāsa: #fff;) .b-popup (platums: 100%; min-augstums: 100%; fona krāsa: rgba (0,0,0,0,5); pārplūde: slēpta; pozīcija: fiksēta; augšējā: 0px;) .b-popup. b-uznirstošais saturs (piemale: 40 pikseļi automātiski 0 pikseļi automātiski; platums: 100 pikseļi; augstums: 40 pikseļi; polsterējums: 10 pikseļi; fona krāsa: # c5c5c5; apmales rādiuss: 5 pikseļi; lodziņa ēna: 0 pikseļi 0 pikseļi 10 pikseļi # 000;)

Rezultāts ir līdzīgs

Pateicoties īpašumam: min-augstums: 100%; mūsu "aptumšošanas" bloks ir ieguvis 100% platumu un minimālais augstums 100% ekrāna.

Vienīgais trūkums šo metodi vai tas ir Internet Explorer atbalsta šo īpašumu tikai kopš versijas 8.0.

Burvju pievienošana Jquery

Tagad pievienosim saites, lai paslēptu / parādītu mūsu uznirstošo logu.

Lai to izdarītu, jums ir jāpievieno JQuery bibliotēka un neliels skripts:

Arī HTML ir jāatjaunina:

Rezultāts

Tagad, kad lapa tiek ielādēta, uznirstošais logs pazudīs.

Rezultātu varat redzēt šeit.

Šajā nodarbībā es neatklāšu noslēpumu pieredzējušiem maketētājiem un css guru, taču šis raksts būs noderīgs iesācējiem. šeit jūs varat uzzināt, kā izveidot uznirstošos logus visas vietnes augšpusē.

Visbiežāk šādi logi parādās pēc noteiktu darbību veikšanas vietnē, piemēram, lietotājs noklikšķina uz saites Pieprasīt atzvanīšanu un viņa priekšā tiek parādīta pasūtījuma veidlapa.

Ir ļoti ērti lietot PopUp logus kopā ar ajax, taču šī ir tēma citai nodarbībai.

Arvien vairāk tīmekļa resursu sāk parādīties tīmeklī, kuros tiek izmantoti uznirstošie logi. Piemērs ir pazīstamie sociālie tīkli. Visi nevajadzīgie dati no ekrānuzņēmumiem ir noņemti.

Sazinoties ar

Facebook

Twitter

Es domāju, ka ir pietiekami daudz iemeslu, lai sāktu pētīt jautājumu: kā savā vietnē izveidot uznirstošo logu.

Problēmas izklāsts (TOR)

Jums ir jāizveido uznirstošais logs ar aptumšojošu ekrānu visas vietnes augšpusē.

Risinājums

1. metode

html

css

* (fontu saime: Areal;). b-konteiners (platums: 200 pikseļi; augstums: 150 pikseļi; fona krāsa: #ccc; mala: 0 pikseļi automātiski; polsterējums: 10 pikseļi; fonta lielums: 30 pikseļi; krāsa: #fff;) .b-popup (platums: 100%; augstums: 2000px; fona krāsa: rgba (0,0,0,0,5); pārplūde: slēpta; pozīcija: fiksēta; augšējā: 0px;) .b-popup .b-popup -saturs (mala: 40 pikseļi automātiski 0 pikseļi automātiski; platums: 100 pikseļi; augstums: 40 pikseļi; polsterējums: 10 pikseļi; fona krāsa: # c5c5c5; apmales rādiuss: 5 pikseļi; lodziņa ēna: 0 pikseļi 0 pikseļi 10 pikseļi # 000;)

Rezultāts:

Ļoti bieži tiek ieteikts izmantot:

Pozīcija: absolūta;
Jā, rezultāts ir tāds pats, bet sakarā ar to, ka esam iestatījuši "ēnojuma" bloka augstumu, parādās ritjoslas. Tāpēc šī metode nav piemērota.

2. metode

Šī metode krasi neatšķiras no 1. metodes, bet man šķiet ērtāk.

HTML (nemainīgs)

Css

* (fontu saime: Areal;). b-konteiners (platums: 200 pikseļi; augstums: 150 pikseļi; fona krāsa: #ccc; mala: 0 pikseļi automātiski; polsterējums: 10 pikseļi; fonta lielums: 30 pikseļi; krāsa: #fff;) .b-popup (platums: 100%; min-augstums: 100%; fona krāsa: rgba (0,0,0,0,5); pārplūde: slēpta; pozīcija: fiksēta; augšējā: 0px;) .b-popup. b-uznirstošais saturs (piemale: 40 pikseļi automātiski 0 pikseļi automātiski; platums: 100 pikseļi; augstums: 40 pikseļi; polsterējums: 10 pikseļi; fona krāsa: # c5c5c5; apmales rādiuss: 5 pikseļi; lodziņa ēna: 0 pikseļi 0 pikseļi 10 pikseļi # 000;)

Rezultāts ir līdzīgs

Pateicoties īpašumam: min-augstums: 100%; mūsu "aptumšošanas" bloks ir ieguvis 100% platumu un minimālais augstums 100% ekrāna.

Vienīgais šīs metodes trūkums ir tas, ka Internet Explorer atbalsta šo īpašumu tikai kopš versijas 8.0.

Burvju pievienošana Jquery

Tagad pievienosim saites, lai paslēptu / parādītu mūsu uznirstošo logu.

Lai to izdarītu, jums ir jāpievieno JQuery bibliotēka un neliels skripts:

Arī HTML ir jāatjaunina:

Rezultāts

Tagad, kad lapa tiek ielādēta, uznirstošais logs pazudīs.

Rezultātu varat redzēt šeit.

Funkciju ziņā vienkāršs modāls logs, kas tiek pilnībā izpildīts tīrā CSS, kur jūs varat ievietot dažādas funkcijas, kas tiks izsauktas vietnē. Tas, iespējams, ir viens no daudzajiem, ko es satiku, izvēloties modālos logus, ņemot vērā tā prostatas iestatījumus, bet arī uzstādīšanu. Bet galvenais ir tā funkcionalitāte, kas nebūs zemāka par citiem. Arī pēc noklusējuma tas ir izgatavots gaišā ēnā, kur labajā pusē augšējais stūris poga ir iestatīta krusta formā.

Kas nonāks atspējošanas funkcijā vai vienkārši, lai rāmis pazustu, kur pat uz šī mazā elementa ir ietekme uz krāsu paletes maiņu. Tagad tīmekļa meistars var to ievietot vietnē un ievietot tajā aprakstu vai operatorus, kuros var tikt parādītas dažādas kategorijas, piemēram, statistika vai informatori.

Bet fakts ir tāds, ka, ja jums ir resursa tumšais stils, tad stilā jūs varat ātri mainīt skalu vai drīzāk pielāgot to sākotnējam dizainam. Šeit ir viens no standarta metodes kā to izdarīt tīrs css uz modālo logu, kas tiks atvērts, noklikšķinot uz pogas zem saites ar HTML enkuru. Poga pati vairāk attiecas uz redzamību, kur stilos, vienas klases noņemšana un nosaukums paliks, ko var ievietot navigācijā vai vadības panelī, kur atrodas galvenā funkcionalitāte vai vietnes navigācija.

Tas ir, pārbaudot, vai viss darbojas labi:

Darba sākšana ar instalēšanu:

Logs ar pogu

CSS

Butksaton-satokavate (
displejs: inline-block;
teksta dekorēšana: nav;
labajai malai: 7 pikseļi;
robežas rādiuss: 5 pikseļi;
polsterējums: 7 pikseļi 9 pikseļi;
fons: # 199a36;
krāsa: # fbf7f7! svarīgi;
}

Anelumens (
displejs: elastīgs;
stāvoklis: fiksēts;
pa kreisi: 0;
augšpusē: -100%;
platums: 100%;
augstums: 100%;
align-items: centrs;
attaisnot saturu: centrs;
necaurredzamība: 0;
-webkit-pāreja: top 0s, 7s, necaurredzamība, 7s 0s;
pāreja: top 0s, 7s, necaurredzamība, 7s 0s;
}

Anelumens: mērķis (
augšā: 0;
necaurredzamība: 1;
-webkit-pāreja: nav;
pāreja: nav;
}

Anelumena figūra (
platums: 100%;
maksimālais platums: 530 pikseļi;
stāvoklis: radinieks;
polsterējums: 1.8em;
necaurredzamība: 0;
fona krāsa: balta;
-webkit-pāreja: necaurredzamība .7s;
pāreja: necaurredzamība .7s;
}

Anelumen.lowingnuska skaitlis (
fons: # f9f5f5;
robežas rādiuss: 7 pikseļi;
polsterējums: 8 pikseļi;
robeža: 3 pikseļi cieta #aaabad;
}

Anelumen.lowingnuska skaitlis h2 (
marg-top: 0;
polsterējums apakšā: 3 pikseļi;
robeža apakšā: 1px cieta # dcd7d7;
}

Anelumens: mērķa skaitlis (
necaurredzamība: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
teksta dekorēšana: nav;
pozīcija: absolūta;
pa labi: 8 pikseļi;
augšpusē: 0 pikseļi;
fonta izmērs: 41px;
}

Anelumen .nedismiseg (
pa kreisi: 0;
augšā: 0;
platums: 100%;
augstums: 100%;
stāvoklis: fiksēts;
fona krāsa: rgba (10, 10, 10, 0,87);
saturs: "";
kursors: noklusējums;
redzamība: slēpta;
-webkit-pāreja: visi .7s;
pāreja: visi, 7s;
}

Anelumens: mērķis .nedismiseg (
redzamība: redzama;
}

Jums arī jāapzinās, ka CSS stils un pseidoklase ir viena no tām, kas nav pilnībā izmantota CSS funkcijās ar daudzām interesantām iespējamām lietojumprogrammām.

Tas sākas, kad URL lapa atbilst tā elementa identifikatoram vai arī varat to izteikt citādi, tas ir, kad lietotājs pāriet uz konkrētu lapas elementu.