Css modalni prozor u modalnom prozoru. Modalni prozor pomoću css-a, kako napraviti modalni prozor. Pozabavimo se širinom

Modalni prozori često su korišten alat u arsenalu webmastera. Vrlo je pogodan za rješavanje velikog broja zadataka, kao što su prikaz obrazaca za registraciju, oglasnih blokova, poruka i tako dalje.

No, unatoč svom važnom mjestu u informacijskoj potpori projekta, modalni prozori su obično implementirani u JavaScriptu, što može stvoriti probleme prilikom proširenja funkcionalnosti ili osiguravanja kompatibilnosti sa prethodnim verzijama.

HTML5 i CSS3 nevjerojatno olakšavaju stvaranje modalnih prozora.

HTML označavanje

Prvi korak prema stvaranju modalnog prozora je jednostavno i učinkovito označavanje:

Otvori modalni prozor

Unutar div elementa Smješten je sadržaj modalnog prozora. Također morate dati vezu za zatvaranje prozora. Na primjer, postavimo jednostavan naslov i nekoliko odlomaka. Potpuna oznaka za naš primjer izgledala bi ovako:

Otvaranje modalnog prozora X Modalni prozor

Primjer jednostavnog modalnog prozora koji se može stvoriti pomoću CSS3.

Može se koristiti u širokom rasponu, od prikaza poruka do obrazaca za registraciju.

Stilovi

Stvorite razred modalniDijalog i početi se formirati izgled:

ModalDialog ( pozicija: fiksna; obitelj fontova: Arial, Helvetica, sans-serif; vrh: 0; desno: 0; dolje: 0; lijevo: 0; pozadina: rgba(0,0,0,0.8); z-index : 99999; -webkit-transition: neprozirnost 400ms ease-in; -moz-transition: neprozirnost 400ms ease-in; prijelaz: neprozirnost 400ms ease-in; prikaz: ništa; događaji pokazivača: ništa; )

Naš će prozor imati fiksni položaj, odnosno pomicat će se prema dolje ako skrolate po stranici otvoren prozor. Također, naša crna pozadina će se proširiti i ispuniti cijeli zaslon.

Pozadina će imati blagu prozirnost i također će biti postavljena na vrh svih ostalih elemenata korištenjem svojstva z-indeks.

Konačno, postavljamo prijelaze za prikaz našeg modalnog prozora i skrivamo ga u neaktivnom stanju.

Možda ne poznajete nekretninu pokazivač-događaji, ali vam omogućuje da kontrolirate kako će elementi reagirati na klikove mišem. Vrijednost postavljamo na njezinu vrijednost za klasu modalniDijalog, budući da veza ne bi trebala reagirati na klikove mišem kada je pseudo klasa aktivna ":cilj".

Sada dodajemo pseudo klasu :cilj i stilovi za modalni prozor.

ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # fff; pozadina: -moz-linearni-gradijent(#fff, #999); pozadina: -webkit-linearni-gradijent(#fff, #999); pozadina: -o-linearni-gradijent(#fff, #999); )

Pseudo klasa cilj mijenja način prikaza elementa, tako da će se naš modalni prozor prikazati kada se klikne na vezu. Također mijenjamo vrijednost imovine pokazivač-događaji.

Definiramo širinu i položaj modalnog prozora na stranici. Također definiramo gradijent za pozadinu i zaobljene kutove.

Zatvaranje prozora

Sada moramo implementirati funkciju zatvaranja prozora. Formiranje izgleda gumba:

