U procesu dizajniranja web stranice, mnogi početnici u izradi web stranica pitaju se kako promijeniti font, veličinu i boju naslova. Da stvarno je tako odlična opcija, s kojim možete unijeti malo svježine u dizajn stranice. Ali postoji još jedno jednako intrigantno pitanje: kako napraviti html okvir.

Čemu služi html okvir?

Zapravo, nema posebne funkcije ovaj element ne nosi. No, ipak, tekst, zatvoren u atraktivno oblikovan okvir, izaziva određeno zanimanje čitatelja. Stoga se okvir oko teksta sa sigurnošću može nazvati jednim od načina da se naglasi važnost uokvirenog teksta.

Značajke stvaranja okvira oko teksta

Naravno, varijacije u dizajnu okvira koristeći CSS mnogo više, ali to je sasvim druga priča. Osim toga, ova je metoda prikladna za naprednije graditelje stranica. Mislim da ti i ja i uz pomoć uređivanja html kod neće ispasti ništa manje prekrasan okvir html.

U prvoj fazi morate shvatiti da se okvir može napraviti za svakoga html element bez obzira o kakvoj se oznaci radi

,

, , itd.

S druge strane, postoji razlika između ugrađenih okvira i blok elementi.

Okvir ugrađenog tipa nalazi se unutar oznaka, točnije, html kod odgovoran za njegov prikaz nalazi se između pojedinih oznaka. Kao rezultat, dobivamo html okvir oko teksta, za koji trebamo napisati određene naredbe za postavljanje unutarnjih uvlaka.

Okviri bloka formiraju se cijelom širinom bloka, što izaziva potrebu za zadavanjem naredbi vezanih uz ograničavanje širine.

Naravno, da bismo napravili tekst u html okviru, morat ćemo se okrenuti ugrađenim stilovima. Ova metoda bit će najprikladniji za isticanje pojedinih fraza, odlomaka u tekstu i slikama. Ako trebate istaknuti određeni dio predloška koji se prikazuje na svim stranicama stranice, razumno je urediti datoteku style.css predloška.

Kako napraviti okvir oko teksta u html-u

Mislim da postoji dosta teorije. Vrijeme je za vježbu. Kao primjer, priložit ću svijetlo svijetlozeleni okvir s siva pozadina jedan od važnih prijedloga ovog članka.

Važna točka! Ugrađeni stilovi rade izvrsno i ne štete Valjanost HTML-a mjesto.

Da biste implementirali isti okvir, morate se pozvati na oznaku

VAŠ PRIJEDLOG.

Budući da je u u ovom primjeru ugrađeni css stilovi, smatram jednako važnim upoznati vas sa svakim od njih.

1. granica– svojstvo odgovorno za prikazivanje okvira. Kako bih pojednostavio zadatak, nisam odredio svako svojstvo zasebno - border-width (debljina obruba okvira), border-color (boja html okvir). Umjesto toga, malo sam skratio html kod ispisujući sva svojstva iza dvotačke.

Za promjenu izgled okvir samo promijenite vrijednost čvrsta. Postoje sljedeće granice okvira:

Greben – reljef.

Točkasto – točkasto.

Duplo - duplo.

Crtkano – točkasto.

Čvrsto - čvrsto.

2. podstava– svojstvo odgovorno za udaljenost između okvira i predmeta koji je u njemu zatvoren.

Ako želite, možete se još malo poigrati sa stilovima dodavanjem broja naredbi između početnih i završnih oznaka

Vlasništvo margina. Na taj način možete uvući elemente koji su izvan okvira.

kako bi se promijenio pozadina Dovoljno je registrirati svojstvo boje pozadine, navodeći kod željene boje iza dvotačke.

Okvir okolo html slike Radi se na isti način, tako da ne biste trebali imati problema s tim. Jedina stvar koju početnik treba znati je da da bi je prikazao, svojstva moraju biti zapisana u jednoj oznaci .

