imajte na umu da CSS stilovi za zadanu brojku unose se u datoteku jednom, a HTML tag se može postaviti na stranicu neograničeni broj puta.
Kao rezultat izlaza dobivamo sljedeće pravokutnik s okvirom.
Kako napraviti zaobljene uglove u CSS-u
Atribut se koristi za zaokruživanje kutova granični radijus.
Mogli bismo dodati samo ovaj atribut. Obično prikazuje rezultat zaokruživanja u novim verzijama preglednika, ali mnogi korisnici još uvijek imaju starije verzije u kojima ovaj atribut ne radi ispravno. Stoga ćemo, radi kompatibilnosti, dodati još nekoliko opisa ovog atributa, izravno povezanih s određenim preglednicima, u naš blok u datoteci Style.css, što će rezultirati sljedećim kodom:
HTML div oznaka dat će nam pravokutnik u okviru sa zaobljenimi kutovi:
a HTML oznaka za prikaz teksta izgledat će ovako:
|
pib9.ru
|
Dobivamo zaobljeni pravokutnik i tekst: 
Ako uklonite atribute opisa veličine pravokutnika iz koda širina I visina, tada možete dobiti sljedeće oblike sa zaobljenim kutovima:
1. Nema teksta
U tom slučaju forme poprimaju dimenzije okoline: duljina odgovara širini polja, a visina se mijenja kako se forma ispunjava sadržajem.
Zaokružite odabrane kutove
U opisu stila, parametar 10px u atributu granični radijus prikazuje radijus zakrivljenosti, koji se može promijeniti odabirom onoga koji vam je potreban. Ako je postavljeno na 0, zaokruživanje se neće dogoditi. Ovo se svojstvo može koristiti kada trebate zaokružiti odabrane kutove.
Zapišimo vrijednosti radijusa zaokruživanja za svaki kut, označavajući nule gdje poništavamo zaokruživanje. Na primjer, poništimo zaokruživanje u trećem i četvrtom kutu. Naš kod će izgledati ovako:
1 preostao gornji kut.
2. Gornji desni kut.
3. Donji desni kut.
4. Donji lijevi kut.
To rezultira pravokutnikom s odabranim krivuljama samo u gornjim kutovima.
Kutovi se broje u smjeru kazaljke na satu, počevši od gornjeg lijevog kuta: 
2. Zaokruživanje kutova pomoću HTML koda bez pisanja u datoteku stila
Razmotrite drugu metodu dobivanja pravokutnika sa zaobljenim uglovima koristeći HTML kod bez pisanja u stilsku datoteku.
HTML zaobljeni kutovi
Postoji jedna mala značajka koja još više pojednostavljuje cijeli proces - ovo HTML zaobljeni kutovi. Sastoji se od generiranja HTML koda koji sadrži iste stilove kao u CSS kodovi. Ovo koristi iste atribute kao u CSS bloku i eliminira potrebu za pisanjem bloka u datoteku Style.css. Jednom riječju, CSS kod u potpunosti zamjenjujemo HTML kodom.
Umjesto našeg CSS bloka dobivamo HTML skripta, koji umetnemo na mjesto gdje bi se trebao pojaviti pravokutnik sa zaobljenim kutovima:
Prva metoda zaokruživanja kutova može se koristiti kada se isti oblik koristi više puta bez mijenjanja stilova. Druga metoda koristi se za obrasce čiji se stilovi koriste jednom.
3. Slike sa zaobljenim kutovima. Okvir oko HTML slike
Također vam želim dati korisna informacija. Često koristeći slike za dizajn web stranice, baš ih želim učiniti još ljepšima mijenjajući im oblik, uokvirujući ih okvirom lijepe boje i različitih širina. Ovo postavlja pitanje: " Kako zaokružiti kutove slike?”.
To se radi vrlo jednostavno, a sada ćemo naučiti kako to učiniti.
Postavimo sliku na web mjesto, učinimo je vlastitom pozadinom kao pozadinom div oznake. Dobivamo sljedeći kod i sliku:
Zaokruživanje uglova slike dodavanjem okvira
Zaokruživanje kutova slika u CSS-u i HTML-u i dodavanje obruba može se izvršiti na jedan od dva gore opisana načina.
Korištenjem prve metode u ovom članku, slikovni kodovi za datoteku stila i HTML kod oznake div izgledat će ovako:
Imajte na umu da se neki atributi mogu unijeti u datoteku stila, a neki u oznaku div. U našem slučaju dimenzije slike širina i visina umetnute su u HTML kod.
HTML kod druge metode, bez korištenja stilske datoteke opisane u ovom članku, izgleda ovako:
Kao rezultat kodova svake od dvije metode, dobivamo isti rezultat - sliku sa zaobljenim kutovima:
Dobro jutro, popodne, večer ili noć svima. Dmitrij Kostin uvijek iznova s vama. Nekako sam gledao kroz 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.
Zaglađ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 rupe u Photoshopu ili ga samo želite u potpunosti istražiti čim prije, onda vam 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.
Srdačan pozdrav, Dmitry Kostin
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.
Vrlo na jednostavan način(koristeći vektorski objekt) sve je moguće kutovi u pravokutnoj slici. Bez pribjegavanja gore opisanu metodu uređujući čvorove, nacrtajte pravokutnik iste veličine uz uvezenu sliku alatom Rectangle Tool ili pozovite alat tipkom 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.
Bilješka
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.
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 stvorite 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, kliknite Tipka 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
Bilješka
Prozirne png datoteke - odličan format, međutim, ne sve online usluge ( društveni mediji, blogovi itd.) podržavaju transparentne png datoteke. Ako učinak zaobljenih uglova ne funkcionira, postoji još jedan izlaz.
Odaberite za pozadina(Layer 2) je boja koja je najbliža onoj postavljenoj na stranici na koju postavljate fotografiju. Zatim spremite datoteku u jpg formatu.
Pozdrav, prijatelji. Ovaj je članak posvećen dosta popularna tema među webmasterima početnicima - zaobljena CSS kutovi . Pitanja na koja ću pokušati odgovoriti odnosit će se na to kako to učiniti zaobljeni kutovi elemente web stranice koristeći samo CSS bez korištenja bilo kakvih slika.
U ovu metodu postoje i prednosti i mane. Prednosti su, naravno, u tome što nema potrebe za stvaranjem slika pomoću bilo kojeg grafički urednik, prenesite ih na poslužitelj, a zatim ih rasporedite s koristeći CSS na potrebna mjesta za postizanje željenog učinka. U ovom slučaju potrebno je stvoriti dodatni elementi u HTML kodu i također napišite pojedinačna svojstva za svakog od njih.
Što se tiče nedostataka, ovdje se može primijetiti jedan problem - ovo svojstvo ne podržavaju svi web preglednici, posebno za zastarjele verzije razni preglednici.
Međutim, zaokruživanje kutova pomoću CSS-a postaje sve popularnije. Kao što ste možda već shvatili, u ovom ćemo članku koristiti svojstvo dostupno u CSS 3.
Zaobljeni kutovi pomoću CSS-a.
Tako ćemo za primjer uzeti blok DIV element a uglove mu zaokružite. Na primjer, stvorimo blok i dodijelimo mu svojstva izravno u HTML kodu pomoću atributa style. Prvo imamo blok element ispunjen pozadinom bilo koje boje:
Usput, ako trebate saznati koji kod boje imate na svojoj ili bilo kojoj drugoj web stranici, ovo će vam dobro doći.
A ovako ćemo to vidjeti u web pregledniku:
Sada ćemo za zaokruživanje kutova koristiti svojstvo "border-radius", što se može prevesti kao radijus granice. Da, upravo tako, a ne kako bi mnogi mogli pomisliti, da je to radijus okvira ili kako god ga zovu (border). Ovo svojstvo je posebno odgovorno za radijus obruba elementa, a ne za njegove okvire ili obrube, koji možda ne postoje. Međutim, nekretnina će i dalje raditi bez korištenje granice kod elementa. Nadam se da ste shvatili što sam htio reći. Vrijednost za ovo svojstvo je bilo koja numeričke vrijednosti, koji su primjenjivi u CSS-u, kao što su postoci, pikseli (px), bodovi (pt) i tako dalje. Da, i to treba uzeti u obzir ovo svojstvo radi na sva četiri kuta elementa odjednom; osim toga, možete navesti drugačiji radijus za svaki kut, ali više o tome kasnije. Prvo, postavimo radijus uglova našeg pravokutnika. Neka bude jednako 5 piksela:
Tada će element izgledati ovako:
Sada predlažem da smislite kako dodati vlastiti radijus za svaki kut zasebno. Da bismo to učinili, možemo koristiti svojstvo koje se može primijeniti na svaki kut zasebno. Ako govorimo o prethodnom primjeru, tada bi u punom obliku svojstva za element izgledala ovako:
Border-top-left-radius:5px; /* gornji lijevi kut */ border-top-right-radius:5px; /* gornji desni kut */ border-bottom-right-radius:5px; /* donji desni kut */ border-bottom-left-radius:5px; /* donji lijevi kut */
Odnosno, ako želimo postaviti svaki kut na vlastitu vrijednost, imamo ovu priliku, a da bismo bili sigurni u to, uzimamo sljedeći kod:
I onda dobijemo ovaj rezultat:
Kao što vidimo, granica svakog kuta ima svoju vrijednost radijusa.
Osim toga, CSS nam omogućuje da postavimo vrijednost za obrub svakog kuta u obrascu kratka bilješka, koji će izgledati ovako:
Gdje će vrijednosti slijediti ovim redoslijedom:
Border-radius: 5px /* gornji lijevi kut */ 10px /* gornji desni kut */ 15px /* donji desni kut */ 20px /* donji lijevi kut */;
Prema tome, na temelju gore navedenog, postaje jasno da na isti način možemo postaviti granicu radijusa samo za tri (jedan ili dva) kuta:
Ovako to izgleda u web pregledniku:
Ako još niste potpuno zbunjeni, onda nastavimo. Činjenica je da se radijus za svaku granicu kuta može odrediti ne u jednoj vrijednosti, kao što smo gore raspravljali, već u dvije. To jest, dvije vrijednosti za svaki kut. U ovom slučaju, prva vrijednost će postaviti radijus za kut vodoravno, a druga vrijednost će postaviti radijus okomito. Počnimo prvo s jednim kutom:
U u ovom primjeru utjecali smo samo na gornji lijevi kut elementa:
Ako obrnete vrijednosti, tada će element izgledati ovako:
Čini se da je tu moglo 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 kombiniramo vrijednosti s drugim vrijednostima. Općenito, lakše je pokazati nego reći. Počnimo s nečim jednostavnim. Pretpostavimo da trebamo da horizontalni radijus bude 35 piksela, a okomiti radijus 5. Štoviše, ove vrijednosti trebale bi se primjenjivati na sve kutove. Tada možemo napisati ovako:
I dobiti ovaj rezultat:
Sada pogledajmo kompliciraniji primjer:
U u ovom slučaju vrijednost ispred znaka kose crte (/) odnosit će se na vodoravni radijus kuta, a iza znaka na okomiti. U ovom slučaju, vrijednosti će se međusobno odnositi na ovaj način:
Border-top-left-radius: 20px 15px; granica-gore-desno-radijus: 10px 25px; granica-dolje-desno-radijus: 40px 15px; granica-dolje-lijevo-radijus: 10px 25px;
A rezultat će biti ovakav:
I na kraju članka, razgovarajmo o podršci različitim preglednicima ovog posjeda.
Zaokruživanje kutova u raznim web preglednicima.
Ovdje je vrijedno napomenuti da ovo svojstvo ne podržavaju sve verzije preglednika. Svojstvo je podržano u IE9+, Firefox 4+, Chrome, Safari 5+ i Opera.
Ali za neke verzije preglednika koje ne podržavaju ovo svojstvo, postoje nestandardna svojstva koja svojstvu dodaju takozvani prefiks ili prefiks.
Chrome prije verzije 4.0, Safari prije verzije 5.0, iOS koriste 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 pomoću ovih prefiksa. Na primjer, ako svojstvo za obrub gornjeg lijevog kuta postavimo na vrijednost od pet piksela:
Radijus-gornji-lijevi rub: 5px;
Tada će svojstvo, duplicirajući ga pomoću prefiksa, izgledati ovako:
Webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; border-top-left-radius: 5px;
Stvarno se nadam da sam uspio sve jasno objasniti i da sada razumijete kako napraviti zaobljene kutove koristeći samo CSS.
Sretno ti!
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 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 Gornji red):
| 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 */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; /* CSS3 */ overflow: skriveno ; margina:0,7em auto; )
2. Uklonite svu pozadinu iz prvog retka.
Tr.bCTable_Header (pozadina: ništa;)
3. Koristeći pseudo-class:first-child i kombinator > odaberite prvu ćeliju u tablici. Zaokružite gornji lijevi kut prve ćelije. Pozadina prvog retka sastoji se od pozadine ćelija ovog retka.
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; background:none; )
6. Zatim, po analogiji s točkama 3-4 in zadnji redak zaokružite uglove prve i zadnje ć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 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; )
