Border-radijus: zaobljeni uglovi u CSS-u. Zaokruživanje uglova fotografije u Photoshopu

Greetings Friends. Ovaj je članak posvećen prilično popularnoj temi među početnicima webmasterima - css zaobljeni uglovi. Pitanja na koja ću pokušati odgovoriti će biti kako zaokružiti uglove elemenata web stranice koristeći samo CSS bez pribjegavanja bilo kakvim slikama.

Ova metoda ima i prednosti i nedostatke. Prednosti su, naravno, to što nema potrebe da kreirate slike pomoću bilo kog grafičkog uređivača, učitavate ih na server, a zatim ih poređate pomoću CSS-a na prava mesta kako biste stvorili željeni efekat. U tom slučaju potrebno je kreirati dodatne elemente u HTML kodu, kao i propisati posebna svojstva za svaki od njih.

Što se tiče nedostataka, ovdje se može primijetiti jedan problem - ovo svojstvo ne podržavaju svi web pretraživači, posebno za zastarjele verzije raznih pretraživača.

Međutim, zaokruživanje uglova pomoću CSS-a postaje sve popularnije. Kao što već možete razumjeti, u ovom članku ćemo koristiti svojstvo dostupno u CSS-u 3.

Zaobljeni uglovi sa CSS-om.

Tako ćemo, na primjer, uzeti DIV element na nivou bloka i učiniti njegove uglove zaobljenim. Na primjer, napravimo blok i direktno u HTML kodu ćemo mu dodijeliti svojstva pomoću atributa style. Prvo imamo blok element ispunjen pozadinom bilo koje boje:

Usput, ako trebate saznati koji kod boja imate na svojoj web stranici ili na bilo kojoj drugoj, dobro će vam doći.

A evo kako ćemo to vidjeti u web pretraživaču:

Sada, da zaokružimo uglove, koristimo svojstvo "border-radius", koje se može prevesti kao radijus granice. Da, tačno, a ne kako bi mnogi mogli pomisliti da je ovo radijus okvira ili kako se već zove (granica). Ovo svojstvo je odgovorno za radijus granica elementa, a ne za njegove okvire ili ivice, kojih možda nema. Međutim, svojstvo će i dalje raditi bez korištenja granice na elementu. Nadam se da razumete šta sam hteo da kažem. Vrijednost za ovo svojstvo je bilo koja numerička vrijednost koja je primjenjiva u CSS-u, kao što su procenti, pikseli (px), bodovi (pt) i tako dalje. Da, i imajte na umu da ovo svojstvo radi na sva četiri ugla elementa odjednom, osim toga, možete odrediti drugačiji radijus za svaki ugao, ali o tome kasnije. Prvo, postavimo radijus uglova našeg pravougaonika. Neka bude jednako 5 piksela:

Element će tada izgledati ovako:

Sada predlažem da smislimo kako dodati vlastiti radijus za svaki ugao posebno. Da bismo to učinili, možemo koristiti svojstvo koje se može primijeniti na svaki kut posebno. Ako govorimo o prethodnom primjeru, tada bi u cijelosti svojstva za element izgledala ovako:

Border-top-left-radius:5px; /* gornji lijevi ugao */ border-top-right-radius:5px; /* gornji desni ugao */ border-bottom-right-radius:5px; /* donji desni ugao */ border-bottom-left-radius:5px; /* donji lijevi ugao */

Odnosno, ako želimo svakom uglu dati svoju vrijednost, imamo takvu priliku, a da bismo se u to uvjerili, uzimamo sljedeći kod:

I onda dobijamo ovaj rezultat:

Kao što vidimo, granica svakog ugla ima svoju vrijednost radijusa.
Osim toga, CSS nam omogućava da postavimo vrijednost za granicu svakog ugla u obliku kratke notacije koja izgleda ovako:

Gdje će vrijednosti slijediti ovim redoslijedom:

Border-radijus: 5px /* gornji lijevi ugao */ 10px /* gornji desni ugao */ 15px /* donji desni ugao */ 20px /* donji lijevi ugao */;

Shodno tome, na osnovu gore navedenog, postaje jasno da na isti način možemo postaviti ograničenje radijusa za samo tri (jedan ili dva) ugla:

