Introduceți colțuri rotunjite. Colturi rotunjite
Toate browserele moderne acceptă standardele de marcare hipertext HTML5 și stilurile de design CCS3. Și dacă site-ul tău (șablonul) acceptă standarde moderne, atunci poți face modificări designului, cum ar fi rotunjirea colțurilor, umbrele, umplerile cu gradient, fără a apela la editori grafici.
Webmasterii de pretutindeni folosesc colțuri rotunjite pe blocuri și cadre pe site-uri web. În acest articol vă voi spune cum să rotunjiți colțurile imaginilor și fotografiilor de pe un site web fără a utiliza programe terțe, doar folosind CSS.
Pentru ca exemplele date în articol să fie afișate corect pe ecran, trebuie să utilizați cele mai recente versiuni de browsere, FireFox, Chrome și cele bazate pe acestea: Yandex.Browser, Amigo și așa mai departe.
Colțurile rotunjite ale blocurilor DIV
Conform standardului CSS3, astfel încât blocul DIV avea colțuri rotunjite, trebuie aranjat hotar-raza, de exemplu astfel:
Chenar-rază: 10px;
Pentru claritate, să desenăm două blocuri cu colțuri drepte și rotunjite:
Bloc cu unghiuri drepte
Bloc cu colțuri rotunjite
Colțurile rotunjite ale imaginilor
Prin analogie cu exemplul de mai sus, puteți rotunji colțurile imaginilor de pe site, de exemplu fotografii. Pentru claritate, să rotunjim colțurile pentru fotografia de pe pagină
Iată imaginea fără procesare CSS
Și acum cu colțuri rotunjite:
Chenar-rază: 10px;
Pentru a o face cu adevărat „frumoasă”, să adăugăm niște margini de la început...
Chenar-rază: 10px; chenar: 5px #ccc solid;
si apoi umbrele:
Chenar-rază: 10px; chenar: 5px #ccc solid; casetă-umbră: 0 0 10px #444;
Opțiunea de mai jos (colțuri rotunjite cu umbră fără chenar) arată foarte asemănătoare cu un mouse pad:
Chenar-rază: 10px; casetă-umbră: 0 0 10px #444;
Și în sfârșit, o batjocură completă a imaginii
Raza de frontieră: 50%; chenar: 5px #cfc solid; casetă-umbră: 0 0 10px #444;
Dacă deschideți imaginea într-o fereastră nouă, veți vedea că aceasta (imaginea) este neschimbată, iar toate colțurile, umbrele și așa mai departe sunt doar rezultatul procesării CSS stiluri de browser.
O mică digresiune lirică
Stil frontieră mărește dimensiunea imaginii cu mărimea marginii. Dacă este specificată o valoare chenar: 5px, apoi imaginea finală va deveni mai lată și mai înaltă cu 10 pixeli. Rețineți acest lucru, în unele cazuri este posibil ca aspectul site-ului să nu funcționeze.
Un stil cutie-umbră nu afectează dimensiunea imaginii, umbra pare să curgă peste elementele învecinate. Când îl utilizați, aspectul site-ului nu are de suferit.
Cum să rotunjiți colțurile imaginilor în WordPress
În toate exemplele de mai sus, am scris stiluri direct în etichetele de cod html. De exemplu, ultimul arată astfel:
Acest lucru este bun atunci când trebuie să rearanjați o fotografie sau o fotografie. Dacă vrei să schimbi totul? Ei bine, nu veți urca pe tot site-ul dvs. pentru a edita afișarea fiecăruia. În majoritatea cazurilor, eticheta WordPress IMG definește mai multe clase de stil. Unul după numele unic al fișierului imagine, altul după dimensiune și altul după aliniere. Puteți completa unul dintre ele cu parametrii de mai sus.
De exemplu, pentru toate imaginile pentru care nu este specificată alinierea, în fișier stil.css Pentru tema dvs. WordPress, introduceți următoarele:
Alignnone ( chenar-rază: 10px; chenar: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Sau metoda cea mai strictă pentru toate pozele de pe site. Să redefinim stilul pentru toate etichetele IMG:
Imag (chenar-rază: 10px; chenar: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Ultima opțiune este potrivită nu numai pentru WordPress, ci și pentru orice CMS. Și chiar și pentru simplu HTML pagini în cazul în care, la afișarea imaginilor, eticheta IMG nu sunt atribuite clase de stil. Dar fii atent. Dacă înlocuiți opțiunile de afișare a etichetelor IMG vei schimba aspectul TOATE pozele de pe site!
În loc de o concluzie
Toate exemplele din articol sunt condiționate și sunt destinate doar să demonstreze unele dintre capacitățile CSS pentru procesarea imaginilor și să arate cât de simplu este.
). Acest lucru se face folosind proprietatea border-radius CSS. În acest articol vom analiza toate opțiunile diferite.
Sintaxa CSS chenar-rază este:
raza-limită: [ file_value];
Cum să rotunjiți colțurile în HTML folosind CSS
Să ne uităm la exemple de rotunjire a colțurilor folosind CSS. De exemplu
În acest caz, toate cele 4 margini ale elementului vor fi rotunjite cu 30px.
Valoarea filet înseamnă care ar trebui să fie raza cercului la colț.
Puteți rotunji fiecare colț cu raze diferite. Pentru a face acest lucru trebuie să scrieți
raza-chenar : 10px 7px 0px 0px ;
Succesiunea acestor numere este următoarea:
- Colțul din stânga sus (în exemplu, acesta este de 10 px)
- Colțul din dreapta sus (în exemplu, acesta este de 7 px)
- Colțul din dreapta jos (în exemplu, acesta este 0px)
- Colțul din stânga jos (0px în exemplu)
De exemplu
Rezultat:
Pentru a nu reține ce valoare vine după care, puteți scrie fiecare colț separat în CSS
chenar-sus-stânga-rază : 10px ; // coltul din stanga sus chenar-sus-dreapta-rază : 7px ; // colțul din dreapta sus chenar-jos-dreapta-rază : 0px ; // colțul din dreapta jos chenar-raza-jos-stânga : 0px ; // colțul din stânga jos
În plus, puteți modifica separat raza fiecărui colț pentru planurile orizontale și verticale.
Specificarea celei de-a doua raze trebuie specificată folosind o bară oblică „/” în cazul razei-chenar sau a doua valoare de lângă aceasta în cazul specificării directe a fiecărui colț al razei
raza de frontieră: 5px 5px 5px 5px / 10px 10px 10px 10px; sau o poți seta astfel: chenar-sus-stânga-rază :5px 10px ; // coltul din stanga sus chenar-sus-dreapta-raza :5px 10px ; // colțul din dreapta sus chenar-jos-dreapta-rază :5px 10px ; // colțul din dreapta jos chenar-raza-jos-stânga :5px 10px ; // colțul din stânga jos
Primul parametru este responsabil pentru raza orizontală, al doilea pentru cea verticală.
De exemplu, folosind aceste proprietăți puteți face o elipsă:
Rezultat:
NotăValori 100px 100px 100px 100px / 200px 200px 200px 200px ar putea fi scris și mai compact:
chenar-rază: 100px / 200px;
Schimbând parametrii fiecărui colț, puteți crea diverse elemente rotunjite interesante. De exemplu, puteți face un cerc, elipsă, picătură, piatră, ou etc.
Specificarea grosimii, culorii și tipului de linie a unui filet
Pe lângă valorile filet, puteți seta și grosimea, culoarea și tipul liniei de filet. Toți acești trei parametri se fac prin proprietatea border:
chenar : [grosime] [tip_linie] [culoare];
De exemplu:
chenar: 1px solid #00ff00;
- Grosimea - cel mai adesea specificată în pixeli
- Tipul de linie poate lua următoarele valori:
- solid
- întreruptă
- punctat (rând de puncte)
- groove (canelură de linie)
- inserție (linie indentată)
- start (linie extrudată)
- Culoarea poate fi specificată fie în format RGB, fie pur și simplu după nume (vezi codurile și denumirile culorilor html)
Să dăm un exemplu
În acest fel puteți proiecta frumos diverse cadre pentru anunțuri și comentarii pe site.
Strălucire pentru file
Pe lângă setarea grosimii, culorii și tipului de linie, puteți seta și strălucirea cadrului. Acest lucru se face folosind proprietatea box-shadow
box-shadow : 0px 0px 4px 2px #a0b ;
Primii doi parametri (0px 0px) stabilesc deplasarea umbrei pe orizontală, respectiv pe verticală. Următorii doi parametri (4px 2px) stabilesc puterea strălucirii în jurul acestuia. Pentru ca acesta să funcționeze frumos, trebuie să faceți un număr mai mare decât celălalt și, în general, trebuie să experimentați. Ultimul parametru este culoarea (#a0b).
De exemplu
Rezultat:
Întotdeauna am dat exemple de etichetă
Browsere
Este posibil ca browserele mai vechi să nu accepte proprietatea border-radius. Deci, IE sub versiunea 9, Firefox sub 4 nu afișează rotunjiri. Este necesar să specificați prefixele CSS ale furnizorului:
-webkit-border-radius :5px ; -moz-border-radius :5px ; raza-chenar :5px ;
Bună dimineața, după-amiaza, seara sau noapte tuturor. Dmitry Kostin este cu tine din nou și din nou. Într-o zi m-am uitat prin diferite imagini și apoi mi-au plăcut unele dintre ele. Și le-au plăcut pentru că aveau marginile rotunjite. Imediat pare mai interesant. Nu crezi? Și de aceea, în lecția de astăzi, aș dori să vă spun cum să rotunjiți colțurile în Photoshop pentru a face fotografia să pară mai interesantă.
Ceea ce îmi place la Photoshop este că în multe cazuri același lucru poate fi făcut în mai multe moduri. Deci este aici. Să începem cu Photoshopul nostru.
Antialiasing folosind margini
Această metodă este similară cu cea anterioară, dar totuși foarte diferită. Vom face totul cu aceeași imagine.
Prin crearea unei forme
A treia metodă este deja radical diferită de cele două precedente. Așa că faceți o pauză de câteva secunde și mergeți mai departe. Nu voi schimba imaginea și voi încărca din nou această mașină în Photoshop.
Vezi cu ce ai ajuns? Imaginea are margini rotunjite și totul pentru că este afișată numai acolo unde este dreptunghiul nostru rotunjit desenat. Dar acum puteți decupa fotografia suplimentară folosind instrumentul Cadru sau puteți salva imediat fotografia și veți avea deja o imagine separată cu colțuri rotunjite.
Încercați să faceți totul singur și, în același timp, spuneți-mi care dintre metodele prezentate este mai preferată pentru dvs.
Și apropo, dacă aveți lacune în Photoshop sau doriți doar să îl învățați complet în cel mai scurt timp posibil, atunci vă recomand cu căldură să urmăriți unul curs superb de photoshop pentru începători. Cursul este bine făcut, totul este spus și prezentat foarte bine și fiecare material este discutat în detaliu.
Ei bine, îmi termin lecția pentru azi. Nu uitați să vă abonați pentru articole noi și să împărtășiți acest lucru cu prietenii dvs. M-am bucurat să te văd pe blogul meu. te astept din nou. Pa! Pa.
Cu stima, Dmitri Kostin
cadru CSS3 extinde capacitatea de a formata chenarele elementelor cu proprietăți care permit după colțuri element și, de asemenea, utilizarea Imagini pentru a proiecta marginile elementului.
Colțuri rotunjite și rame pentru fotografii
1. Colțuri de rotunjire cu rază-chenar
Suport pentru browser
IE: 9.0
Firefox: 4.0
Crom: 4.0
Safari: 5.0, 3.1 -webkit-
Operă: 10.5
iOS Safari: 7.1
Opera mini: —
Browser Android: 4.1
Chrome pentru Android: 44
Proprietatea vă permite să rotunjiți colțurile elementelor inline și bloc. Curba pentru fiecare unghi este definită folosind una sau două raze care îi definesc forma − cerc sau elipsă. Raza se aplică întregului fundal, chiar dacă elementul nu are chenar, poziția exactă a secantei este determinată folosind proprietatea background-clip.
Proprietatea border-radius vă permite să rotunjiți toate colțurile simultan și folosind proprietățile border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius poate rotunji fiecare colț separat.
Dacă setați două valori pentru proprietatea rază de frontieră, prima valoare se va rotunji stânga susȘi colțul din dreapta jos, iar al doilea - sus în dreaptaȘi stânga jos.
Valori specificate prin / determina orizontalăȘi razele verticale. Proprietatea nu este moștenită.
Opțiuni
Div (lățime: 100px; înălțime: 100px; chenar: 5px solid;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-radius: 10px 20px;). ;) .r4 (border-radius: 10px/20px;) .r5 (border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (border-radius: 10px 20px 30px 40px/30px () . border-radius: 50%;).r8 (border-top: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-stânga-radius: 100px;).r10 (border-radius: 50%;). -raza: 0 100%;).r11 (raza-chenar: 0 50% 50% 50%;).r12 (raza-chenar-sus-stânga: 100% 20px; raza-chenar-jos-dreapta: 100% 20px ;) 
Orez. 1. Exemple de diferite opțiuni pentru rotunjirea colțurilor blocurilor
2. Chenar-imagine
Suport pentru browser
IE: 11.0
Firefox: 15,0, 3,5 -moz-
Crom: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Operă: 15,0, 11,0 -o-
iOS Safari: 7.1
Opera mini: 8 -o-
Browser Android: 4.4, 4.1 -webkit-
Chrome pentru Android: 42
Proprietatea vă permite să setați o imagine ca margine a unui element. Principala cerință pentru imagine este ca aceasta să fie simetrică. Proprietatea include următoarele valori: (border-image: width source slice repeat start;) .
Folosind o imagine atât de simplă, puteți obține cadre ca acesta pentru un element.
/* Exemplul 1 */ div ( lățime: 260 px; înălțime: 100 px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch ) /* Exemplul 2 */ div ( lățime: 260 px; înălțime: 100 px; border-style: solid; border-image-width: 15 px; border-image-source: url(border_round. png); bordura-imagine-slice: 30; 
Orez. 2. Un exemplu de proiectare a limitelor blocurilor folosind o imagine
Tăieturile A - B - C - D formează colțurile cadrului, iar partea din imagine situată între ele umple spațiul rămas al cadrului în conformitate cu valoarea specificată a proprietății margine-imagine-repetare. Mărimea părții de colț (în acest exemplu numărul 30) este setată folosind valoarea proprietății border-image-slice.
2.1. chenar-imagine-lățime
Proprietatea specifică lățimea imaginii pentru chenarul elementului. Dacă lățimea nu este specificată, aceasta este implicită la 1.
| chenar-imagine-lățime | |
|---|---|
| Valori: | |
| lungime | Setează lățimea chenarului în unități de lungime - px/em. Puteți seta de la una până la patru valori odată. Dacă este specificată o valoare, atunci lățimea tuturor laturilor cadrului este aceeași, două valori specifică lățimea sus-jos și dreapta-stânga etc. |
| număr | Valoarea numerică cu care se înmulțește valoarea lățimii marginii. |
| % | Lățimea cadrului elementului este calculată în raport cu dimensiunea imaginii. Orizontală în raport cu lățimea, verticală - în raport cu înălțimea. |
| auto | Corespunde valorii chenar-imagine-slice. |
| iniţială | |
| moşteni | |
Sintaxă
Div (border-image-width: 30px;) Fig. 3. Un exemplu de setare a lățimii unui cadru de imagine folosind diferite tipuri de valori
2.2. marginea-sursa-imagine
Proprietatea specifică calea către imagine care va fi folosită pentru a decora marginile blocului.
Sintaxă
Div (border-image-source: url(border.png);)
2.3. elemente chenar-imagine-slice
Proprietatea determină dimensiunea părților imaginii utilizate pentru a defini marginile elementului și împarte imaginea în nouă părți: patru colțuri, patru margini între colțuri și o parte centrală.
| Valori: | |
| număr | Dimensiunea părților cadrului poate fi setată folosind una, două, trei sau patru valori. O valoare setează chenarele să aibă aceeași dimensiune pe fiecare parte a elementului. Două valori: prima determină dimensiunea marginilor de sus și de jos, a doua - cele din dreapta și din stânga. Trei valori: prima determină dimensiunea marginii de sus, a doua - dreapta și stânga, iar a treia - marginea de jos. Patru valori: definește dimensiunile marginilor de sus, dreapta, jos și stânga. Valoarea numerică reprezintă numărul de px. |
| % | Dimensiunile marginilor sunt calculate în raport cu dimensiunea imaginii. Orizontală în raport cu lățimea, verticală - în raport cu înălțimea. |
| completati | Valoarea este indicată împreună cu un număr sau un procent. Dacă este specificată, imaginea nu este tăiată de marginea interioară a cadrului, ci umple și zona din interiorul cadrului. |
| iniţială | Setează această proprietate la valoarea implicită. |
| moşteni | Moștenește valoarea acestei proprietăți de la elementul părinte. |
Sintaxă
Div (border-image-slice: 50 20;) 
Orez. 4. Un exemplu de specificare a segmentelor de cadru de imagine
2.4. chenar-imagine-repetare
Această proprietate controlează modul în care imaginea de fundal umple spațiul dintre colțurile cadrului. Poate fi specificat folosind fie o singură valoare, fie o pereche de valori.
Sintaxă
Div (border-image-repeat: repetare;) Fig. 5. Exemplu de repetare a părții centrale a unui cadru de imagine folosind diferite tipuri de valori
2.5. margine-imagine-început
Proprietatea vă permite să mutați cadrul imaginii dincolo de marginile elementului cu o lungime specificată. Poate fi specificat folosind una sau patru valori.
Sintaxă
Div (border-image-start: 10px;) 
Orez. 6. Un exemplu de deplasare a unui cadru de imagine folosind diferite tipuri de valori
3. Decalaj cadru exterior outline-offset
Proprietatea specifică distanța dintre chenarul elementului de chenar și chenarul exterior creat folosind proprietatea contur.
/*Figura 1:*/ img ( chenar: 1px roz continuu; contur: 1px gri întrerupt; outline-offset: 3px; ) /*Figura 2:*/ img (border-width: 1px 10px; chenar-stil: solid; chenar-culoare: roz contur: 1px gri punctat: 3px;
Orez. 7. Un exemplu de decorare a unei imagini cu un cadru exterior 4. Cadru gradient
Valoarea imaginii-chenar poate fi nu numai o imagine, ci și o umplere cu gradient.
Cadru translucid
Transparentul este una dintre culori. În acest fel, puteți seta limite pentru toate părțile unui element simultan sau separat pentru fiecare parte. Grosimea chenarului este controlată de proprietatea border-width.
Plic poștal
Există multe exemple și tutoriale pe Internet pentru rotunjirea colțurilor unui bloc sau mese, dar, de regulă, aceste tutoriale se bazează pe utilizarea imaginilor sau a blocurilor suplimentare.
În tutorialul de astăzi vă voi arăta cum puteți colțurile mesei rotunde folosind numai CSS.
Marcare directă (Al doilea tabel diferă în aspectul celulelor din rândul de sus):
| 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. Rotunjiți colțurile direct la masă (etichetă de masă).
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; ; marjă: 0.7em auto ;
2. Eliminați orice fundal de pe prima linie.
Tr.bCTable_Header (fond: niciunul;)
3. Folosind pseudo-clasa:first-child și combinatorul > selectați prima celulă din tabel. Rotunjiți colțul din stânga sus al primei celule. Fundalul primului rând este format din fundalul celulelor acestui rând.
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- bord-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%; culoare de fundal:#00843C;)
4. Folosind pseudo-clasa:last-child și combinatorul > selectați ultima celulă din primul rând. Pentru aceasta, rotunjim colțul din dreapta sus.
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- bord-radius:0 10px 0 0 -o-border-radius:0 10px 0 0; -khtml-border-radius: 0 10px 0 0;
5. Rotunjiți colțurile de jos ale ultimei linii. Nu uitați să eliminați fundalul din ultima linie; Fundalul rândului este stabilit de fundalul celulelor ultimului rând.
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. Apoi, prin analogie cu punctele 3-4, în ultima linie rotunjim colțurile primei și exterioare celule.
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;) ; 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);
