CSS efekti: zaokruživanje uglova elemenata

Sintaksa kaskadnih stilskih tablica konstruirana je tako jednostavno da je mogućnost dobivanja najneočekivanijeg dizajna čak udaljena od programiranja i razvoja stranica za osobu. Možda iz činjenice da su dječje igre u kockama ostale u sjećanju, da bi se koristilo ovim višestrukim iskustvom u HTML-u, CSS ne radi.

Međutim, moderno programiranje je još uvijek vrlo daleko od prikaza konstrukcija stvarne stvarnosti. Do sada je bilo koje područje (zauzeto proizvoljnim blokovskim elementom) u bilo kojoj svojoj vrijednosti i formalnoj svrsi bilo pravokutnog oblika, unutar kojeg je oblikovana potrebna linija krivulje krivulje.


Do sada su bilo koji krug, radijus zaokruživanja, bilo koja iskrivljena linija, itd. Opisani složenim matematičkim jednadžbama ili vrlo malim kockama, trapezima, trokutima ili drugim izravnim elementima koji su uočljivi za oko kao točka na liniji.

Klasični izravni dizajni

Ne postoji ništa iznenađujuće da je napredak u području programiranja i informacijske tehnologije legalizirao pravokutne strukture. Napredne ideje nisu počele gubiti vrijeme na zaobljenim oblicima, ali nisu zaboravile podijeliti developeru dovoljno značajki u oznakama i pravilima HTML, CSS i srodnih programskih jezika.
Bilo koji element koji se koristi na stranici ima pravokutno područje i sadrži nekoliko komponenti, od kojih je, u svakom pojedinom slučaju, samo potrebno,uzimajući u obzir zahtjeve unakrsnog pretraživanja, obilježja označavanja određenog sadržaja u pristupačnim sintaktičkim konstrukcijama.


Opća pravila CSS-a

Kaskadni stilski listovi sugeriraju opisivanje elemenata kako slijedi:
  • svojstvo: vrijednost.
  • U ovom slučaju, svojstvo je specifično ime, a vrijednost može biti i ime i popis imena ili vrijednosti. Što se tiče blok elemenata i potrebe za kružnim skretanjem s CSS-om, ima smisla koristiti svojstvo border-radius i njegove vrijednosti u formatu 38px ili 8px 16px 24px 38px.
    Ako je jedan broj naveden kao vrijednost, bit će postavljen na ovo za sve kutove. Zapis svih četiriju vrijednosti uključuje:
  • prvi broj - u gornjem lijevom kutu;
  • drugo - gore desno;
  • treći - dolje desno;
  • potonji - niže lijevo.

    Dijeljenje nekih pravila

    Koncepti granične i pozadinske slike mogu se koristiti zajedno. To je normalno, a gornja pravila ne ometaju jedni druge, tvoreći zajednički sastav. Najvažnije je dati izvještaj o tome što točno svaki od njih znači i kako se ono nadovezuje. Prije implementacije ovog ili onog elementa važno je provesti nekoliko eksperimenata i provjeriti rad na nekoliko preglednika. Savjeti za ciljanje, preporuke, primjeri treće strane ili CSS sintaksa, zaokruživanje uglova, itd. Rijetko su bolji od vlastite nove prakse.
    Važno je shvatiti da je granica, slika, sa stajališta dizajna uglova - isti tip pojma. Slika se ne može prikazati u png formatu. On ćeskraćeno preglednikom, u skladu s pravilima postavljenim u CSS-u. Zaokruživanje uglova - briga developera bez obzira na pravokutnik izvornog materijala.

    Značajke HTML-a, CSS-a iz preglednika

    Čestitamo na stilu pisanja u rasutom stanju - za sve preglednike odmah. U svakom slučaju, klasični primjeri na temu "CSS: Zaokruživanje kutova" sugeriraju pisanje ovako: pozadina: # FF7F00; /* pozadina * /granica: 1px #CCCCCC solid; /* okvir * /-moz-border-radius: 10px; /* Kutovi zaokruživanja CSS-a za Mozilla Firefox * /-webkit-border-radius: 10px; /* za Chrome i Safari * /-html-border-radius: 10px; /* Konquerer * /border-radius: 10px; /* CSS zaokruživanje uglova za sve * /, itd. Međutim, u većini slučajeva dovoljno je specificirati zadnje pravilo. Prekomjerno korištenje treba koristiti samo kada postoji stvarna potreba.

    Klasične i veličanstvene tablice

    Unatoč brojnim kontroverzama među sljedbenicima tabularnog prikaza (tr, td) i varijantama korištenja oznaka div i span ("čudan" raspored), objektivna praksa preferira opciju razumne nužnosti. Djevice imaju određeno dostojanstvo, stolovi su različiti. Ako se međusobno nadopunjuju, ali se jednostavno natječu, problem će se brzo ispariti u jednoj opciji, koja kombinira najbolje strane stolova i djevica. Većina web-mjesta stvorena je uz pomoć CMS-a (sustavi za upravljanje web-lokacijama), a na raspolaganje developeru dolazi ne samo širok raspon "gigantskih" polja podataka, stotine mapa, objekata, već i tablica. Oznake [div | span] nisu označene, ali jedina stvar koja se tiče diskrecije developera su CSS stilovi. Štoviše, bilo koji CMS jasno dijeli kao kod uključen u njega od tvorca developer, dai vlastite stilove iz dodanih stilova, a za promjene (na primjer, u css - zaokruživanju kutova tablice) uvijek možete vratiti zadane postavke i stilove.

    Krivulje i kutovi koje sintaksa ne daje

    Možete se strogo pridržavati svih pravila HTML-a, CSS-a, ali imati rezultat, oni nisu osigurani. Postavljanjem elemenata jedan na drugi, možete primiti bilo koje područje bilo koje konfiguracije. Koristeći PHP programiranje na poslužitelju, možete poslati bilo koju datoteku posjetitelja u preglednik posjetitelja i priložiti odgovarajući javascript kôd tijelu HTML datoteke ili zasebne js datoteke.
    Bilo koja opcija konture, bilo koji oblik vlastitog elementa izvan pravila CSS-a! Zaokruživanje uglova je samo djelomično, a stvarne mogućnosti su mnogo šire. U isto vrijeme programiranje vlastite objekte, ne može obratiti pozornost na značajke pojedinih preglednika, koristiti samo one oznake i dizajna markup jezika, koji su percipiraju svi bez iznimke preglednika. Koristeći ideje objektno orijentiranog programiranja, možete dizajnirati izgled kuta ili krivulje, očito nije osiguran u bilo kojem obliku preglednika. U isto vrijeme nije nužno da će to biti točan kut regije, izvorno pravokutan. Važno je da se komponente krivulje, opisane u obliku CSS pravila, kombiniraju u jedan vizualni objekt s javascript kodom iu pravom trenutku, na pravom mjestu preglednika, odražavaju se u ispravnom obliku. S takvom tehnologijom, ništa ne sprečava takve objekte da se ostvare u trodimenzionalnoj ravnini ili demonstrirajuanimacije.
  • Povezane publikacije