CTRL+N ili odaberite funkciju "Stvori" na padajućem popisu iz izbornika "Datoteka". Zatim s istog popisa odaberite operaciju "Uvoz" ili je pozovite kombinacijom tipki CTRL+I. Zatim odredite put do slikovne datoteke u dijaloškom okviru i kliknite gumb "Uvezi". Vaš će biti prikazan na ovom.

Na alatnoj traci pronađite prikaz "Node Editor" i odaberite alat "Shape". Ovaj se alat također može pozvati pritiskom na tipku F10.

Desno od kuta trebate zaokružiti, kliknite lijevom tipkom miša na granicu slike. pojavit će se novi čvor na slici, uz četiri ugla. Zatim odaberite opciju Pretvori liniju u krivulju na ploči uređivača čvorova. Okrugle oznake pojavit će se lijevo od novostvorenog čvora.

Na istoj udaljenosti od kuta dodajte novi čvor na okomitoj strani slike. Bez mijenjanja alata Shape, dvaput kliknite na glavni kutni čvor, on će biti izbrisan. Zaobljeni kut slike odmah će postati vidljiv. Za promjenu radijusa kuta možete koristiti oznake za vođenje ravne linije.

Na vrlo jednostavan način (koristeći vektorski objekt) možete učiniti sve kutovi u pravokutnoj slici. Bez pribjegavanja gornjoj metodi uređivanja čvorova, nacrtajte pravokutnik iste veličine pored uvezene slike pomoću alata za pravokutnik ili pozovite alat pomoću tipke F6.

S alatom "Oblik" koji vam je već poznat, kliknite na pravokutnik i povucite mišem preko bilo kojeg od njegovih čvorova prema pravokutniku. Kutovi će biti zaobljeni. Polumjer zakrivljenosti može se prilagoditi istim alatom.
Označite svoju sliku strelicom alata za odabir.
Zatim na popisu glavnog izbornika pronađite "Effects" rollout i odaberite "PowerClip" opciju i "Place Inside Container" funkciju s padajućeg popisa. Koristite široku strelicu da pokažete na pravokutnik koji ste nacrtali sa zaobljenim kutovima. To će postati okvir u koji će biti postavljena vaša slika.

Imajte na umu

Imajte na umu da kada uvezete sliku u dokument Corel Draw izvorna datoteka Slika se ne mijenja, tako da je možete koristiti u izvornom obliku ako niste zadovoljni rezultatom zaobljenih kutova.

Koristan savjet

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

Izvori:

• Službeni vodič za Corel Draw, M. Matthews, K. Matthews, 1997
• Kako zagladiti oštri kutovi?

Trebat će vam

• - računalo
• - Adobe program Photoshop
• - fotografija

upute

Desni klik na Pozadinski sloj, odaberite Duplicate Layer i kliknite OK (ili Ctrl+J). Zatim izradite novi sloj (Ctrl+Shift+N), postavite ga između pozadine i njegove kopije kao što je prikazano na snimci zaslona (možete ga ispuniti nekom bojom, na primjer bijelom). Onemogućite zaključani sloj (kliknite na "oko" s lijeve strane) ili ga izbrišite.