Zatvori ( pozadina: #606061; boja: #FFFFFF; visina linije: 25px; pozicija: apsolutna; desno: -12px; poravnanje teksta: središte; vrh: -10px; širina: 24px; dekoracija teksta: ništa; font- težina: podebljano; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:hover ( pozadina: #00d9ff; )

Za naš gumb postavljamo pozadinu i položaj teksta. Zatim pozicioniramo gumb, učinimo ga okruglim koristeći svojstvo zaokruživanja okvira i oblikujemo svijetlu sjenu. Kada prijeđete mišem preko gumba, promijenit ćemo boju pozadine.

Modalni prozor mali je prozor koji iskače kako bi rekao nešto važno. Je li teško napraviti modalni prozor bez Bootstrapa? Pokušajmo to shvatiti.

Gdje umetnuti u DOM?

Obično ga stavljam ispred završne oznake tijela.

Uglavnom zbog stilova. Mnogo je lakše pozicionirati modal u CSS-u kada imate posla sa slojem koji obavija cijelo tijelo, umjesto nepoznatog skupa nadređenih elemenata koji potencijalno mogu imati vlastito pozicioniranje.

Centriranje

Evo jednog od mojih omiljenih trikova gdje možete centrirati i okomito i vodoravno, a da ne znate visinu i širinu.

Modalno (položaj: fiksno; gore: 50%; lijevo: 50%; transformacija: prevedi (-50%, -50%); )

Ovo je vrlo zgodno jer bi se otvoreni modalni prozor obično trebao nalaziti izravno u sredini, unatoč njegovoj širini. Još je vjerojatnije da će se visina promijeniti jer ovisi o sadržaju unutra.

Pozicija – fiksna?

Imajte na umu da smo koristili položaj: fiksno; tako da se korisnici mogu pomicati prema dolje dok otvoreni modalni prozor uvijek ostaje u sredini. Vjerujem, općenito, da se fiksna vrijednost već može sigurno koristiti, čak i na Mobilni uredaji. Međutim, ako trebate uzeti u obzir starije telefone, pokušajte zamijeniti apsolutnim.

Pozabavimo se širinom

Na velikim zaslonima tipični otvoreni modalni prozor nije samo centriran, već je i ograničen u širini.

Modalno (širina: 600 px; )

Međutim, postoje zasloni širine manje od 600 piksela. Da popravimo situaciju, dodajmo maksimalnu širinu.

Modalno (širina: 600 px; maks. širina: 100%; )

Visina

Postavljanje visoke zgrade još je odgovorniji zadatak. Znamo da se sadržaj mijenja. Osim toga, tehnika centriranja putem transformacije sretno skraćuje rubove, bez izgleda trake za pomicanje. Postavljanje maksimalne visine zaštitit će nas drugi put.

Modalno (visina: 400 piksela; maksimalna visina: 100%; )

Prelijevanje

Sada kada smo se pozabavili visinom, vrijeme je da pogledamo svojstvo overflow. Uobičajeno je koristiti vrijednost preljeva izravno u .modal, međutim, postoje dva problema s tim:

Možda ćemo htjeti koristiti elemente koji se ne bi trebali pomicati
Overflow će izrezati sjenu koju ćemo koristiti.

Predlažem korištenje unutarnjeg spremnika:

S obzirom na to da ćemo imati sadržaj koji treba listati, potrebno je postaviti visinu. Postoji nekoliko opcija. Evo jednog od njih:

Modalni crijeva ( položaj: apsolutni; vrh: 0; lijevo: 0; širina: 100%; visina: 100%; /* ispuna */ ispuna: 20px 50px 20px 20px; /* dopusti pomicanje */ overflow: auto; )

Gumbi

Ideja korištenja modalnih prozora je prisiljavanje na neku akciju prije nego što se bilo što učini. Učiniti gumb za zatvaranje prozora vidljivim u bilo kojem stanju ne čini se kao loša ideja.

Zatvoriti

Pozabavimo se zatamnjenjem

Uobičajeni modalni prozor napravljen je s potpuno zatamnjenom pozadinom. Ovo je korisno iz nekoliko razloga:

može potamniti ostatak zaslona
može spriječiti klikove/interakciju sa sadržajem oko modalnog prozora
Može se koristiti kao veliki gumb za zatvaranje

Tipičan primjer upotrebe:

.modal ( /* sve što smo već opisali gore */ z-index: 1010; ) .modal-overlay ( z-index: 1000; položaj: fiksno; gore:0; lijevo:0; širina: 100%; visina: 100% ;)

Zatvori s razredom, a ne otvori s razredom

Primijetio sam čestu pojavu gdje je klasa .modal skrivena prema zadanim postavkama, poput display: none; Zatim, za otvaranje dodajte klasu .modal.open (display: block;)

Međutim, to bi moglo biti loše jer bi vaš modal mogao biti display: flex; i prikaz: blok; prepisat će ga.

Modalno ( .display: flex; ) .modal.closed ( display: none; )

Dodajmo JavaScript var modal = document.querySelector("#modal"), modalOverlay = document.querySelector("#modal-overlay"), closeButton = document.querySelector("#close-button"), openButton = document.querySelector( " #otvori-gumb"); closeButton.addEventListner("klik", funkcija())( modal.classList.toggle("zatvoreno"); modalOverlay.classList.toggle("zatvoreno"); )); openButton.addEventListner("klik", funkcija())( modal.classList.toggle("zatvoreno"); modalOverlay.classList.toggle("zatvoreno"); ));