Ukratko, možemo reći da je za izradu okvira oko slike ili teksta dovoljno otvoriti prikaz html koda članka i upisati posebna svojstva između određenih oznaka.

Hvala vam na pažnji i vidimo se uskoro na stranicama Stimylrosta.

Pronađen u tekstu gramatička greška? Prijavite ovo administratoru: odaberite tekst i pritisnite kombinaciju prečaca Ctrl+Enter

Vlad Merzhevich

Koristeći CSS, možete dodati obrub elementu na nekoliko načina. U osnovi se, naravno, koristi granični posjed, kao najuniverzalniji, kao i obris i, iznenađujuće, box-shadow , čiji je glavni zadatak stvaranje sjene. Zatim ćemo razmotriti ove metode i njihove međusobne razlike.

ocrtati svojstvo

Najjednostavnije svojstvo za stvaranje okvira. Ima iste parametre kao border , ali se značajno razlikuje u nekim detaljima:

• obris se prikazuje oko elementa (borba iznutra);
• obris ne utječe na dimenzije elementa (obrub se dodaje širini i visini elementa);
• obris se može postaviti samo oko cijelog elementa, ali ne i na pojedinačnim stranama (obrub se može koristiti za bilo koju stranu ili sve odjednom);
• na obris ne utječe radijus zaokruživanja određen svojstvom border-radius (utječe na rub).

Postavlja se pitanje - u kojim slučajevima je potreban okvir, kada njegovu ulogu, unatoč navedenim razlikama, u potpunosti preuzima granica? Nema mnogo situacija, ali se događaju:

• stvaranje složenih raznobojnih okvira;
• dodavanje okvira elementu kada prijeđete mišem preko njega;
• skrivanje obruba koje preglednik automatski dodaje nekim elementima prilikom primanja fokusa;
• za obris, možete postaviti udaljenost od ruba elementa do okvira koristeći svojstvo outline-offset, za stvaranje .

Višebojni okviri

Morate razumjeti da obris ni na koji način ne zamjenjuje obrub i može lako postojati zajedno s njim, kao što je prikazano u primjeru 1.

Primjer 1: Stvaranje okvira

U ovom primjeru oko elementa je dodan crni okvir koji je bijelim rubom odvojen od pozadine (slika 1).

Riža. 1. Okvir oko elementa

Okvir kada koristite: lebdite

Prilikom dodavanja okvira preko bordera širina elementa se povećava, što je dosta vidljivo kada se kombinira border i pseudoklasa :hover. Postoje dva načina da ovo "pobijedite". Najjednostavnije je zamijeniti border s outline, što, kao što znamo, ne utječe na veličinu elementa (primjer 2).

Primjer 2: okvir na lebdenju

obris nije uvijek prikladan, makar samo zato što zaokruživanje kutova ne utječe na njega. Ovdje je prikladna druga metoda - dodajte nevidljivi okvir ili okvir koji odgovara boji pozadine, a zatim promijenite njegove parametre kada lebdite (primjer 3). Tada neće doći do pomaka elementa, budući da okvir u početku već postoji. Ali uvijek se sjećamo da se širina elementa sastoji od vrijednosti širine, rub na lijevoj strani i rub na desnoj strani. Slična je situacija i s visinom.

Primjer 3: okvir na lebdenju

Obrub oko polja obrasca

U nekim preglednicima (Chrome, Safari, najnovije verzije Opera) mala ikona se prikazuje oko polja obrasca kada dobiju fokus. okvir u boji(slika 2). Da biste ga uklonili, samo ga dodajte svojstvu obrisa u stilovima vrijednost nijedna, kao što je prikazano u primjeru 4.

Riža. 2. Uokvirite rubove

Primjer 4. Uklanjanje okvira

Okviri putem box-shadowa

