Efectele CSS: rotunjirea colțurilor elementelor

Sintaxa foilor cascadelor de stil este atât de simplă încât posibilitatea de a obține designul cel mai neașteptat este disponibilă chiar și pentru o persoană departe de programarea și dezvoltarea site-urilor. Poate că din faptul că jocurile copiilor în cuburi rămân în memoria tuturor, pentru a folosi această experiență multi-fațetă în HTML, CSS nu este dificil.

Cu toate acestea, programarea modernă este încă departe de reprezentarea construcțiilor realității reale. Până în prezent, orice zonă (ocupată de orice element de bloc) în orice sens și scop formal are o formă dreptunghiulară în care se formează curba dorită a conturului.

Până în prezent, nici un cerc, raza de rotunjire, modul în care o linie dreaptă curbată și așa mai departe. P. Descrie ecuații matematice complexe sau cuburi foarte mici, trapezelor, triunghiuri sau alte elemente rectilinii care sunt distinse cu ochiul drept un punct de pe linia.

Construcții directe clasice

Nu este o surpriză faptul că progresul în domeniul programării și tehnologiei informației a legitimat desenele dreptunghiulare. Ideile de vârf nu au pierdut timpul pe forme rotunjite, dar nu au uitat să furnizeze dezvoltatorului caracteristici suficiente în etichetele și regulile HTML, CSS și limbile de programare aferente.

Orice element utilizat pe o pagină are o zonă dreptunghiulară și mai multe componente sunt selectate în acesta, din care, în fiecare caz specific, este necesar să se utilizeze numai cerințele compatibilității cu browserul, caracteristicile marcării conținutului specific în construcțiile sintactice disponibile.

Reguli generale CSS

Fonturile de stil cascadă sugerează descrierea elementelor după cum urmează:

• proprietate: valoare.

În acest caz, proprietatea este un nume specific, iar valoarea poate fi fie un nume, fie o enumerare a numelor sau valorilor.

În ceea ce privește elementele de bloc și necesitatea de a face o rotunjire a colțurilor prin CSS, este logic să se utilizeze proprietatea razei de frontieră și valorile acesteia în formatul "38px" sau "8px 16px 24px 38px".

Dacă valoarea este setată la un număr, va fi setată să fie una pentru toate unghiurile. Înregistrarea tuturor celor patru valori se referă la:

• primul număr este în colțul din stânga sus;
• a doua la partea superioară dreaptă;
• a treia la dreapta inferioară;
• acesta din urmă la stânga jos.

Împărțirea unor reguli

Conceptele de frontieră, imagine și fundal pot fi utilizate împreună. Acest lucru este normal, iar regulile nu interferează reciproc, formând o compoziție obișnuită. Principalul lucru este de a da o explicație a ceea ce înseamnă fiecare dintre ele și cum este suprapus.

Înainte de a implementa acest element sau acel element, este important să efectuați mai multe experimente și să testați activitatea pe mai multe browsere. Orientarea spre recomandări, recomandări, exemple de la terți sau sintaxa CSS, colțuri rotunjite etc. este rareori mai bună decât practica proprie nouă.

Este important să înțelegem că granița, imaginea, din punct de vedere al designului unghiului, sunt aceleași concepte. Imaginea nu poate fi prezentată în format png. Acesta va fi trunchiat de browser, în conformitate cu regulile stabilite în CSS. Rotunjirea colțurilor este preocuparea dezvoltatorului, indiferent de rectangularitatea materialului sursă.

caracteristici HTML, CSS din browsere

Bun venit la stilul de înregistrare în bloc - pentru toate browserele imediat. În orice caz, exemplele clasice pe tema "CSS: rotunjirea colțurilor" sugerează scrierea astfel:

fundal: # FF7F00- / * fundal * /

border: 1px #CCCCCC solid- / * cadru * /

-moz-border-radius: 10px; / * CSS rotunjirea colțurilor pentru Mozilla Firefox * /

-webkit-border-radius: 10px; / * ... pentru Chrome și Safari * /

-khtml-border-radius: 10px; / * ... Konquerer * /

raza de graniță: 10 pixeli; / * CSS rotunjire colțuri pentru toate * / etc

Cu toate acestea, în majoritatea cazurilor este suficient să se indice ultima regulă. Redundanța ar trebui utilizată numai atunci când există o nevoie reală pentru aceasta.

Mese clasice și minunate

În ciuda numeroaselor dispute ale susținătorilor aspectului tabelar (tr, td) și a utilizării etichetelor div și span, practica obiectivă preferă opțiunea de necesitate rezonabilă.

Divas au niște virtuți, altele au mese. Dacă nu se completează reciproc, ci pur și simplu concurau, întrebarea va dispărea repede într-o singură versiune, combinând cele mai bune laturi ale meselor și divas.

Cele mai multe site-uri sunt create folosind CMS (sisteme de management site-uri) și la dispoziția dezvoltatorului nu vine doar o gamă largă de "gigant" matrice de date, sute de foldere, obiecte, dar și tabele.

Etichetele [div | span], ca atare, nu sunt alocate, dar singurul lucru care ajunge exact la buy-out-ul complet al dezvoltatorului este stilurile CSS. Și orice CMS separă în mod clar codul, o parte din ea din creativitatea dezvoltatorului și propriile lor stiluri de stil adăugat, iar în cazul modificărilor (de exemplu, css - rotunjire colțuri ale mesei), puteți restaura oricând setările și stilurile implicite.

Curbele și unghiurile care nu sunt furnizate de sintaxă

Puteți urma cu strictețe toate regulile HTML, CSS, dar au un rezultat, ele nu sunt furnizate. Prin suprapunerea elementelor unul peste celălalt, puteți obține orice zone de orice configurație. Folosind programarea PHP pe server, poți să trimiți orice fișiere de stil în browser-ul vizitatorului și să le atașezi codul jаvascript corespunzător în corpul fișierului HTML sau într-un fișier JS separat.

Orice versiune a schiței, orice formă a elementului dvs. în afara regulilor CSS! Rotunjirea colțurilor este doar parțială, iar posibilitățile reale sunt mult mai largi. În același timp, programați propriile obiecte, nu puteți acorda atenție particularităților browserelor individuale, utilizați numai etichetele și construcțiile de limbi hipertext care sunt percepute de toate browserele fără excepție.

Folosind ideea de programare orientată pe obiecte, puteți proiecta aspectul unghiului sau curbei, evident că nu este furnizat de vreun browser de formă. În acest caz, nu este deloc necesar ca acesta să fie exact unghiul regiunii, inițial dreptunghiular în formă. Este important ca componentele curbei descrise sub forma regulilor CSS să fie combinate într-un singur cod obiect jаvascript și la momentul potrivit, la locul potrivit din browser, să se reflecte în forma corectă.

Cu această tehnologie, nimic nu împiedică realizarea unor astfel de obiecte în plan tridimensional sau demonstrarea animației.