Modalni ili skočni prozor (koji se naziva drugačije) vrlo je čest onaj koji se koristi na web stranici. Njegova glavna svrha je izlaz razne informacije(uglavnom tekst i s nekoliko slika), koji se pojavljuje kada kliknete na bilo koji poseban objekt (link, gumb ili fotografiju).

U modalnom prozoru, u većini slučajeva, radi uštede prostora na web mjestu, nisu posebno napisani važna informacija, na primjer: povratna informacija, autorizacija ili .

Postoje slučajevi kada webmasteri žele privući pozornost posjetitelja na neki važan događaj, na primjer: dobiti bonuse i darove, sudjelovati u promocijama i nagradnim igrama itd., a modalni prozori iskaču bez sudjelovanja i želje posjetitelja.

Netko za te potrebe prilikom otvaranja stranice napravi modalni prozor koji se nakon određenog vremena pojavi na stranici uz korištenje java skripte naravno, dok drugi žele različiti putevi ostavite posjetitelja na svojoj stranici i pri zatvaranju stranice koristi modalni prozor koji se pojavljuje u trenutku kada klijent želi napustiti i zatvoriti stranicu.

Prvi primjer skočnog modalnog prozora.

Da biste napravili modalni prozor koristeći samo css, morate pisati html kod za objekt koji se odnosi na skočni prozor i dodijelite parametre i svojstva u datoteci stila za ispravan prikaz prekrasnog modalnog prozora.

