Siguran sam da ste već upoznati sa svojstvom CSS border. Hoćete li naučiti nešto novo o css borderu što prije niste znali? Pa, ne samo da ćete naučiti, već ćete i vidjeti neke nove stvari koje nikada prije niste znali!
Ne samo da se CSS3 može koristiti za zaokruživanje kutova, već se čisti CSS kod također može koristiti za stvaranje složenih oblika. Ranije ste mogli koristiti pozadinsku sliku da biste ostavili dojam zaobljenih kutova. Zahvaljujući novim tehnikama obruba, to možemo učiniti u čistom CSS-u.
Osnove korištenja css granica
Vjerojatno ste već upoznati standardna uporaba svojstva granice:
Obrub: 1px puna crna;
Gornji kod će prikazati obrub od 1px koji će biti crn. Jednostavno i lako. Također možete malo proširiti sintaksu:
border-width: debeo; rubni stil: čvrsta boja obruba: crna
Kao dodatak mogu se koristiti specifične vrijednosti granična svojstva- širina, tri ključne riječi a: tanak, srednji, debeo.
Ali korištenje proširene sintakse nije uvijek praktično. Pogledajmo primjer u kojem želite promijeniti boju obruba bloka kada prijeđete pokazivačem iznad njega. U tom je slučaju korištenje skraćene sintakse puno lakše:
Okvir (obrub: 1px puno crveno; ) .box:hover ( obrub: 1px puno zeleno; )
Elegantnije i jednostavnije može se učiniti ovako:
Okvir (obrub: 1px puna crvena; ) .box:hover (boja obruba: zelena; )
Kao što vidite, napredna tehnika je također korisna kada mijenjamo samo neka svojstva: širinu, stil, boju i druga.
granični radijus
Granica-radius je "zlatno" svojstvo CSS3 - prvo, najčešće svojstvo koje je postalo praktično i korisno. Isključujući IE8 i starije, svi preglednici prikazuju zaobljene kutove s ovim.
No, potrebno je koristiti posebne prefikse za Webkit i Mozillu da bi stil bio točan.
webkit-border-radius: 10px; -moz-border-radius: 10px; rubni radijus: 10px
Danas možemo ukloniti posebne prefikse i koristiti standardni oblik obruba radijusa.
Još jedna pogodnost je da možemo koristiti posebne vrijednosti za svaku stranu bloka:
border-top-left-radius: 20px; granica-gore-desno-radijus: 0; granica-dolje-desno-radijus: 30px; granica-dolje-lijevo-radijus: 0;
U gornjem kodu, postavljanjem border-top-right-radius i border-bottom-left-radius na "nulu", mogu se postići nevjerojatni oblici. Iako element može naslijediti neka svojstva koja će se morati poništiti.
Poput margine i paddinga, možemo sažeti sintaksu:
/* gore lijevo Gore desno, dolje desno, dolje lijevo */ border-radius: 20px 0 30px 0;
Kao primjer, koristeći svojstvo border-radius, pokazat ću vam "limun" koji dizajneri često koriste kada postavljaju web stranice:
Limun (širina: 200px; visina: 200px; pozadina: #F5F240; obrub: 1px puni #F0D900; radijus obruba: 10px 150px 30px 150px; )
Nadilazeći osnove
U mnogim dizajnerima svo znanje iz tog područja css svojstva granica, tu završava. Ali ima ih još nekoliko cool stvari s kojima možete stvarati nevjerojatne stvari!
Složene css granične strukture
Postoje mnoge tehnike za projektiranje složenih graničnih struktura. Na primjer, razmotrite sljedeće...
rubni stil
Uvijek koristimo najpoznatija svojstva puna, isprekidana i točkasta. Ali postoji nekoliko drugih svojstava stila obruba: utor i greben.
Obrub: 20px utor #e3e3e3;
Ili u proširenoj sintaksi:
boja obruba: #e3e3e3; border-width: 20px rubni stil: žlijeb;
Iako su ova svojstva korisna, ona nisu osnova za stvaranje složenih okvira.
obris
Najpopularnija tehnika dvostrukog obruba je korištenje svojstva obrisa.
Kutija (obrub: 5px puni #292929; obris: 5px puni #e3e3e3;)
Ova metoda radi odlično, iako nas ograničava na samo dva okvira. Ponekad trebate stvoriti gradijentnu granicu koja se sastoji od mnogo slojeva... kako onda?
Pseudo elementi
Kada tehnika obrisa nije dovoljna, alternativna sredstva je korištenje pseudo elemenata :before i :after. S kojim možete dodati dodatne granice elementu:
Okvir (širina: 200px; visina: 200px; pozadina: #e3e3e3; položaj: relativan; obrub: 10px puno zeleno; ) /* Stvorite dva okvira s ista širina spremnika */ .box:after, .box:before ( sadržaj: ""; pozicija: apsolutna; vrh: 0; lijevo: 0; dno: 0; desno: 0; ) .box:after ( granica: 5 px puno crveno; obris: 5 px puno žuto; ) .box:before ( obrub: 10 px puno plavo; )
Ne izgleda baš elegantno, ali barem, radi. Malo je problematično nositi se s redoslijedom boja unutar ... ali možete razumjeti.
Box Shadow
Zanimljiv "djetinjast" način stvaranja ovog efekta je korištenje CSS3 svojstva box-shadow:
Okvir ( obrub: 5 px puna crvena; sjena okvira: 0 0 0 5 px zelena, 0 0 0 10 px žuta, 0 0 0 15 px narančasta; )
U ovom smo slučaju bili pametniji, koristeći namjensko svojstvo box-shadow. Promjenom parametara x, y, zamućenja na nulu, možemo koristiti različite boje za stvaranje više okvira.
Ali postoji problem, u starijim preglednicima koji ne razumiju svojstvo box-shadow, bit će vidljiv samo jedan crveni obrub od 5 piksela.
"Zapamtiti! Dizajn stranice trebao bi izgledati cross-browserski, odnosno isti u svim preglednicima. Uključujući starije verzije.
Mijenjanje kutova
Pored korištenog jednostavno značenje border-radius, možemo specificirati dva odvojena - odvajajući ih s / odredit ćemo vodoravni i okomiti radijus.
Na primjer:
Polumjer ruba: 50px / 100px /* vodoravni radijus, okomiti radijus */
... ovo je ekvivalentno:
Border-top-left-radius: 50px 100px; granica-gore-desno-radijus: 50px 100px; granica-dolje-desno-radijus: 50px 100px; granica-dolje-lijevo-radijus: 50px 100px;
Ova tehnika je prikladna za stvaranje jedinstvenih oblika blokova. Na primjer, evo kako stvoriti učinak zamotanog papira:
Okvir (širina: 200px; visina: 200px; pozadina: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; )
CSS oblici koji koriste okvir
Ova tehnika pokazuje kako možete stvoriti CSS forme koristeći elemente s nultim dimenzijama visine i širine. Iznenađen? Pogledajmo primjer...
Za sljedećih nekoliko primjera koristit ćemo sljedeće oznake:
...i sljedeći osnovni stil:
Okvir (širina: 200 px; visina: 200 px; pozadina: crna; )
Najčešći primjer Upotreba CSS-a oblici - stvarajući tekuću strelicu. Tajna ove strelice leži u stvaranju obruba sa različite boje za svaku stranu. Zatim, stavljamo atributi širine a visina do 0.
Dodijelimo klasu strelica div bloku:
Strelica (širina: 0; visina: 0; obrub-gornje: 100px puno crveno; obrub-desno: 100px puno zeleno; rub-dno: 100px puno plavo; rub-lijevo: 100px puno žuto; )
Za demonstraciju, prvo koristimo proširenu sintaksu. Dalje, možemo ukloniti dodatni kod, koristeći skraćenu sintaksu:
Strelica ( širina: 0; visina: 0; obrub: 100 px čvrsta; boja obruba: crvena zelena plava žuta; )
Zanimljivo, zar ne? Sada ćemo postaviti prozirne boje na sve strane osim na plavu stranu.
Strelica ( širina: 0; visina: 0; obrub: 100 px čvrsta; boja donje granice: plava; )
Super je ispalo! Ali ovo je u suprotnosti semantički raspored, stvorite .arrow div, samo da dodate strelicu na stranicu. U tu svrhu možemo koristiti pseudoelemente, što ćemo sada učiniti.
Napravite govorni oblačić
Za izradu oblačića govora potreban nam je mali komad čisti CSS kod i jedan div blok.
Oblačić govora (položaj: relativan; boja pozadine: #292929; širina: 200 px; visina: 150 px; visina linije: 150 px; /* okomito središte */ boja: bijela; poravnanje teksta: središte; )
Govorni oblačić:nakon ( sadržaj: ""; )
U ovom trenutku ćemo kreirati strelicu koju smo prije napravili, dodati je elementu i sve što preostaje je postaviti je u poziciju:
Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; )
Ako želimo da strelica pokazuje prema dolje, morat ćemo postaviti sve obrube na prozirne osim gornjeg.
Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; )
Kada ovo stvorimo CSS obrazac, ne možemo konkretno odrediti veličinu strelice. Umjesto toga, možemo postaviti svojstvo border-width, koje će postaviti veličinu strelice. Također ćemo postaviti položaj strelice na donju sredinu. U skladu s tim, za to koristimo gornju i lijevu vrijednost.
Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; )
Osim toga, ostaje nam dati boju istu kao i blok. Upamtite, prilikom pozicioniranja morate uzeti u obzir veličinu ostalih obruba koji su nevidljivi (15px). Bloku ćemo također zaokružiti uglove.
Speech-bubble ( /* ... ostali stilovi */ border-radius: 10px; ) .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border -gore -boja: #292929; gore: 100%; lijevo: 50%; margina-lijevo: -15px; /* podešavanje širine obruba */ )
Nije loše, ha? Koristeći nekoliko css klasa i trikova s granicama, možete stvoriti takvu stvar.
/* Upotreba oblačića govora: Primijenite klasu .speech-bubble i .speech-bubble-DIRECTION kao što je prikazano u nastavku
Bonus! Okomito centriranje unutar bloka
Za jedan red teksta može se koristiti line-height. Ali ako imate dva ili više linija tekst... najbolje rješenjeće postaviti svojstvo prikaza na tablicu i staviti sav tekst u paragraf. Evo kako to izgleda na html markup:
Speech-bubble ( /* drugi stilovi */ display: table; ) .speech-bubble p ( display: table-cell; vertical-align: middle; )
Nismo ograničeni na trokute. CSS može prikazati različite oblike - čak i srca i znak biološke opasnosti.
Biohazard (širina: 0; visina: 0; obrub: 60 px čvrst; radijus obruba: 50%; boja gornjeg obruba: crna; boja donjeg obruba: crna; boja lijevog obruba: žuta; obrub-desni- boja: žuta ;)
Zaključak
Za kontrolu granice elementa, koristite generičko svojstvo granica. Ovo svojstvo omogućuje postavljanje širine, stila i boje obruba elementa u jednoj deklaraciji.
Ova tri svojstva (širina, stil i boja obruba) mogu se postaviti u jednoj deklaraciji. Evo primjera:
Stil obruba možete navesti samo na jednoj strani elementa. Da biste to učinili, koristite svojstva border-top (gornja granica), border-right (desna granica), border-bottom (donja granica), border-left (lijeva granica).
U ovom primjeru, svaka strana bloka ima vlastitu debljinu ruba, stil i boju.
Razmislite kako CSS pomoć možete stvoriti oblik poput ovog:
Vrijednosti obruba - debljina, stil i boja - mogu se postaviti zasebno pomoću posebnih svojstava.
- border-style - stil obruba.
- border-width - širina obruba.
- border-color - boja obruba.
Razmotrimo svaku od vrijednosti zasebno.
Svojstvo u stilu ruba. Stil obruba.
Svojstvo border-style postavlja stil obruba. U CSS-u, u HTML razlike, granica elementa može biti bilo što drugo osim čvrsta. Valjane vrijednosti za stil obruba su:
- nijedan - nema granice (zadano).
- solid - čvrsta granica.
- dvostruki - dvostruki rub.
- crtkano - točkasti obrub.
- točkasta - obrub sastavljen od niza točaka.
- sljeme - granica "sljemena".
- žlijeb - granični "žlijeb".
- umetnuti - umetnuti rub.
- početak - ekstrudirani rub.
Primjeri kako izgledaju.
bez granice (nema)
čvrsta granica (puna)
dvostruki rub (dvostruki)
točkasta granica (točkasta)
točkasti obrub (isprekidano)
rub utora (utor)
rub grebena
uvučeni rub (umetnuti)
ekstrudirani rub (početak)
Usput, ako postavite boju obruba na crnu za okvir grebena, dobit ćete sljedeći rezultat.
Div blok s crnim rubom i stilom grebena.
Granica izgleda kao čvrsta, ali to je zato što se stil grebena stvara dodavanjem efekta crne sjene, a crni efekt na crnoj granici nije vidljiv.
Uz pomoć svojstva border-style, stil ruba se može postaviti ne samo za sve strane bloka. Moguće je postaviti više vrijednosti za isto svojstvo stila obruba, ovisno o broju vrijednosti, stil obruba bit će dodijeljen različitom broju strana bloka. Možete postaviti jednu, dvije, tri ili četiri vrijednosti. Pogledajmo primjere za svaki slučaj.
Jedna vrijednost (puno) - stil obruba postavljen je za sve strane bloka.
Dvije vrijednosti (solid double) - prva vrijednost postavlja stil za gornju i donju stranu, druga za stranu.
Tri vrijednosti (pune dvostruke točke) - prva vrijednost za gornju stranu, druga za strane, treća za dno.
Četiri vrijednosti (pune dvostruke isprekidane točke) - svaka vrijednost za jednu stranu u smjeru kazaljke na satu od vrha.
Svojstvo border-width. Debljina granice.
Svojstvo border-width koristi se za postavljanje širine obruba elementa. Debljina obruba može se odrediti u bilo kojoj apsolutnoj jedinici mjere, kao što su pikseli.
Poput svojstva stila obruba, svojstvo se također može postaviti na jednu do četiri vrijednosti. Razmotrite primjere za svaki slučaj.
Primjer koda:
Također postoje vrijednosti ključnih riječi za svojstvo border-width. Ima ih ukupno tri:
- tanka - tanka granica;
- srednje - srednje debljine;
- debeli - debeli rub;
Debljina obruba: tanka.
Debljina obruba: srednja.
Debljina obruba: deblj.
Svojstvo border-color. Boja obruba.
Mogućnost border-color koristi se za kontrolu boje ruba. Boje za ovo svojstvo mogu se postaviti bilo kojom od metoda opisanih u članku Boje u CSS-u, naime:
- Heksadecimalni zapis (#ff00aa ) boje.
- RGB format je rgb(255,12,110). RGBA format za CSS3.
- HSL formati i HSLA za CSS3.
- Naziv boje, na primjer crna (crna). Cijeli popis Nazivi boja navedeni su u tablici CSS naziva boja.
Svojstvo border-color također može imati jednu do četiri vrijednosti i tretira ih slično kao prethodna svojstva.
Jedna vrijednost (crveno).
Dvije vrijednosti (crveno crno).
Tri vrijednosti (crvena crna žuta).
Četiri vrijednosti (crveno crno žuto plavo).
Sada se vratimo gore navedenom zadatku i nacrtajmo figuru:
Evo koda koji crta takav oblik, samo veći:
Zasebno postavljanje vrijednosti za strane
Kao što je gore spomenuto, možete navesti samo vrijednosti svojstva obruba za jednu stranu okvira. U ove svrhe postoje svojstva:
- border-top (gornja granica)
- border-desno (desni rub)
- border-bottom (donja granica)
- border-left (lijeva granica)
Dopustite mi da vas podsjetim da su za sva svojstva navedene tri vrijednosti (debljina, stil i boja) bilo kojim redoslijedom. Ali postoje svojstva koja vam omogućuju da postavite debljinu, boju i stil za svaku stranu zasebno. Pisanje ovih svojstava proizlazi iz gore navedenog.
Opcije gornjeg ruba (border-top).
- border-top-color - postavlja boju gornjeg ruba elementa.
- border-top-width - postavlja širinu gornje granice elementa.
- border-top-style - postavlja stil gornje granice elementa.
Opcije desnog obruba (border-desno).
- border-right-color - postavlja boju desnog ruba elementa.
- border-right-width - postavlja širinu desnog ruba elementa.
- border-right-style - postavlja stil desnog obruba elementa.
Opcije donjeg ruba (border-bottom).
- border-bottom-color - postavlja boju donjeg ruba elementa.
- border-bottom-width - postavlja širinu donjeg ruba elementa.
- border-bottom-style - postavlja stil donje granice elementa.
Opcije lijevog obruba (border-left).
- border-left-color - postavlja boju lijevog ruba elementa.
- border-left-width - postavlja širinu lijevog ruba elementa.
- border-left-style - postavlja stil lijevog obruba elementa.
Primjer korištenja ovih svojstava:
- redefinirao je boju gornjeg ruba sa svojstvom border-top-color u crvenu,
- koristeći svojstvo border-right-width, debljina desnog ruba je postavljena na 10px,
- koristeći svojstvo border-bottom-style, stil donjeg ruba je redefiniran kao dvostruki,
- koristeći svojstvo border-left-color, lijevi rub je postavljen na plavu.
Svojstvo border-radius. Zaokruživanje uglova granice.
Svojstvo border-radius služi za zaokruživanje uglova obruba elementa. Ovo svojstvo uvedeno je u CSS3 i radi ispravno u svim modernim preglednicima osim u Internet Exploreru 8 (i starijim verzijama).
Vrijednosti mogu biti bilo koji brojevi koji se koriste u CSS-u.
svojstvo border-radius: 15px.
Ako okvir bloka nije postavljen, zaokruživanje se događa s pozadinom. Evo primjera zaokruživanja bloka bez obruba, ali s bojom pozadine:
svojstvo border-radius: 15px.
Postoje svojstva za zaokruživanje svakog pojedinog kuta elementa. Ovaj primjer koristi sve njih:
border-top-left-radius: 15px; granica-gore-desno-radijus: 0; granica-dolje-desno-radijus: 15px; granica-dolje-lijevo-radijus: 0;
svojstvo border-radius: 15px.
Iako se ovaj kod može napisati u jednoj deklaraciji: border-radius : 15px 0 15px 0 . Činjenica je da za svojstvo border-radius možete postaviti od jedne do četiri vrijednosti. Donja tablica sažima pravila koja reguliraju takve deklaracije.
Pažljivim proučavanjem ove tablice možete shvatiti da će najkraći unos za željeni stil biti: border-radius : 15px 0 . Postoje samo dvije vrijednosti.
Malo vježbe
Nacrtajte limun koristeći CSS.
Evo koda za takav blok:
Margina: 0 auto; /* Centrirajte blok */ width: 200px; visina: 200px; pozadina: #F5F240; rub: 1px puni #F0D900; rubni radijus: 10px 150px 30px 150px;
Figuru smo već nacrtali:
Sada ostavimo trokut iz njega:
Kod trokuta je:
Margina: 0 auto; /* Centrirajte blok */ padding: 0px; širina: 0px visina: 0; obrub: 30px puna bijela; boja obruba-dna: crvena;
CSS svojstvo obruba prilagođava se za stvaranje obruba objekta, odnosno za debljinu obruba, njegovu boju i stil. Ovo se svojstvo široko koristi u HTML-u. Možete kreirati različite efekte za bolju percepciju sadržaja na stranici. Na primjer, dizajnirajte bočnu traku, zaglavlje stranice, izbornik itd.
1. Sintaksa CSS obruba
granica: širina obruba stil obruba boja obruba | naslijediti;
- border-width - širina granice. Možete ga postaviti u pikselima (px) ili koristiti standardne vrijednosti tanki, srednji, debeli (razlikuju se samo u širini piksela)
- border-style - stil prikazanog okvira. Može uzeti sljedeće vrijednosti
- nijedan ili skriven - poništava obrub
- točkasti – točkasti okvir
- crtkana - crtica okvir
- puna - jednostavna linija (najčešće se koristi)
- dvostruko- dupli okvir
- utor - užlijebljeni 3D rub
- greben , umetak , ispad - različiti efekti 3D okvira
- naslijediti - primjenjuje se vrijednost nadređenog elementa
- border-color - boja obruba. Može se odrediti korištenjem određenog naziva boje ili u RGB formatu (pogledajte html nazive boja za web mjesto)
Vrijednosti u svojstvu CSS granice mogu se postaviti bilo kojim redoslijedom. Najčešće korišteni niz je "boja stila debljine".
2. Primjeri s različitim CSS obrubima
2.1. Primjer. Različiti stilovi obruba
rubni stil: isprekidanrubni stil: isprekidanrubni stil: čvrstarubni stil: dvostrukiborder-style: žlijebrubni stil: grebenrubni stil: umetnutirubni stil: početakČetiri različita okvira
rubni stil: točkasto
rubni stil: isprekidan
rubni stil: čvrsta
rubni stil: dvostruki
border-style: žlijeb
rubni stil: greben
rubni stil: umetnuti
rubni stil: početak
Četiri različita okvira
2.2. Primjer. Promjena boje obruba pri lebdenju
Ovaj primjer je vrlo jednostavan, ali zanimljiv. Pokazuje kako možete koristiti pseudo-klasu :hover i CSS okvir za stvaranje jednostavni efekti(na primjer, za jelovnik).
Kada prijeđete mišem preko bloka, promijenit će se boja okvira.
Evo kako to izgleda na stranici:
2.3. Primjer. Kako napraviti prozirnu granicu
Okvir može biti proziran. Ovaj je učinak rijedak, ali ponekad može biti vrlo koristan za web dizajnere. Za postavljanje prozirnosti potrebno je koristiti postavku boje u obliku RGBA (R, G, B, P) , gdje zadnji parametar postavljena je transparentnost (stvarni broj od 0,0 do 1,0)
Evo kako to izgleda na stranici:
3. Debljina granice: svojstvo širine granice
Postavlja debljinu linije. Prethodno smo to tražili pojedinačni opis granica.
CSS sintaksa border-width
širina granice: tanak | srednje | debeli | značenje;
- tanka - debljina tanke linije
- srednje - prosječna debljina linije
- debeli - debela debljina linije
Dolje je nekoliko primjera. Najneobičnija stvar bit će različita debljina obruba sa svake strane.
border-width: tankaborder-width: srednjeborder-width: debeoRazličite debljine na rubovima
Evo kako to izgleda na stranici:
border-width: tanka
border-width: srednje
border-width: debeo
Različite debljine na rubovima
4. Kako napraviti rubni okvir sa samo jednim rubom (border)
CSS svojstvo granice ima izvedena svojstva za postavljanje jednostranih granica na elementu:
- border-top - za postavljanje gornje granice (gornja granica)
- border-bottom - za postavljanje donje granice (donja granica)
- border-desno - za postavljanje granice s desne strane (desna granica)
- border-left - za postavljanje granice s lijeve strane (lijeva granica)
Te se granice mogu kombinirati, tj. napišite okvir za svaki smjer. Sintaksa je potpuno ista kao i za obrub.
Tu su i svojstva
- border-top-color - postavite boju gornjeg ruba
- border-top-style - postavi gornji stil obruba
- border-top-width - postavite širinu gornjeg ruba
- itd. za svaki smjer
Po mom mišljenju, lakše je napisati sve u redu nego proizvesti dodatni tekst u stilovima. Na primjer, sljedeća svojstva bit će isto
/* Opis dva identična stila: */
4.1. Primjer. Prekrasan okvir za isticanje citata
Primjer okvira citata
Evo kako to izgleda na stranici:
Primjer okvira citata
Bilješka
Za svaku stranu možete postaviti zasebnu granicu.
5. Kako napraviti više obruba na html elementu
Ponekad morate napraviti više obruba. Navedimo primjer
5.1. Prva opcija s više obruba
Evo kako to izgleda na stranici:
Postoji drugi način kroz preklapanje sjena.
5.2. Prekrivajte sjene za stvaranje više obruba
Evo kako to izgleda na stranici:
6. Zaokruživanje uglova na granicama (border-radius)
Za stvaranje lijepi okviri koristite svojstvo CSS border-radius (dostupno samo u CSS3). Njime možete napraviti zaobljene kutove, što stvara potpuno drugačiji izgled. Na primjer
7. CSS uvučena linija
Reljefne linije mogu izgledati spektakularno tamna pozadina, što nije prikladno za svaku stranicu.
Evo kako to izgleda na stranici:
Da biste pristupili granici iz JavaScripta, trebate napisati sljedeću konstrukciju:
document.getElementById("elementID").style.border="VALUE "(!LANG:
16. lipnja 2016
Pozdrav svima. Danas ću vam reći zašto, prilikom postavljanja web stranica, ponekad prave prozirnu granicu u css-u, odnosno nevidljivu granicu elementa.
Zašto vam je potreban prozirni okvir?
Prilikom postavljanja sljedećeg izgleda postojao je takav zadatak: kada zadržite pokazivač iznad stavke izbornika, ona bi trebala imati podcrtano. I to ne za tekst, nego za cijeli blok s vezom. Za one koji razumiju izgled, sve je prilično jednostavno i razumljivo ovaj slučaj. Samo trebate dodati svojstvo border-bottom na vezu kada prijeđete pokazivačem iznad nje. Ali ako to samo tako radite, neće biti baš lijepo i sjajno. Sada ću vam pokazati primjer. kao ovo html kod potrebno za stvaranje jednostavan izbornik za 4 boda:
Općenito, propisani su mu neki stilovi, ali neću ih sve dati. Zanima nas učinak podcrtavanja kada lebdite iznad stavke. Provodi se ovako:
Izbornik li a:hover( border-bottom: 5px solid brown; )
Sve je vrlo jednostavno, ali rezultat je ovaj (zadržite pokazivač iznad bilo koje stavke):
Slažem se, nije baš lijepo. Osim toga, neki sadržaj će se nalaziti ispod i pomaknut će se 5 piksela prema dolje svaki put kada dođe do lebđenja. Kao što znate, okvir povećava veličinu elementa.
Zapravo, da biste riješili problem, samo trebate prvo postaviti vezu na isti okvir debljine 5 piksela, ali prozirna boja. U ovom slučaju, kada lebdite, promijenit će se samo boja okvira.
Izbornik li a( border-bottom: 5px solid transparent; )
Donio sam samo jedno svojstvo, ostali stilovi nas ne zanimaju, možete ih sami propisati. Sada, kada lebdite, neće doći do trzanja, možete se uvjeriti u ovo:
Super, nadam se da sam odgovorio na pitanje, zašto je to potrebno u css-u prozirni okvir. Možda ima neku drugu namjenu. Točnije, ne moguće, ali definitivno. Može se koristiti za stvaranje trokuta. Kako, vidi. Dakle, ovo su opcije za korištenje prozirnog okvira.