Iako je svojstvo box-shadow namijenjeno za dodavanje sjene oko elementa, ono se također može koristiti za stvaranje obruba koji se ne mogu stvoriti korištenjem obruba ili obrisa. To je sve zahvaljujući činjenici da broj sjena može biti neograničen, čiji su parametri navedeni odvojeni zarezima.

Da biste dobili okvir, prva tri parametra trebaju biti postavljena na nulu; oni su odgovorni za položaj sjene i njeno zamućenje. Četvrti parametar u u ovom slučaju je odgovoran za debljinu obruba, a peti postavlja boju obruba. Za drugi okvir, četvrti parametar je jednak zbroju debljina dvaju okvira.

Primjer 4 pokazuje kako dodati dva okvira i jednu granicu s desne strane koristeći jedno svojstvo box-shadow.

Primjer 4: Korištenje box-shadowa

Rezultat ovog primjera prikazan je na sl. 3.

Riža. 3. Okviri stvoreni svojstvom box-shadow

CSS3 okvir nadopunjuje mogućnost oblikovanja obruba elementa svojstvima koja dopuštaju zaokružite uglove element, a također koristiti Slike za oblikovanje granica elementa.

Zaobljeni kutovi i okviri za slike

1. Zaokruživanje kutova s ​​rubnim radijusom

Podrška za preglednik

IE: 9.0
Firefox: 4.0
Krom: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android preglednik: 4.1
Krom za Android: 44

Svojstvo vam omogućuje zaokruživanje kutova inline i blok elemenata. Krivulja za svaki kut definirana je pomoću jednog ili dva radijusa koji definiraju njegov oblik − krug ili elipsa. Radijus se primjenjuje na cijelu pozadinu, čak i ako element nema rub, točan položaj sekante određuje se korištenjem svojstva background-clip.

Svojstvo border-radius omogućuje vam da zaoblite sve kutove odjednom, a korištenjem svojstava border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius može zaokružiti svaki kut posebno .

Ako postavite dvije vrijednosti za svojstvo border-radius, prva vrijednost će zaokružiti gore lijevo I donji desni kut, a drugi - Gore desno I Dolje lijevo.

Vrijednosti navedene kroz / odrediti horizontalna I okomiti radijusi. Imovina se ne nasljeđuje.

Mogućnosti