.moj_modal(položaj:fiksan;gore:0;desno:0;dno:0;lijevo:0;pozadina:rgba(0,0,0,0.5);z-indeks:1050;prikaz:ništa;margina:0; padding:0;).my_modal:target(display:block;overflow-y:auto;).my_modal-dialog(position:relative;width:auto;margin:10px;)@media (min-width:576px)(. my_modal-dialog(max-width:460px;margin:30px auto;)).my_modal-content(position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex ;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#fff; -webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;)@media (min. -width:768px)(.my_modal-content(-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5) ;)).my_modal-header(display:block;padding:14px 14px 4px;).my_modal-title(margin-top:0;margin-bottom:0;line-height:1.5;font-size:1.25rem; font -weight:500;border-bottom:1px solid #d4d4d4;).close(padding:1px 5px 0;border:1px solid #000;border-radius:50%;font-family:sans-serif;font-size : 24px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;text-decoration:none;top:4px;right:4px;position: absolute;).close:focus,.close:hover(color:#000;text-decoration:none;cursor:pointer;opacity:.75;).my_modal-body(position:relative;-webkit-box-flex : 1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px;overflow:auto;) Otvori modalni prozor

Naslov modalnog prozora

Registriran ovdje tekstualne informacije modalni prozor...

Kopirajte, zalijepite i spremite gornji kod na Tekstualni dokument pod imenom index.html i zatim ga otvorite u pregledniku da provjerite funkcionalnost modalnog prozora. Ovdje također možete prilagoditi izgled modalnog prozora na temelju dizajna vašeg projekta.

Na primjer, za prikaz određenih informacija često koristim modalni prozor s raznim efektima animacije, što izgleda puno zanimljivije.

Modalni prozor kada kliknete gumb

U ovom primjeru pokazat ću kako registrirati gumb za otvaranje modalnog prozora.
Da bismo to učinili, samo trebamo dodati kod za gumb i za blok modalnog prozora HTML atribut onclick i time pozvati funkciju s određenim imenom.

Primjer gumba za otvaranje modalnog prozora (klik).

Gumb modalnog prozora

#prekrivanje (položaj: fiksno; gore: 0; lijevo: 0; širina: 100%; visina: 100%; boja pozadine: rgba(0, 0, 0, 0.4); z-indeks: 999; preljev: automatski; visibility:hidden; neprozirnost: 0; prijelaz: neprozirnost 0.7s ease-in 0s; ) .skočni prozor (gore: 10%; lijevo: 0; desno: 0; veličina fonta: 14px; margina: auto; širina: 80%; min-width: 200px; max-width: 600px; position: absolute; padding: 15px 20px; border: 1px solid #666; color-background: #fefefe; z-index: 1000; border-radius: 10px; font: 14px /18px "Tahoma", Arial, sans-serif; box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4); ) .close (gore: 10px; desno: 10px; širina: 32px; visina: 32px; pozicija: apsolutna; obrub: nijedan; radijus obruba: 50%; boja pozadine: rgba(0, 130, 230, 0.9); sjena okvira: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); kursor: pokazivač; obris: ništa; ) .close:before (boja: rgba(255, 255, 255, 0.9); sadržaj: "X"; obitelj-fontova : Arial, Helvetica, sans-serif; veličina fonta: 14 px; težina fonta: normalna; ukras teksta: ništa; tekst-sjena: 0 -1px rgba(0, 0, 0, 0,9); ) .close:hover ( background-color: rgba(180, 20, 14, 0.8); ) #overlay .popup p.zag(margin:20px 0 10px;padding:0 0 6px;color:tomato;font-size: 16px;font-weight:bold;border-bottom:1px puna rajčica;)

Zatim kopirajte i zalijepite html kod modalnog prozora:

Modalni prozor

Prva tekstualna informacija...

Druga tekstualna informacija...

Dodatne tekstualne informacije...

Modalni prozor

I na kraju, napišite prije skripte za pozivanje i zatvaranje modalnog prozora:

var b = document.getElementById("overlay"); funkcija swa())( b.style.visibility = "vidljiv"; b.style.opacity = "1"; b.style.transition = "svih 0,7s ease-out 0s"; ) funkcija swa2())( b .style .visibility = "hidden"; b.style.opacity = "0"; )

Podijelite s prijateljima i postavljajte pitanja ako nešto ne uspije prilikom izrade modalnog prozora.

U današnje vrijeme, za razne stranice, sve vrste skočnih modalnih prozora - skočni prozori - za registraciju, autorizaciju, informacijski prozori - svih vrsta oblika i veličina postali su norma. Također postoji ogroman broj dodataka, uz jQuery , za jednostavno i praktično stvaranje takvih skočnih prozora - isti Shadowbox, na primjer.

Izgled, veličina i dizajn takvih skočnih prozora potpuno su drugačiji - s preklapanjem, sjenama, animacijama - ne možete sve nabrojati. Zajedničko im je, možda, samo to što se obično prikazuju u samom središtu stranice – i vodoravno i okomito. A ovo centriranje se vrši pomoću JS-a. Neću ulaziti u detalje ovih izračuna, samo ću ih ukratko opisati:

HTML kod skočnog prozora obično ima sljedeću strukturu:

... -- Skočni prozor sa sadržajem -->

I CSS ( ovdje i dolje ću namjerno izostaviti neka svojstva koja su potrebna samo za neke preglednike i njihove verzije, ostavljajući samo najosnovnije):

Skočni__preklop(
položaj: fiksni;
lijevo: 0;
vrh: 0;
pozadina : #000 ;
neprozirnost: .5;
filtar: alfa (neprozirnost=50);
z-indeks: 999
}
.iskočiti(
pozicija: apsolutna;
širina: 20%;
z-indeks: 1000;
obrub: 1px puni #ccc;
pozadina: #fff
}

