Colțuri rotunjite css. Colturi rotunjite
Toată lumea s-a săturat de mult de colțurile dreptunghiulare tradiționale în designul site-urilor web. La modă sunt colțurile rotunjite, care sunt realizate nu folosind imagini, ci prin stiluri, pentru care se folosește proprietatea border-radius. Această proprietate poate avea una, două, trei sau patru valori separate printr-un spațiu, care determină raza tuturor colțurilor sau fiecare în parte.
În tabel 1 arată un număr diferit de valori și tipul de bloc care se obține în acest caz.
| Cod | Descriere | Vedere |
|---|---|---|
| div ( chenar-rază: 10px; ) | Raza de rotunjire pentru toate colțurile simultan. | |
| div ( chenar-rază: 0 10px; ) | Prima valoare setează raza colțurilor din stânga sus și din dreapta jos, a doua valoare setează raza din dreapta sus și din stânga jos. |  |
| div ( chenar-rază: 20px 10px 0; ) | Prima valoare setează raza colțului din stânga sus, a doua - atât dreapta sus, cât și stânga jos, iar a treia valoare - dreapta jos. |  |
| div ( chenar-rază: 20px 10px 5px 0; ) | Setează secvenţial raza colţurilor din stânga sus, din dreapta sus, din dreapta jos şi din stânga jos. |  |
Exemplul 1 arată cum să creați un bloc cu colțuri rotunjite.
Exemplul 1. Colțurile unui bloc
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Rezultatul acestui exemplu este prezentat în Fig. 1.
Orez. 1. Bloc cu colțuri rotunjite
Un efect interesant poate fi obținut dacă setați raza de rotunjire mai mare de jumătate din înălțimea și lățimea elementului. În acest caz, veți obține un cerc. Exemplul 2 arată cum să creați un buton rotund cu o imagine.
Exemplul 2: Buton rotund
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Rezultatul acestui exemplu este prezentat în Fig. 2.
Orez. 2. Buton rotund
În browserul Opera, rotunjirea la
Proprietatea border-radius poate fi combinată cu alte proprietăți, de exemplu, adăugarea unei umbre unui element. În exemplul 3, se realizează un set de cercuri, dintre care unul este evidențiat folosind box-shadow . Acest set poate fi folosit pentru a naviga prin pagini sau fotografii.
Exemplul 3. Strălucire
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Rezultatul acestui exemplu este prezentat în Fig. 3.
Orez. 3. Strălucește în jurul cercului
Folosind raza de frontieră, puteți face nu numai un cerc, ci și o elipsă, precum și o rotunjire eliptică pentru un bloc. Pentru a face acest lucru, trebuie să scrieți nu o valoare, ci două, separate printr-o bară oblică. Scrierea 20px/10px înseamnă că raza orizontală a fileului va fi de 20 pixeli, iar raza verticală va fi de 10 pixeli. Exemplul 4 arată cum să creați colțuri eliptice pentru a adăuga o legendă în stil benzi desenate la o fotografie.
Exemplul 4: Elipse
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Rezultatul acestui exemplu este prezentat în Fig. 4.
Orez. 4. Utilizarea colțurilor eliptice
De asemenea, puteți modifica aspectul colțurilor imaginilor adăugând proprietatea rază-chenar la selectorul img, așa cum se arată în Exemplul 5.
Exemplul 5: Imagini
HTML5 CSS3 IE 9+ Cr Op Sa Fx
). 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 (0px în exemplu)
- Colțul din stânga jos (0px în exemplu)
De exemplu
Rezultat:
Pentru a nu reține ce valoare urmează 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 folosind 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-rază :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:
raza-chenar : 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ă și, 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 ;
Colțurile rotunjite din fotografie arată destul de interesante și atractive. Cel mai adesea, astfel de imagini sunt folosite atunci când se realizează colaje sau se creează prezentări. De asemenea, imaginile cu colțuri rotunjite pot fi folosite ca miniaturi pentru postările de pe site.
Există multe opțiuni de utilizare, dar există o singură modalitate (corectă) de a obține o astfel de fotografie. În acest tutorial vă voi arăta cum să rotunjiți colțurile în Photoshop.
Deschideți fotografia în Photoshop pe care urmează să o editați.
Apoi creați o copie a stratului cascadă numit "Fundal". Pentru a economisi timp, utilizați tastele rapide CTRL+J.
Copia este creată pentru a lăsa imaginea originală intactă. Dacă (deodată) ceva nu merge bine, puteți șterge straturile nereușite și puteți începe de la capăt.
În acest caz, ne interesează doar una dintre setări – raza de rotunjire. Valoarea acestui parametru depinde de dimensiunea imaginii și de nevoi.
Voi seta valoarea la 30 de pixeli, astfel încât rezultatul va fi mai vizibil.
Acum trebuie să întindeți figura rezultată pe întreaga pânză. Apelarea funcției "Transformare libera" taste rapide CTRL+T. Pe formă va apărea un cadru, pe care îl puteți utiliza pentru a muta, roti și redimensiona obiectul.
Suntem interesați de scalare. Întindeți silueta utilizând markerii indicați în captură de ecran. După ce scalarea este completă, faceți clic INTRODUCE.
Sfat: pentru a scala cât mai precis posibil, adică fără a trece dincolo de pânză, trebuie să activați așa-numita "Legare" Uită-te la captura de ecran, arată unde se află această funcție.
Funcția face ca obiectele să se „lipească” automat de elementele auxiliare și chenarele pânzei.
După cum puteți vedea, în jurul figurii s-a format o selecție. Acum mergeți la stratul de copiere și eliminați vizibilitatea stratului cu forma (vezi captura de ecran).
Stratul cascadă este acum activ și gata pentru editare. Editarea constă în eliminarea lucrurilor inutile din colțurile imaginii.
Inversarea selecției folosind taste rapide CTRL+SHIFT+I. Acum selecția rămâne doar pe colțuri.
