Ovaj tutorial pojašnjava kako urediti zakrivljene obrube u CSS-u. Obrubi mogu biti osjenčani što će napraviti dodatni 3D efekt na vašoj stranici.

Slijedi diagram koji pokazuje udaljenosti na koje morate pripaziti tijekom izrade obruba (originalna veličina):

The heights of the top left and top right corners need to be equal. The same goes for the bottom left and bottom right corners. So TL Y = TR Y and BL Y = BR Y.

The complete box image should be as wide as you want the box to stretch to before it starts breaking. In the demo I made it 1600px wide.

The border image is created by combining the shaded areas below “LB” and “RB”. The left part goes to the left and the right part goes to the right. The height doesn’t matter, but make it at least a few pixels tall to reduce the number of times the browser needs to repeat it vertically.

The CSS affected is the following, with the measurements from the diagram used instead of actual values:

/* Top border and right corner */
.bt {
background:url(box.png) no-repeat 100% 0;
margin:0 0 0 TL Xpx;
height:TL Y/TR Ypx;
}

/* Top left corner */
.bt div {
height:TL Y/TR Ypx;
width:TL Xpx;
position:relative;
left:-TL Xpx;
background:url(box.png) no-repeat 0 0;
}

/* Bottom border and right corner */
.bb {
background:url(box.png) no-repeat 100% 100%;
margin:0 0 0 BL Xpx;
height:BL Y/BR Ypx;
}

/* Bottom left corner */
.bb div {
height:BL Y/BR Ypx;
width:BL Xpx;
position:relative;
left:-BL Xpx;
background:url(box.png) no-repeat 0 100%;
}

/* Left border */
.i1 {
padding:0 0 0 LBpx;
background:url(borders.png) repeat-y 0 0;
}

/* Right border */
.i2 {
padding:0 RBpx 0 0;
background:url(borders.png) repeat-y 100% 0;
}

Procedura:

1. Kreirajte obrube (box) u Photoshopu, Fireworks ili bilo kojem alatu za dizajniranje.
2. Spremite jednu kompletnu sliku i zasebno obrube
   
3. Izmjerite udaljenosti koje su objašnjene u diagramu
   
4. Unesite CSS kod na vašu stranicu