JS određuje preglednik i verziju preglednika te na temelju toga izračunava veličinu radnog prostora i veličinu samog skočnog prozora (ako nisu navedeni), a zatim se izvode jednostavni izračuni položaja njegovog gornjeg lijevog kuta ( css svojstva lijevo i gore za .skočni prozor). Mnogi dodaci također reagiraju na promjenu veličine stranice, svaki put ponovno izračunavajući cijelu stvar tako da se skočni prozor nalazi točno u središtu radnog prostora.

Po prirodi sam perfekcionist (znam, ponekad je to loša stvar), i često se mučim čak i oko sitnih detalja, pokušavajući poboljšati i dodati maksimalnu moguću rastegljivost tim detaljima, i nisam mogao a da me ne zavole ovu posebnu točku u radu svih ovih dodataka. Pojavila se ideja da se sav posao oko pozicioniranja pop-up prozora može prebaciti s ramena JS-a na ramena samog preglednika, odnosno da se taj posao može obaviti pomoću CSS-a.

To je ono što ćemo učiniti.

U nastavku ću dati primjer skočnog prozora koji radi u svim glavnim verzijama glavnih preglednika. Da bi ispravno radio u IE
< div class ="popup">

I malo CSS-a:

Skočni__preklop(
položaj: fiksni;
lijevo: 0;
vrh: 0;
širina: 100%;
visina: 100%;
z-indeks: 999
}
.iskočiti(
}

Fiksne veličine Najjednostavnija opcija. Nema potrebe izmišljati ništa novo:
Iskočiti (
lijevo: 50%;
vrh: 50%;
širina: 400px;
visina: 200px;
margin-lijevo: -200px;
margin-top : -100px
}

Negativne margine od pola širine i visine su banalne i dosadne, nema tu ništa originalno.Idemo dalje.
Veličina skočnog prozora ovisi o sadržaju. Prvo, horizontalno poravnanje - čini se da je ovo lakše. Ako je skočni prozor fiksne širine, sljedeće će biti dovoljno:
Iskočiti (
margina : auto
}

To ni na koji način neće utjecati na okomito poravnanje, a usput, ako vam je dovoljno samo vodoravno poravnanje, možete tu stati, navodeći neku drugu gornju marginu skočnog prozora. Ali ovo nam nije dovoljno! Samo naprijed.
Okomito poravnanje. Ovdje postaje zanimljivo. Naravno, tablica ili emulacija tablice koja koristi display: table & display: table-cell mogla bi se nositi s ovim zadatkom bez ikakvih problema, ali raditi ovo u starijem IE-u je skuplje. Stol također nestaje - iz očitih razloga.
Dakle, margina više nije potrebna - ne znamo veličine. Prisjetimo se koja svojstva postoje sa sličnim učincima. Da, poravnaj tekst. Ali samo za inline elemente. U REDU. Čini se da je sam Bog naredio korištenje display: inline-block - blok element na koji se mogu primijeniti svojstva za inline elemente. Uz podršku za ovo svojstvo u svim preglednicima, sve je također u redu. Kod postaje nešto poput ovoga:
Skočni__preklop(
položaj: fiksni;
lijevo: 0;
vrh: 0;
širina: 100%;
visina: 100%;
z-indeks: 999;
poravnanje teksta: središte
}
.iskočiti(
prikaz: inline -blok;
okomito poravnanje: sredina
}

Ono što ostaje je okomito poravnanje - vertikalno poravnanje će poslužiti za nas. U bilo kojoj drugoj situaciji također bi bilo prikladno koristiti line-height, ali budući da nemamo fiksnu visinu stranice (line-height u ovom kontekstu), ona se ne može koristiti ovdje. Jedan trik koji dolazi u pomoć je okomito poravnavanje elemenata nepoznatih veličina. Točno se sjećam da sam ovu metodu pronašao na Habréu, ali, nažalost, nisam mogao pronaći poveznicu na tu temu. Ova metoda sastoji se od sljedećeg: dodaje se inline-block element nulte širine i 100% visine nadređenog, koji "proširuje" visinu retka na 100% visine nadređenog, odnosno na visinu radne stranice. područje. Učinimo ovo elegantnijim - umjesto nepotrebnog označavanja, koristit ćemo pseudoelemente:
Popup__overlay :after (
prikaz: inline -blok;
širina: 0;
visina: 100%;
okomito poravnanje: sredina;
sadržaj: ""
}

