Korištenje obruba i pozadina u HTML5

Tamo je svojstva koja se široko koriste u HTML -u i CSS -u, kao što su obrubi i pozadine, Od ugradnje CSS3, oni su poboljšani na takav način da možemo imati zaobljene rubove, na primjer, iako je to nešto što izgleda prilično jednostavno, to u prošlosti nije bilo dostupno, pa se ove funkcionalnosti sada na prilično način proširuju rad i dizajnera i programera.
Prilikom primjene ruba moramo uzeti u obzir 3 vrlo važna atributa, a to su:

• širina obruba: inicijalizira širinu obruba.
• obrubljeni stil: inicijalizira stil za iscrtavanje obruba.
• boja obruba: inicijalizira boju obruba.

Kad upoznate svojstva, pogledajmo jednostavan primjer primjene ruba:

 Primjer
Postoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.

Za definiranje širine ruba možemo raditi na temelju 3 mjerenja, po mjernim jedinicama kao što su piksela, cm, em; postocima i unaprijed postavljenim postavkama, kao što su, tanki, srednji i debeli.
Definiramo vrstu ruba sa stilom, za to imamo sljedeće mogućnosti:

• nijedan
• isprekidano
• točkasto
• dvostruko
• utor
• umetnut
• na početku
• greben
• čvrsta

Pogledajmo sada grafički što znači svaki od ovih stilova:

Postoji i mogućnost primjene obruba i stila na svaku stranu elementa, za to ćemo upotrijebiti sljedeće upute:
[color = # d3d3d3] širina obruba
rubni-top-style
obrub-gornja boja [/ color]
border-bottom-width
stil dna granice
boja obruba-dna
[color = # d3d3d3] širina obruba-lijevo
rubno-lijevo
obrub-lijeva-boja [/ color]
[color = # d3d3d3] širina ruba-desno
granično-desno
obrub desno-boje [/ color]
Gdje vrh odnosi se na vrh, dno do donjeg, lijevo ulijevo i pravo na desno.
Time čak možemo postići kombinacije vrsta rubova u istom elementu.
Pogledajmo primjer potonjeg:

 Primjer
Postoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.

Kôd nam daje sljedeće rezultate:

Za stvaranje zaobljenih rubova možemo koristiti svojstvo radius što nam omogućuje da naznačimo radijus zakrivljenosti ruba.
Pogledajmo kako implementirati kod:

 Primjer
Postoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.

Rezultat je sljedeći zaslon:

Ovime zaključujemo ovaj vodič o tim elementima, sada možemo ugraditi poboljšanja u naš CSS bez puno napora i s najsuvremenijim tehnološkim alatima.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod