korišćenjem CSS border osobine.
Da ne bi sve bilo baš tako jednostavno, trenutno nije moguće napraviti ne-kvadratne ivice upotrebom samo (X)HTML i CSS (ne-kvadratne ivice ćemo zvati “zaobljene ivice”, iako ne moraju biti baš “zaobljene” nego mogu imati i neki drugi oblik).
Da bismo prevazišli nedostatak CSS-a u kreiranju zaobljenih ivica, možemo koristiti slike za njihov prikaz. Ovo je jednostavno ukoliko znate dimenije vašeg
- kreirate sliku sa određenim dimenzijama i postavite je za background tj. pozadinu. Ali, mi nećemo fiksne veličine na sajtu, nego želimo da elementi budu promenljivih dimenzija, u zavisnosti od sadržaja (širina, visina ili oboje). Ukoliko ne znamo kakav će sadržaj biti na strani ne možemo znati ni kolike će biti dimezije
.Osnovno u ovom uputstvu je kako kreirati zaobljene ivice koje su 'fluid' ili promenljive – to znači se one menjaju u zavisnosti od sadržaja.
===== Teorija =====
Da bismo prevazišli navedeni problem, treba nam odvojene slike za dobijanje 4 ugla našeg zaobljenog boksa. Da bi smo ovo dobili, moramo biti sigurni da je box dovoljno velik. Da bismo ovo postigli nasu sliku ćemo postaviti u 4 layer-a, preklapajući jedan preko drugog da bismo dobili iluziju da je ivica neprekinuta.
{{:animation.gif|Animacija}}
Slika 1. Zaobljeni uglovi.
Proces je ilustrovan animacijom prikazanom gore. U svakom koraku poslednja slika ide na vrh.
- Prvo, velika slika ima levu i gornju ivicu i gornji levi zaobljeni ugao, pozicionirana u gornji levi ugao našeg
(zaokruženo crvenom bojom). Slika je veća nego što je potrebno zbog ilustracije ali se ona neće videti u praksi.
- Sledeće je tanka slika koja sadrži donju ivicu i donji levi ugao koji se pozicionira dole levo u našem
, preko prve slike. I opet je veći od onog što nam je potrebno.
- Treće tanka vertikalna slika koja sadrži desnu ivicu i gornji desni ugao se pozicionira u gornji desni ugao opet preko prethodne slike.
- Konačno, kvadratna slika koja sadrži samo donji desni ugao se pozicionira u donji desni ugao.
===== Praksa – izmena vašeg šablona =====
Za implementaciju modula sa zaobljenim uglovima koristimo sledeće naredbe
:
Treba kreirati i sledeći kod:
Ova četiri ugnježdena
a daju nam lejere koji su nam potrebni za slike. Možemo upotrebiti “class name” spoljnjeg
da budemo sigurni da radimo sa pravim (tačno određenim)
-ovima, i onda upotrebiti ugnježdene odnose za primenu ispravne slike za svaki lejer. A sve to definisati u CSS-u na sledeći način:
div.module_menu {
background: url(../images/rounded_topleft.png) 0 0 no-repeat;
padding: 0;
}
div.module_menu div {
background: url(../images/rounded_bottomleft.png) 0 100% no-repeat;
margin: 0;
border: 0;
}
div.module_menu div div{
background: url(../images/rounded_topright.png) 100% 0 no-repeat;
}
div.module_menu div div div {
background: url(../images/rounded_bottomright.png) 100% 100% no-repeat;
}
Padding, margine i border su potrebni da biste bili sigurni da se svaki
nastavlja na prethodni.
treba voditi jos i računa da ako Module content sadrži
ova css pravila će se primeniti i na njega. Zato je potrebno dodati još jedno pravilo
div.module_menu div div div div{
background: none;
}
"And that's it - happy coding!"8-)