U paleti alata pronađite gumb s pravokutnikom (Rectangle Tool) i držite ga lijevom tipkom miša. pojavit će se dodatni izbornik gdje je potrebno (alat Rounded Rectangle). Postavite postavke u gornjem dijelu na iste kao na snimci zaslona, ​​a polje Radius promijenite po svom ukusu (što je veće, to će kutovi biti zaobljeniji, a slika će biti više izrezana.

Zatim odaberite dio fotografije koji želite koristiti (na primjer, kao avatar). Ako pogriješite, pritisnite tipku Esc i ponovite odabir. Nakon potreban fragmentće biti istaknuto, kliknite na njega desni klik mišem i odaberite Make Selection... i kliknite OK.

Gotovo, imate foto sloj sa zaobljenim kutovima. Sada se Layer 2 (onaj koji služi kao pozadina) može ispuniti bilo kojom bojom ili ostaviti prozirnim.

Video na temu

Imajte na umu

Prozirne png datoteke - odličan format, međutim, ne podržavaju sve online usluge (društvene mreže, blogovi itd.) transparentne png datoteke. Ako učinak zaobljenih uglova ne funkcionira, postoji još jedan izlaz.

Za pozadinu (Layer 2) odaberite boju koja je najbliža boji na stranici na koju postavljate fotografiju. Zatim spremite datoteku u jpg formatu.

Zaobljeni kutovi u CSS-u može se učiniti na mnogo načina, vrlo mnogo, a neki se od njih mogu smatrati zastarjelima, budući da je CSS 3 uveo nova svojstva koja vam omogućuju zaokruživanje kutova HTML elemenata. Međutim, kao prvo, stari preglednici ne podržavaju ta svojstva, a kao drugo, u kreativnom mozgu dizajnera ponekad se rađaju takve ideje koje samo stare metode mogu spasiti. Dakle, ovdje ćemo pogledati nekoliko razne opcije omogućujući vam stvaranje zaobljenih kutova u CSS-u: od najjednostavnijih do vrlo složenih.

U ovim primjerima uglovi su u početku zaobljeni blok elementi, također se u nekim primjerima ovi blokovi koriste kao pomoćni elementi. No zapamtite da isto možete jednostavno učiniti s elementima na razini linije, dajući im vrijednost block ili inline-block ako je potrebno.

Zaobljeni uglovi u CSS 3 bez slika

Ovaj primjer koristi svojstva iz CSS 3 koja vam omogućuju jednostavno zaokruživanje kutova bez pomoći slika.

Primjer HTML-a i CSS-a: zaokruživanje kutova s koristeći CSS 3 bez slika

Opis primjera

1. Za zaokruživanje kutova koristimo svojstvo CSS 3, koje razumiju svi moderni preglednici.
2. Za stare ljude Firefox preglednici, Chrome i Safari koriste posebna svojstva s prefiksima -moz- i -webkit- , koja su se pojavila prije nego što su podržali glavno svojstvo. Nažalost, nema sličnih analoga za staru Operu i IE. Imajte na umu da prilikom izrade složenih krivulja svojstva s prefiksima možda neće ispravno raditi. Zato su u CSS kodu navedeni više od glavnog svojstva, tako da prema stilski prioriteti, koristili su ga preglednici koji već razumiju "čisto".

Svojstva s prefiksima nisu u CSS specifikaciji, pa će njihova upotreba rezultirati nevažećim kodom.

Zaobljeni kutovi u CSS-u bez slika

Ovaj primjer također nema slike, ali koristi dodatne blokove. Bit metode je da se prije i iza glavnog sadržaja naznači nekoliko blokova koji se, kako se udaljavaju od njega, postupno smanjuju u širini pomoću bočnih vanjskih rubova. Zahvaljujući tome dolazi do imitacije zaobljenih kutova.

Ova metoda je loša jer je kod "zatrpan" dodatni blokovi, ali, nažalost, u mnogim će primjerima takvi blokovi biti prisutni. Još jedan minus je kada veliki radijusi zaokruživanje, morat ćete dodati još više blokova nego što se koristi u primjeru.

Primjer HTML-a i CSS-a: zaokruživanje kutova bez korištenja slika

Opis primjera

1. Unutar bloka s class = "block" označavamo element za glavni sadržaj ("content_block") ispred kojeg postavljamo blokove za simulaciju zaobljenja kutova ("b1", "b2", "b3"). Nakon toga stavljamo ih isto, ali obrnutim redoslijedom.
2. Postavljamo simulacijske blokove na potrebnu visinu i bočne margine (CSS) kako bismo stvorili izgled kutova. Također poništavamo njihovu veličinu fonta (CSS) i postavljamo je na :hidden - ovo je namijenjeno starijim preglednicima koji mogu povećati visinu i učiniti je većom od navedene.
3. U ovom primjeru, osim zaokruživanja uglova, dodana je i imitacija okvira, ako vam ne treba, jednostavno uklonite sve "borvice" iz elemenata i uklonite iz bloka "b3"; boja pozadine.

Najlakši način da se zaobljeni kutovi pojave u CSS-u je korištenje slike kao pozadine za element. U tom slučaju, dimenzije elementa obično su navedene kao i veličina pozadinske slike. Nedostatak ove metode je što sadržaj elementa ne bi trebao izlaziti izvan njegovog opsega, odnosno trebao bi biti određene ograničene veličine.

HTML i CSS primjer: zaokruživanje kutova pomoću jedne slike

Opis primjera

1. Koristeći CSS svojstvo, postavili smo pozadinsku sliku za blok, kojoj zabranjujemo okomito i vodoravno repliciranje (bez ponavljanja), jer u ovom slučaju ovo nije potrebno.
2. Kako bismo spriječili da tekst unutar bloka dodiruje njegove rubove, postavili smo njegov padding (CSS) na 5 px sa svake strane.
3. Zatim morate postaviti blok na iste dimenzije kao pozadina. Naša pozadinska slika ima dimenzije 140x32 piksela, ali mi specificiramo širinu (CSS) i visinu (CSS) za sam blok, smanjenu za 10px. Morao sam ga smanjiti zbog onih istih unutarnjih podstava, koje također proširuju element za 5px u svakom smjeru.

U prethodnom primjeru veličina bloka bila je fiksna i ovisila je o veličini pozadinske slike, a to je vrlo nezgodno. Sada ćemo promijeniti veličinu širine našeg bloka. Da biste to učinili, izrežite tri dijela slike - strane i dio središta. Zatim postavljamo dva elementa unutar glavnog bloka sa fiksne veličine, koji će zahvaljujući apsolutnom pozicioniranju biti postavljen bočno. Dajmo im iste bočne dijelove kao pozadinu, a središnji dio za glavni blok. To će nam dati blok sa zaobljenim kutovima i promjenjivom širinom.

Ova se tehnika vrlo često koristi za zaokruživanje jednorednih elemenata, poput poveznica ili naslova odjeljaka/izbornika.

Primjer HTML-a i CSS-a: zaokruživanje uglova korištenjem bočnih blokova

Opis primjera

1. Unutar block class = "block" postavljamo dva elementa - "left_bok" i "right_bok", kojima postavljamo slike bočnih dijelova kao pozadinu (CSS) i zabranjujemo njihovu reprodukciju (no-repeat). Za sam glavni blok postavljamo pozadinu iz središnjeg dijela i dopuštamo da se duplicira samo vodoravno (repeat-x).
2. Zadajemo širinu bočnih blokova koja odgovara veličini pozadine; za nas je to 14x32 piksela. Ali za glavni blok, kao u prethodnom primjeru, postavili smo visinu na 22 px kako bismo kompenzirali okomito ispunjavanje.
3. Postavit ćemo naše bočne stijenke relativno u odnosu na "blok", tako da specificiramo :relative za njega, a absolute za same bočne stijenke. Pa, onda ih pritisnemo na odgovarajuće strane roditelja koristeći CSS svojstva , i .
4. Kako bismo spriječili da se sadržaj bloka sakrije ispod bočnih slika, postavili smo "blok" tako da ima bočno ispunjavanje (CSS), koje može biti jednako ili malo veće od samih strana. Također postavljamo male margine na vrhu i dnu kako se tekst ne bi "zalijepio" za rubove.

U IE6 postoji mali bug s ovom metodom:

Ako je širina ili visina “bloka” neparna, tada će se pojaviti neugodna udubina od 1px između unutarnjeg ruba bloka i desno postavljene bočne trake, što će pokvariti cijelu sliku. Ova greška se može popraviti korištenjem CSS hack s određenim izrazom, ali neću ni davati takav primjer ovdje, jer često zamrzne preglednik i bolje ga je ne koristiti.

Učinimo to drugačije. Postavimo lijevu marginu "right_bok" (CSS) na 100% tako da se pomakne izvan desnog ruba glavnog bloka, a zatim je vratimo natrag, pomičući je ulijevo za broj piksela jednak njegovoj širini. IE6 ispravno radi s vrijednostima ovih svojstava, tako da nema izbora nego postaviti blok tamo gdje nam treba.

Ova metoda zaokruživanja uglova slična je prethodnoj, ali za razliku od nje, ovdje nisu HTML elementi postavljeni sa strane, već oni dodani u glavni blok pseudoelementi. Zahvaljujući ovom pristupu, bilo je moguće riješiti se nepotrebnog HTML koda stranice.

Primjer HTML-a i CSS-a: zaokruživanje kutova pomoću bočnih pseudoelemenata

Opis primjera

1. Pomoću CSS pseudoelemenata označavamo da želimo nešto dodati na početak i kraj glavnog bloka. I, koristeći CSS svojstvo, samo dodajemo potrebne slike zaobljenih uglova, točnije stranica. Tako smo stvorili dva pseudoelementa sa slikama.
2. Pa, onda radimo potpuno istu stvar kao u prethodnom primjeru, samo što radimo sa stvorenim pseudoelementima.

Za IE6 i IE7 u ovom su primjeru korištene sljedeće "štake":

1. Kao što znate, IE6 i IE7 ne razumiju pseudo-elemente koji se ovdje koriste, pa radimo sljedeće. Koristimo izraz koji integrira dvije oznake unutar glavnog elementa i dajemo im iste stilove kao u prethodnom primjeru. Imajte na umu da se umetnuti kod koji dolazi nakon prvog innerHTML-a dodaje odmah nakon početne oznake "block", a nakon drugog innerHTML-a dodaje se prije završne oznake. Da, u našem slučaju to nije važno, jer se koristi apsolutno pozicioniranje, ali ponekad je korisno znati o tome.
2. Kako bismo spriječili da drugi preglednici vide ovaj kod, prilažemo ga uvjetni komentari. Bilo bi bolje da se potpuno izbaci. zasebna CSS datoteka, koji je povezan s oznakom zatvorenom s istim komentarima.

Zaobljeni uglovi u CSS-u pomoću omota blokova

Bit ove metode je da se najprije izrežu kutovi slike. Zatim se unutar glavnog bloka postavlja još nekoliko blokova (prema broju uglova) koji su ugniježđeni jedan u drugi. Svaki od njih ima jedan kut slike kao pozadinu. Slike je zabranjeno reproducirati, a koordinate su dane tako da zauzimaju mjesta u kutovima blokova. Tako se dobiva efekt zaobljenih uglova.

Primjer HTML-a i CSS-a: zaokruživanje kutova korištenjem Block Wrap-a

Opis primjera

1. Smještamo još četiri unutar glavnog bloka. Budući da niti jedan od ovih blokova nema margine ili obrube, a samo onaj najnutarnji ima uvlake, svi su jednaki po visini i širini.
2. Koristeći CSS svojstvo, postavljamo svaki od unutarnjih blokova u kut kao pozadinu, zabranjujemo im reprodukciju i postavljamo ih u kutove blokova. Budući da je boja pozadine elemenata prozirna, na stranici su vidljiva sva četiri ugla pozadine.
3. Dodajte sami vanjska jedinica s kutom željene boje pozadine. Sve je spremno.

Možete eksplicitno postaviti širinu bloka navođenjem željenog svojstva u class="block" , ali za promjenu visine morate koristiti najunutarnji element (za nas je to "rb").

Zaobljeni kutovi u CSS-u pomoću pozicioniranja

Ovdje su također izrezani kutovi za pozadinu, što će biti naznačeno na malim blokovima. Koristeći CSS apsolutno pozicioniranje, ti blokovi se postavljaju u kutove glavnog elementa koji je zadan željenu boju pozadina.

Primjer HTML-a i CSS-a: zaokruživanje kutova pomoću pozicioniranja

Opis primjera

1. Unutar glavnog elementa (class= "block") postavljamo četiri oznake s klasama "corn_lt", "corn_rt", "corn_lb", "corn_rb", koje će djelovati kao kutni blokovi.
2. Koristeći CSS svojstvo, povezujemo vlastitu pozadinsku sliku sa svakim kutnim blokom i dajemo im širinu i visinu jednaku veličini ovim pozadinske slike. Za svaki slučaj, resetirali smo veličinu fonta (CSS) i odrezali višak (CSS).
3. Određujemo relativno pozicioniranje za glavni element (CSS:relative), budući da ćemo postaviti kutne blokove u odnosu na njega, a za same kutove - apsolutno (apsolutno).
4. Korištenjem CSS svojstava i specificiramo okomite i vodoravne udaljenosti pomaka za kutne blokove tako da se nalaze na kutovima glavnog bloka.

Postoji nekoliko problema s ovom metodom u IE6:

1. Ako širina "bloka" nije izričito određena, tada kutovi s lijeve strane neće pasti na svoje mjesto. Razlog za to je prisutnost unutarnje podloge u bloku. Najlakši način da riješite problem je da uklonite uvlaku i priložite glavni sadržaj "bloka" (bez uglova) u dodatni omotač bloka, a zatim odredite potrebnu uvlaku na omotu. Ali ovdje sam to učinio drugačije omogućivši izgled pomoću svojstva zoom:1, koje govori IE6 da prikaže element u njegovoj prirodnoj veličini. Ovo svojstvo je nevažeće, pa ako ga odlučite koristiti, preporučujem da uspostavite vezu putem uvjetni komentari.
2. Ista greška s jednim pikselom o kojoj je bilo riječi gore. Ali ovdje se praznine mogu formirati ne samo između desnih kutova i desna strana blok, ali i ispod. A ako smo se riješili praznina s desne strane, onda to neće raditi s donjim. Rješenje je eksplicitno odrediti jednaku širinu i visinu glavnog elementa. Također možete postaviti neparne vrijednosti, ali tada ćete morati postaviti udaljenosti za pomake prema dolje i desno da ne budu nula, već -1px.

U biti, tehnologija za ovu metodu zaokruživanja kutova u CSS-u je ista kao i prethodna, tako da će ovdje biti izostavljeni detaljni komentari. Jedina razlika je u tome što se umjesto zasebnih pozadinskih kutnih slika ovdje koristi jedna zajednička slika spritea. Zahvaljujući tome, stranica se učitava brže, jer jedna slika "teži" manje od četiri i hosting postoji jedna žalba umjesto četiri.

Sprite je slika koja kombinira nekoliko slika koje se koriste kao pozadina za elemente web stranice. Koji će dio spritea biti pozadina određenog HTML elementa ovisi o koordinatama navedenim u posebnom CSS svojstvu.

Primjer HTML-a i CSS-a: zaokruživanje kutova pomoću pozicioniranja i spriteova

Opis primjera

1. Koristeći CSS svojstvo, povezujemo pozadinsku sprite sliku s kutnim blokovima, koja ima okrugli oblik dimenzija 22x22 piksela (11x11 piksela za svaku četvrtinu kuta).
2. Koristeći CSS svojstvo, specificiramo koordinate pomaka pozadine. Na primjer, vrijednost -11px 0 znači da će pozadina biti pomaknuta ulijevo za 11px na X osi, ali ne i na Y osi. Dakle, lijeva polovica spritea prelazi granicu elementa i ostaje samo desna. Ali vidljiv je samo napola, jer je njegova visina 22px, a visina samog kutnog bloka je samo 11px. Tako ispada da kada dana vrijednost Pozadina elementa bit će gornja desna četvrtina spritea.

S IE6 postoje isti problemi kao u prethodnom primjeru.

U u ovom primjeru Zaokružit ćemo kutove elementa koji ima obrub, ali to nije specifična značajka ove metode - lako možete koristiti zaokruživanje s obrubom u prethodnim primjerima.

Sama zaokruživanja ćemo napraviti pomoću pseudoelemenata kreiranih iz glavnog bloka, ali bez primjene pozicioniranja na njih.

I jos nesto. U prethodnim primjerima kutovi su izrezani zajedno s unutrašnjom pozadinom, a to nije uvijek potrebno, pogotovo ako se očekuje da će pozadina bloka sa zaobljenim kutovima biti neujednačena. Stoga je pozadina unutar okvira ovdje prozirna (to omogućuje PNG format), a kada su uglovi izrezani, njihova se unutrašnjost također pokazala prozirnom. Ako je potrebno, također možete koristiti sličan pristup u prethodnim primjerima.

Primjer HTML-a i CSS-a: zaokruživanje uglova pomoću pseudoelemenata

pozadinu te ih pomoću nje postavljamo na desnu stranu i zabranjujemo “reprodukciju”. To je to, uglovi su spremni.

Budući da smo specificirali padding za “block” (CSS), pseudo-elementi, a time i uglovi, nisu smješteni u uglovima bloka, već su 15px udaljeni od rubova. Da bismo to popravili, pseudoelementima dajemo negativne margine (CSS) na potrebnim stranama kako bismo ih postavili na vrh uvlaka. Ali margine ne budu jednake 15, već 17px, to je potrebno za pokrivanje okvira (CSS), čija je širina 2px (15+2=17). To je sad to.

Za IE6 i IE7 koristili smo već poznate "štake" s ubacivanjem HTML koda ovdje, budući da ti preglednici ne razumiju pseudoelemente koji se ovdje koriste:

1. Pomoću izraza integriramo dvije oznake unutar glavnog elementa koje također pretvaramo u blokove. Zatim u njih postavimo jednu oznaku. I onda te oznake imaju ista svojstva kao pseudoelementi. Jedino što dodatno dodamo CSS svojstvo :relative bez kojeg okvir preklapa uglove.

Nedostatak ove metode je što ne možete eksplicitno postaviti visinu bloka sa zaobljenim kutovima, jer ako ona premašuje veličinu sadržaja, tada donji kutovi neće biti pritisnuti uz rubove. To se može izbjeći ako glavni sadržaj ipak zatvorite u drugi blok i postavite mu visinu.

Još jedan primjer zaokruživanja kutova s ​​pseudoelementima i bez dodatnih blokova

Ovaj primjer je sličan prethodnom, ali ovdje koristimo pozicioniranje za raspored pseudo-elemenata. Zahvaljujući ovom pristupu, postalo je moguće eksplicitno odrediti visinu bloka sa zaobljenim kutovima.

Primjer HTML-a i CSS-a: zaokruživanje kutova gdje možete promijeniti visinu bloka

I opet, za IE6 i IE7 dodajemo nekoliko dodatnih elemenata unutar glavnog bloka pomoću izraza i zatvaramo kod u uvjetnim komentarima. Samo ovaj put nećemo ni pokušati emulirati pseudoelemente, već ćemo to učiniti jednostavnije.

1. Dodamo četiri oznake unutar "bloka" i na njih primijenimo pozicioniranje. Zatim im jednostavno pokažemo kutove slike kao pozadinu i postavimo ih u kutove glavnog elementa. To jest, radimo točno isto kao u jednoj od gore razmotrenih metoda.
2. Da biste se riješili greške s jednim pikselom (koja je više puta spomenuta gore), dodajte lijevu marginu (CSS) s vrijednošću od 100% i negativnim pomakom jednakim -9px elementima desnog kuta. Općenito, ako se sjećate, ovaj pomak bi trebao biti jednak širini kutnog bloka (za nas je 11px), ali ne zaboravite na granicu od 2px koju imamo ovdje - moramo staviti kutove na nju (11px-2px=9px).

Usput, zapravo bi bilo lakše emulirati pseudo-elemente, kao što smo učinili u prethodnom primjeru - na ovaj način bi bilo manje dodatnog koda. Ali ne u IE6, ovaj bi preglednik trebao još nekoliko "štaka" i, kao rezultat toga, morao bi pisati dva odvojena uvjetni komentari- za IE6 i IE7, a to bi samo napuhalo kod...

U Firefoxu ova metoda radi ispravno od verzije 3.6, au Operi - od verzije 10.0, nisam smislio štake za njih, jer je to malo važno.

Na internetu postoji mnogo primjera i uputa za zaokruživanje kutova bloka ili stola, ali u pravilu se ti upute temelje na korištenju slika ili na korištenju dodatnih blokova.

U današnjem vodiču pokazat ću vam kako možete kutovi okruglih stolova koristeći samo CSS.

Izravno označavanje (Druga tablica razlikuje se po rasporedu ćelija u gornja linija):

Curabitur a ultricies urna	Phasellus mollis
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero auctor vestibulum.	0

Nulla gravida.	Urna augue.	Nunc iaculis bibendum.
		Vestibulum tempor	Laoreet eros sempre ut.
Vivamus quis nisi lacus.	Cras id felis eu purus tempor dictum in at lorem.	facilisis iaculis magna diam id quam.	eleifend.

Pellentesque cursus, nunc ut facilisis hendrerit

1. Zaokružite kutove izravno na stolu (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 */ -border-radius: 10px; /* Opera-border-radius: 10px; /* CSS3 */ overflow: hidden ; margin:0.7em auto ;

2. Uklonite svu pozadinu iz prvog retka.

Tr.bCTable_Header (pozadina: ništa;)

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%; boja pozadine:#00843C;)

4. Koristeći pseudo-class:last-child i kombinator > odaberite posljednju ćeliju u prvom redu. Za njega zaokružujemo gornji desni kut.

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. Zaokružite donje kutove posljednjeg retka. Ne zaboravite ukloniti pozadinu iz posljednjeg retka; Pozadinu retka postavlja pozadina ćelija posljednjeg retka.

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;

6. Zatim, po analogiji s točkama 3-4 in zadnji redak zaokružite uglove prve i posljednje ćelije.

BContentTables tr:last-child td(background-color:#F1F1F2;) .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 10px; -ms-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- polumjer:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0);

Podrška za preglednik

Dobro jutro, popodne, večer ili noć svima. Dmitrij Kostin uvijek iznova s ​​vama. Nekako sam gledao različite slike a onda su mi se neki od njih svidjeli. A svidjeli su im se jer su imali zaobljene rubove. Odmah izgleda zanimljivije. Ne misliš li tako? I zato bih vam u današnjoj lekciji želio reći kako zaokružiti kutove u Photoshopu kako bi fotografija izgledala zanimljivije.

Ono što volim kod Photoshopa je to što se u mnogim slučajevima ista stvar može napraviti na nekoliko načina. Tako je i ovdje. Započnimo s našim photoshopom.

Izglađivanje korištenjem obruba

Ova je metoda slična prethodnoj, ali još uvijek vrlo različita. Sve ćemo raditi s istom slikom.

Stvaranjem oblika

Treća metoda već se radikalno razlikuje od prethodne dvije. Zato uzmite pauzu nekoliko sekundi i krenite dalje. Neću mijenjati sliku i ponovo ću učitati ovaj auto u Photoshop.

Vidite li što ste završili? Slika ima zaobljene rubove, a sve zato što se prikazuje samo tamo gdje je naš nacrtani zaobljeni pravokutnik. Ali sada možete izrezati dodatnu fotografiju pomoću alata "Okvir" ili možete odmah spremiti sliku i već ćete imati zasebna slika sa zaobljenim kutovima.

Pokušajte sve učiniti sami, a istovremeno mi recite koja vam je od predstavljenih metoda poželjnija.

I usput, ako imate rupa u Photoshopu ili ga samo želite u potpunosti naučiti u najkraćem mogućem vremenu, onda toplo preporučujem da pogledate jedan izvrstan tečaj photoshopa za početnike. Tečaj je dobro napravljen, sve je ispričano i prikazano jednostavno sjajno, a svaki materijal se raspravlja vrlo detaljno.

Pa, završavam lekciju za danas. Ne zaboravite se pretplatiti na nove članke i podijeliti ovo sa svojim prijateljima. Bilo mi je drago vidjeti te na svom blogu. Opet te čekam. doviđenja doviđenja.

Srdačan pozdrav, Dmitry Kostin

Zaobljeni kutovi na fotografiji izgledaju prilično zanimljivo i privlačno. Najčešće se takve slike koriste pri izradi kolaža ili izradi prezentacija. Također slike iz zaobljeni kutovi mogu se koristiti kao sličice za postove na stranici.

Postoji mnogo opcija za korištenje, ali postoji samo jedan način (ispravan) da dobijete takvu fotografiju. U ovom tutorialu ću vam pokazati kako zaobliti kutove u Photoshopu.

Otvorite fotografiju u Photoshopu koju ćete urediti.

Zatim izradite kopiju sloja vodopada tzv "Pozadina". Da biste uštedjeli vrijeme, koristite prečace CTRL+J.

Kopija se stvara kako bi izvorna 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 zanima nas samo jedna od postavki - radijus zaokruživanja. Vrijednost ovog parametra ovisi o veličini slike i potrebama.

Postavit ću vrijednost na 30 piksela, tako da će rezultat biti bolje vidljiv.

Sada morate rastegnuti dobivenu figuru preko cijelog platna. Pozivanje funkcije "Slobodna transformacija" prečace CTRL+T. Na obliku će se pojaviti okvir koji možete koristiti za pomicanje, rotiranje i promjenu veličine objekta.

Zanima nas skaliranje. Razvucite figuru pomoću markera navedenih na snimci zaslona. Nakon dovršetka skaliranja kliknite ENTER.

Savjet: kako biste skalirali što točnije, odnosno bez odlaska izvan platna, morate omogućiti tzv. "Uvezivanje" Pogledajte snimak zaslona, ​​pokazuje gdje ovu funkciju nalazi se.

Funkcija uzrokuje da se objekti automatski "lijepe" na pomoćne elemente i obrube platna.

Kao što vidite, oko figure se stvorio odabir. Sada idite na sloj za kopiranje i uklonite vidljivost sa sloja s oblikom (pogledajte snimak zaslona).

Sloj vodopada sada je aktivan i spreman za uređivanje. Uređivanje se sastoji od uklanjanja nepotrebnih stvari iz uglova slike.

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