Div (širina: 100px; visina: 100px; obrub: 5px pun;).r1 (radijus granice: 0 0 20px 20px;).r2 (radijus granice: 0 10px 20px;).r3 (radijus granice: 10px 20px ;) .r4 (radijus granice: 10px/20px;) .r5 (radijus granice: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (radijus granice: 10px 20px 30px 40px/30px;) .r7 ( rubni radijus: 50%;).r8 (border-bottom: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-left-radius: 100px;).r10 (border-radius -radijus: 0 100%;).r11 (radijus granice: 0 50% 50% 50%;).r12 (radijus granice-gore-lijevo: 100% 20px; radijus granice-dolje-desno: 100% 20px ;)
Riža. 1. Primjeri razne opcije zaokruživanje uglova bloka

2. Granica-slika

Podrška za preglednik

IE: 11.0
Firefox: 15,0, 3,5 -moz-
Krom: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android preglednik: 4.4, 4.1 -webkit-
Chrome za Android: 42

Svojstvo vam omogućuje postavljanje slike kao okvira elementa. Glavni uvjet za sliku je da mora biti simetrična. Nekretnina uključuje sljedeće vrijednosti: (border-image: širina izvorni isječak ponavlja početak;) .

Uz pomoć ovoga jednostavna slika Ove okvire možete dobiti za element.

/* Primjer 1 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; ) /* Primjer 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); rub-image-slice: 30; border-image-repeat: round; )
Riža. 2. Primjer oblikovanja granica blokova pomoću slike

Rezovi A - B - C - D tvore kutove okvira, a dio dizajna koji se nalazi između njih ispunjava preostali prostor okvira u skladu s dana vrijednost svojstva ponavljanja granične slike. Veličina kutnog dijela (u ovom primjeru broj 30) postavlja se korištenjem vrijednosti svojstva border-image-slice.

2.1. rub-slike-width

Svojstvo određuje širinu slike za obrub elementa. Ako širina nije navedena, zadana je vrijednost 1.

rub-slike-width
Vrijednosti:
duljina	Postavlja širinu obruba u jedinicama duljine - px/em. Možete postaviti od jedne do četiri vrijednosti odjednom. Ako je navedena jedna vrijednost, tada je širina svih strana okvira ista, dvije vrijednosti određuju širinu gore-dolje i desno-lijevo itd.
broj	Numerička vrijednost kojom se množi vrijednost širine ruba.
%	Širina okvira elementa izračunava se u odnosu na veličinu slike. Horizontalno u odnosu na širinu, okomito - u odnosu na visinu.
auto	Odgovara vrijednosti granične slike-slice.
početni
naslijediti

Sintaksa

Div (border-image-width: 30px;) sl. 3. Primjer postavljanja širine okvira slike pomoću različite vrste vrijednosti

2.2. granica-izvor-slike

Svojstvo specificira put do slike koja će se koristiti za ukrašavanje obruba bloka.

Sintaksa

Div (izvor slike-obruba: url(border.png);)

2.3. border-image-slice elementi

Svojstvo određuje veličinu dijelova slike koji se koriste za definiranje granica elementa i dijeli sliku na devet dijelova: četiri kuta, četiri ruba između kutova i središnji dio.

Vrijednosti:
broj	Veličina dijelova okvira može se postaviti pomoću jedne, dvije, tri ili četiri vrijednosti. Jedna vrijednost postavlja obrube iste veličine sa svake strane elementa. Dvije vrijednosti: prva određuje veličinu vrha i donja granica, drugi - desno i lijevo. Tri vrijednosti: prva određuje veličinu gornje granice, druga - desnu i lijevu, a treća - donju granicu. Četiri vrijednosti: Definira veličinu gornjeg, desnog, donjeg i lijevog ruba. Numerička vrijednost predstavlja broj px.
%	Veličine obruba izračunavaju se u odnosu na veličinu slike. Horizontalno u odnosu na širinu, okomito - u odnosu na visinu.
ispuniti	Vrijednost je naznačena zajedno s brojem ili postotkom. Ako je navedeno, slika nije odrezana unutarnjim rubom okvira, već također ispunjava područje unutar okvira.
početni	Postavlja ovo svojstvo na zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost ovog svojstva od nadređenog elementa.

Sintaksa

Div (border-image-slice: 50 20;)
Riža. 4. Primjer određivanja isječaka okvira slike

2.4. granica-slike-ponovi

Ovo svojstvo kontrolira kako pozadinska slika ispunjava prostor između kutova okvira. Može se odrediti pomoću jedne vrijednosti ili para vrijednosti.

Sintaksa

Div (border-image-repeat: repeat;) sl. 5. Primjer ponavljanja središnjeg dijela okvira slike pomoću različitih vrsta vrijednosti

2.5. granica-slika-početak

Svojstvo vam omogućuje pomicanje okvira slike izvan granica elementa za određenu duljinu. Može se odrediti pomoću jednog ili četiri vrijednosti.

Sintaksa

Div (border-image-outset: 10px;)
Riža. 6. Primjer pomicanja okvira slike korištenjem različitih vrsta vrijednosti

3. Vanjski pomak okvira outline-offset

Svojstvo određuje udaljenost između obruba graničnog elementa i vanjskog obruba stvorenog pomoću svojstva obrisa.

/*Slika 1:*/ img (obrub: 1px puna ružičasta; obris: 1px isprekidano siva; pomak obrisa: 3px; ) /*Slika 2:*/ img (širina obruba: 1px 10px; stil obruba: jednobojan; border-color: pink; outline: 1px crtkano siva; outline-offset: 3px; ) /*Slika 3:*/ img ( border: 3px inset pink; outline: 1px crtkano siva; outline-offset: 1px; )
Riža. 7. Primjer ukrašavanja slike vanjskim okvirom

4. Gradijentni okvir

Vrijednost border-image može biti ne samo slika, već i gradijentna ispuna.

Proziran okvir

Jedna od boja je prozirna. Na taj način možete postaviti granice za sve strane elementa odjednom ili zasebno za svaku stranu. Debljina obruba kontrolira se svojstvom border-width.

* (box-sizing:border-box;).wrap (visina: 200px; padding: 25px; background: #00E4F6; ) .gradient (visina: 150px; width: 50%; margina: 0 auto; border: 10px solid transparent ; granična slika: linearni gradijent (desno, prozirno 0%, #ADF2F7 100%); granična slika-slice: 1; )

Poštanska omotnica

* (box-sizing:border-box;).wrap (height: 200px; padding: 25px; ) .gradient (height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 ponavljajućih linearnih gradijenata (45 stupnjeva, #A7CECC, #A7CECC 10px, prozirno 10px, prozirno 20px, #F8463F 20px, #F8463F 30px, prozirno 30px, prozirno 40px); )

Jedna zabavna primjena CSS3 box-shadow svojstva je stvaranje dupli okvir oko elementa. Vrlo zanimljiv učinak za dizajn stranice, ali će raditi samo u novim verzijama preglednika koji podržavaju box-shadow.

Međutim, postoji nekoliko drugih metoda za stvaranje ovog učinka. Štoviše, očita upotreba pozadinska slika je jako daleko od idealnog.

U ovu lekciju Predstavljeno je pet metoda za stvaranje dvostrukog obruba oko elementa. Štoviše, samo jedan od njih zahtijeva sliku, a svi ostali koriste čisti kod CSS sa izvrsna podrška u preglednicima.

Metoda 1: obrub i obris

Ova metoda radi samo u preglednicima koji podržavaju svojstvo outline (svi osim IE6/7). Elementu dodajete svojstva obruba i obrisa.

Jedan (obrub: puni 6px #fff; obris: puni 6px #888; )

Razlog zašto ova metoda djeluje je taj obrisni okvir uvijek se prikazuje s vanjske strane pravokutnika. Problem sa svojstvom outline javlja se pri korištenju lebdećih elemenata jer se obrub preklapa sa susjednim elementima.

Metoda 2: Pseudo element

Ova metoda zahtijeva apsolutno pozicioniranje okvir:

Two ( border: solid 6px #fff; position: relative; z-index: 1; ) .two:before ( content: ""; display: block; position: absolute; top: -12px; left: -12px; border: čvrsto 6px #888; širina: 312px; padding-bottom: 12px; min-height: 100%; z-index: 10; )

Ključne točke su postavljanje svojstva z-index (tako da pseudoelement preklapa sadržaj), pozicioniranje i minimalna vrijednost visine. Potonje svojstvo čuva elastičnost okvira.

Metoda 3: Sjena

Najviše najbolja metoda, budući da je potrebna samo jedna linija koda s postavkama svojstva box-shadow.

Tri ( sjena okvira: 0 0 0 6px #fff, 0 0 0 12px #888; )

Za pojavljivanje dvostrukog okvira koriste se dvije sjene. Odvajaju se zarezima. Zamućenje je postavljeno na 0. Budući da druga sjena preklapa prvu, ima dvostruko više veća širina. Ključni trenutak- korištenje neprozirnih boja, što stvara jasnu granicu između okvira.

Kao i svojstvo outline, box-shadow nema utjecaja na susjedni elementi i može ih preklapati. Stoga je potrebno postaviti polje za oblikovanje izgleda kompozicije.

Naravno, podrška za svojstvo box-shadow ograničena je na novije preglednike.

Metoda 4: Dodatni div element

U ovu metodu koristi se vanjski element