Ovako to izgleda u web pretraživaču:

Ako niste potpuno zbunjeni, onda ćemo nastaviti. Činjenica je da se radijus za svaku granicu ugla može odrediti ne u jednoj vrijednosti, kao što smo gore razmotrili, već u dvije. To jest, dvije vrijednosti za svaki ugao. U ovom slučaju, prva vrijednost će postaviti radijus za ugao horizontalno, a druga vrijednost okomito. Počnimo prvo od jednog ugla:

U ovom primjeru utjecali smo samo na gornji lijevi ugao elementa:

Ako rasporedite vrijednosti obrnuto, tada će element izgledati ovako:

Na ovome bi se činilo da bi bilo moguće završiti, ali ne. Postoji još jedan trik. U vrijednosti svojstva možemo koristiti kosu crtu (/) između vrijednosti. Kosa crta nam može pomoći da uskladimo vrijednosti s drugim vrijednostima. Općenito, lakše je pokazati nego ispričati. Počnimo jednostavno. Pretpostavimo da želimo da horizontalni radijus bude 35 piksela, a vertikalni radijus 5. U isto vrijeme, ove vrijednosti se odnose na sve uglove. Tada možemo pisati ovako:

I dobijete ovaj rezultat:

Pogledajmo sada kompliciraniji primjer:

U ovom slučaju, vrijednost prije kose crte (/) odnosit će se na horizontalni radijus ugla, a nakon kose crte na vertikalni radijus. U ovom slučaju, vrijednosti će se međusobno povezati na sljedeći način:

Border-top-left-radius: 20px 15px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 40px 15px; border-bottom-left-radius: 10px 25px;

A rezultat će biti ovakav:

I na kraju članka, hajde da pričamo o podršci ovog svojstva od strane raznih pretraživača.

Zaokruživanje uglova u raznim web pretraživačima.

Ovdje je vrijedno napomenuti da ovo svojstvo ne podržavaju sve verzije pretraživača. Svojstvo je podržano u IE9+, Firefoxu 4+, Chromeu, Safariju 5+ i Operi.
Ali za neke verzije pretraživača koje ne podržavaju ovo svojstvo, postoje nestandardna svojstva koja dodaju takozvani prefiks ili prefiks svojstvu.
Chrome prije 4.0, Safari prije 5.0, iOS koristi nestandardno svojstvo -webkit-border-bottom-left-radius.
Firefox prije verzije 4.0 koristi nestandardno svojstvo -moz-border-radius-bottomleft.
U ovom slučaju, morat ćemo duplicirati svojstvo koristeći ove prefikse. Na primjer, ako postavimo svojstvo za ivicu gornjeg lijevog ugla na vrijednost koja je jednaka pet piksela:

border-top-left-radius: 5px;

Tada će svojstvo sa svojim dupliciranjem pomoću prefiksa izgledati ovako:

webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; border-top-left-radius: 5px;

Zaista se nadam da sam uspio sve jasno objasniti i sada razumijete kako napraviti zaobljene uglove koristeći samo CSS.
Sretno ti!

Svi moderni pretraživači podržavaju HTML5 standarde za označavanje hiperteksta i CCS3 vizuelne stilove. A ako vaša stranica (predložak) podržava moderne standarde, tada možete napraviti promjene u dizajnu, kao što su zaokruživanje uglova, sjene, ispune gradijentom, bez pribjegavanja grafičkim uređivačima.

Webmasteri posvuda koriste zaobljene kutove za blokove i okvire na web stranicama. U ovom članku ću vam reći kako zaokružiti uglove slika i fotografija na web stranici bez korištenja programa trećih strana, samo uz pomoć CSS-a.

Da bi se primjeri u članku ispravno prikazali na vašem ekranu, morate koristiti najnovije verzije pretraživača, FireFox, Chrome i one napravljene na osnovu njih: Yandex.Browser, Amigo i tako dalje.

Zaobljeni uglovi za DIV blokove

CSS3 za blokiranje DIV ima zaobljene uglove, potrebno ga je stilizirati granica-radijus, na primjer ovako:

Border-radijus: 10px

Radi jasnoće, nacrtajmo dva bloka s ravnim i zaobljenim uglovima:

Blok sa pravim uglovima

Blok sa zaobljenim uglovima

Zaokruživanje uglova slika

Po analogiji s gornjim primjerom, možete zaokružiti uglove slika na web mjestu, na primjer, fotografije. Radi jasnoće, zaokružite uglove za fotografiju sa stranice

Evo slike bez CSS obrade

A sada sa zaobljenim uglovima:

Border-radijus: 10px

Da bude potpuno "lijepo" od početka, dodajte obrub...

Border-radijus: 10px granica: 5px #ccc čvrsta;

a onda senke:

Border-radijus: 10px granica: 5px #ccc čvrsta; box-shadow: 0 0 10px #444;

Donja varijanta (zaobljeni uglovi bez sjene rubova) vrlo je slična podlozi za miš:

Border-radijus: 10px box-shadow: 0 0 10px #444;

I na kraju, potpuno ruganje imidžu

granični radijus: 50% granica: 5px #cfc čvrsta; box-shadow: 0 0 10px #444;

Ako otvorite sliku u novom prozoru, vidjet ćete da je (slika) nepromijenjena, a svi uglovi, sjene i tako dalje su samo rezultat obrade css stilova od strane vašeg pretraživača.

Mala lirska digresija

Stil granica povećava veličinu slike za veličinu ivice. Ako je vrijednost specificirana granica: 5px, tada će konačna slika postati šira i viša za 10 piksela. Imajte to na umu, u nekim slučajevima izgled stranice može „proći“.

Stil box shadow ne utiče na veličinu slike, izgleda da senka prelazi preko susednih elemenata. Kada ga koristite, izgled stranice ne trpi.

Kako zaokružiti uglove slika u WordPressu

U svim gornjim primjerima napisao sam stilove direktno u HTML oznake koda. Na primjer, posljednji izgleda ovako:

Ovo je dobro kada trebate ponovo formatirati jednu sliku ili fotografiju. Šta ako želiš sve promijeniti? Pa, nećete se penjati po cijeloj svojoj web lokaciji da biste uredili prikaz svake od njih. U većini slučajeva WordPress oznaka img definira nekoliko stilskih klasa. Jedan po jedinstvenom nazivu datoteke sa slikom, drugi po veličini, a drugi po poravnanju. Možete dodati jednu od njih uz gore navedene opcije.

Na primjer, za sve slike za koje poravnanje nije navedeno u datoteci style.css za vašu WordPress temu napišite sljedeće:

Alignnone ( radijus granica: 10px; granica: 5px #cfc solid; senka okvira: 0 0 10px #444; )

Ili najteža metoda za sve slike na web stranici. Poništi stil za sve oznake img:

Img ( radijus granica: 10px; granica: 5px #cfc solid; senka okvira: 0 0 10px #444; )

Posljednja opcija je pogodna ne samo za WordPress, već i za bilo koji CMS. Pa čak i za jednostavne HTML stranice u slučaju kada se, prilikom prikazivanja slika, oznaka img nisu dodijeljene klase stilova. Ali budi oprezan. Ako nadjačate opcije prikaza oznake img promijenit ćete izgled SVIH slika na stranici!

Umjesto zaključka

Svi primjeri u članku su uvjetni i namijenjeni su samo da pokažu neke od mogućnosti obrade slika u CSS-u i pokažu koliko je to jednostavno.

Na internetu postoji mnogo primjera i tutorijala za zaokruživanje uglova bloka ili tablica, ali općenito se ovi tutorijali temelje na korištenju slika ili dodatnih blokova.

U današnjem vodiču pokazat ću vam kako možete zaokružite uglove stola koristeći samo css.

Direktno označavanje (Druga tablica se razlikuje po rasporedu ćelija u gornjem redu):

1. Zaokružite uglove direktno za stolom (oznaka stola).

BContentTables( border:1px solid #CCCCCC; width:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; /* CSS3 */ overflow:hidden ; margin:0.7em auto; )

2. Uklanjamo pozadinu iz prvog reda.

Tr.bCTable_Header(pozadina: nema;)

3. Koristeći pseudo-klasu:first-child i kombinator > odaberite prvu ćeliju u tabeli. Zaokružite gornji lijevi ugao prve ćelije. Pozadina prvog reda se sastoji od pozadine ćelija ovog reda.

Tr.bCTable_Header:first-child > td:first-child( border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- border-radius:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; ) tr.bCTable_Header td( color:white; font-size:110%; background-color:#00843C;)

4. Koristeći pseudo-klasu: last-child i > kombinator, odaberite posljednju ćeliju u prvom redu. Za nju zaokružite gornji desni ugao.

Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0; -khtml-border-radius: 0 10px 0 0; )

5. U posljednjoj liniji zaokružite donje uglove. Ne zaboravite ukloniti pozadinu iz posljednjeg reda; pozadina reda je postavljena pozadinom ćelije posljednjeg reda.

BContentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px; background:none; )

6. Zatim, po analogiji s tačkama 3-4 u posljednjem redu, zaokružujemo uglove prve i posljednje ćelije.

.bContentTables tr:last-child td:first-child( border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border -radius:0 0 0 10px; -o-border-radius:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;) bContentTables tr:last-child td:last-child (border-radius: 0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- radius:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0; )

Podrška za pretraživač

CTRL+N ili odaberite funkciju "Kreiraj" na padajućoj listi iz menija "Datoteka". Zatim s iste liste odaberite operaciju "Uvoz" ili je pozovite kombinacijom tipki CTRL + I. Zatim navedite putanju do datoteke slike u dijaloškom okviru i kliknite na dugme "Uvezi". Vaš će biti prikazan na ovom.

Na traci sa alatkama pronađite uvodni program Node Editor i izaberite alat Shape. Ovu alatku možete pozvati i pritiskom na tipku F10.

Desno od ugla koji želite da zaokružite, kliknite levim tasterom miša na ivicu slike. Na slici će se pojaviti novi čvor, pored četiri ugla. Zatim odaberite opciju Pretvori liniju u krivu na panelu uređivača čvorova. Okrugle oznake se pojavljuju lijevo od novokreiranog čvora.

Na istoj udaljenosti od ugla dodajte novi čvor na okomitoj strani slike. Bez promjene alata Shape, dvaput kliknite na glavni kutni čvor, on će biti izbrisan. Zaobljeni ugao slike odmah će postati uočljiv. Oznake vodilice mogu se koristiti za promjenu radijusa ugla.

Na vrlo jednostavan način (koristeći vektorski objekat) možete učiniti sve uglovi za pravougaonu sliku. Bez pribjegavanja gornjoj metodi uređivanja čvorova, nacrtajte pravougaonik iste veličine pored uvezene slike pomoću alata Rectangle Tool (Rectangle Tool) ili pozovite alat pomoću tipke F6.

Sa već poznatim alatom Shape, kliknite na pravougaonik i povucite bilo koji od njegovih čvorova na pravougaonik pomoću miša. Uglovi će biti zaobljeni. Polumjer zaobljenja može se korigirati istim alatom.
Označite svoju sliku pomoću alata strelice "Pointer" (Pick Tool).
Zatim, na listi glavnog menija, pronađite „Efekti“ (Effects) i izaberite opciju „PowerClip“ i sa padajuće liste opciju „Postavi u kontejner“. Koristite široku strelicu da pokažete na zaobljeni pravougaonik koji ste nacrtali. Postat će okvir u koji će biti smještena vaša slika.

Bilješka

Imajte na umu da uvoz slike u Corel Draw dokument ne mijenja originalnu datoteku slike, tako da je možete koristiti u originalnom obliku ako vam se ne sviđa rezultat zaobljenog ugla.

Koristan savjet

Pomoću funkcije "PowerClip" možete postaviti slike u razne okvire najbizarnijih oblika.

Izvori:

• Službeni vodič za rad sa Corel Draw, M. Matthews, K. Matthews, 1997.
• Kako izgladiti oštre uglove?

Trebaće ti

• - kompjuter
• - Adobe Photoshop softver
• - slika

Uputstvo

Desnom tipkom miša kliknite na pozadinski sloj, odaberite Duplicate Layer i kliknite OK (ili Ctrl+J). Zatim kreirajte novi sloj (Ctrl + Shift + N), postavite ga između pozadine i njegove kopije kao što je prikazano na snimku ekrana (možete ga ispuniti nekom bojom, na primjer bijelom). Isključite blokirani sloj (kliknite na "oko" lijevo) ili ga izbrišite.

U paleti alata pronađite dugme sa pravougaonikom (Rectangle Tool) i držite ga levim tasterom miša. Dodatni meni će se pojaviti tamo gde je potrebno (Alat zaobljeni pravougaonik). Postavite postavke na vrhu da budu iste kao na snimku ekrana i promijenite polje Radius po ukusu (što je više, to će uglovi biti zaobljeniji, a slika će biti izrezana.

Zatim odaberite fragment na fotografiji koji želite koristiti (na primjer, kao avatar). Ako pogriješite, pritisnite tipku Esc i ponovite odabir. Nakon što je željeni fragment odabran, kliknite desnim tasterom miša na njega i odaberite Make Selection... i kliknite OK.

Gotovo, dobili ste foto sloj sa zaobljenim uglovima. Sada se sloj 2 (onaj koji služi kao pozadina) može popuniti bilo kojom bojom ili ostaviti providnim.

Povezani video zapisi

Bilješka

Transparentne png datoteke su odličan format, ali ne podržavaju sve online usluge (društvene mreže, blogovi itd.) transparentne png datoteke. Ako efekat zaobljenih uglova ne radi, postoji još jedan izlaz.

Odaberite za pozadinu (Sloj 2) boju koja je najbliža onome što je postavljeno na stranici na kojoj postavljate fotografiju. Zatim sačuvajte datoteku kao jpg.

Zaobljeni uglovi na fotografiji izgledaju prilično zanimljivo i atraktivno. Najčešće se takve slike koriste pri sastavljanju kolaža ili kreiranju prezentacija. Takođe, slike sa zaobljenim uglovima mogu se koristiti kao sličice za objave na sajtu.

Postoji mnogo slučajeva upotrebe, a postoji samo jedan (ispravan) način da dobijete takvu fotografiju. U ovom tutorijalu pokazat ću vam kako zaokružiti uglove u Photoshopu.

Otvorite fotografiju koju želite urediti u Photoshopu.

Zatim kreirajte kopiju sloja vodopada pod nazivom "Pozadina". Koristite prečice da uštedite vreme CTRL+J.

Kopija se kreira kako bi originalna slika ostala netaknuta. Ako (iznenada) nešto pođe po zlu, možete izbrisati neuspjele slojeve i početi ispočetka.

U ovom slučaju nas zanima samo jedno od postavki - radijus zaokruživanja. Vrijednost ovog parametra ovisi o veličini slike i potrebama.

Postavit ću vrijednost na 30px tako da možete bolje vidjeti rezultat.

Sada morate rastegnuti rezultirajući oblik na cijelo platno. Pozivanje funkcije "slobodna transformacija" vruće tipke CTRL+T. Na obliku će se pojaviti okvir pomoću kojeg možete pomicati, rotirati i mijenjati veličinu objekta.

Zainteresovani smo za skaliranje. Rastegnite oblik koristeći markere prikazane na snimku ekrana. Nakon što je skaliranje završeno, pritisnite ENTER.

Savjet: da biste što preciznije skalirali, odnosno da ne bi prelazili preko platna, morate omogućiti tzv. "Snap" Pogledajte snimak ekrana, on pokazuje gdje se ova funkcija nalazi.

Funkcija uzrokuje da se objekti automatski "zalijepe" za pomoćne elemente i ivice platna.

Kao što vidite, oko oblika je formiran izbor. Sada idite na sloj za kopiranje i uklonite vidljivost sa sloja sa figurom (pogledajte snimak ekrana).

Sloj vodopada je sada aktivan i spreman za uređivanje. Uređivanje je uklanjanje viška iz uglova slike.

Preokrenite odabir pomoću prečaca CTRL+SHIFT+I. Sada odabir ostaje samo na uglovima.