Sve što ostaje je dodati prozirno zatamnjenje sloja - rgba će to riješiti. Svi! Sada položaj skočnog prozora kontroliraju samo alati preglednika na razini CSS-a.

U ovom vodiču naučit ćemo kako stvoriti modalni prozor koristeći HTML5 i CSS3. U ovom vodiču nećemo koristiti JS, samo puni CSS3. Modalni prozori mogu se koristiti za obrazac Povratne informacije, za fotografije i video zapise, a postoji još mnogo opcija za njegovo korištenje.

Počnimo s izradom našeg modalnog prozora.

Korak 1: HTML označavanje

Prije svega, moramo napraviti HTML markup, tj. napraviti poveznicu koja će otvoriti prozor i napraviti okvir za naš prozor. Da bismo to učinili, napišemo sljedeći kod:

Korak 2. Sadržaj modalnog prozora

Sada dodajmo sadržaj našeg prozora. Napravimo naslov i neki tekst i sve to stavimo u tag i ubacimo u kod umjesto elipse. Također moramo umetnuti link koji će zatvoriti naš prozor i dati mu class="close" . Ovako bi vaš kod trebao izgledati:
PROJEKT CRVENA ZVIJEZDA
REDSTAR je projekt posvećen temama koje vas već dugo zanimaju. Ovaj projekt sadrži besplatne lekcije i članke o raznim temama. Teme su vrlo raznolike, od jednostavnih Windows instalacije i završava razvojem web stranice.

Korak 3. Stilovi

Sada počnimo pisati stilove za naš prozor. U ovom koraku učinit ćemo naš prozor nevidljivim. Pojavit će se samo kada kliknete na poveznicu. Da bismo to učinili, pišemo stilove za našu klasu modalDialog:

ModalDialog ( pozicija: fiksna; obitelj fontova: Arial, Helvetica, sans-serif; vrh: 0; desno: 0; dolje: 0; lijevo: 0; pozadina: rgba(0,0,0,0.8); z-index : 99999; neprozirnost:0; -webkit-transition: neprozirnost 400ms lagano uvlačenje; -moz-prijelaz: neprozirnost 400ms lagano uvlačenje; prijelaz: neprozirnost 400ms lagano uvlačenje; prikaz: ništa; događaji pokazivača: ništa; )

Korak 4. Funkcionalnost i gledanje

U ovom koraku ćemo se uvjeriti da naš prozor već radi. Da bismo to učinili, dodajmo još nekoliko stilova za našu klasu modalDialog:

ModalDialog:target ( opacity:1; pointer-events: auto; display: block; ) .modalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px ; pozadina: #fff; pozadina: -moz-linear-gradient(#fff, #b8ecfb); pozadina: -webkit-linear-gradient(#fff, #b8ecfb); pozadina: -o-linear-gradient(#fff, #b8ecfb); )

U ovom koraku već možete vidjeti svoj prozor, on već radi. Ali gumb za zatvaranje ne izgleda baš lijepo.

Sada moramo dodati stilove za naš bliski razred.

Korak 5. Izrada gumba za zatvaranje

U ovom koraku poboljšat ćemo izgled našeg gumba koji će zatvoriti naš prozor. Da bismo to učinili, pišemo stilove za našu blisku klasu:

Zatvori ( pozadina: #606061; boja: #FFFFFF; visina linije: 25px; pozicija: apsolutna; desno: -12px; poravnanje teksta: središte; vrh: -10px; širina: 24px; dekoracija teksta: ništa; font- težina: podebljano; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:hover (pozadina: #860015;)

Pa, sada naš gumb izgleda onako kako je zamišljen. Za vas bi to trebalo izgledati ovako:

Ovo zaključuje ovu lekciju. Hvala na pozornosti! Radi vaše udobnosti, dodao sam demo verziju i izvorne datoteke. Ako nešto nije jasno, preuzmite izvorne datoteke.