I would like to ask you about the advice, how to style with CSS the image-background above, what's the best practice.
I got a layout by my designer and this is a background - there's a gradient from silver color to white (from top to bottom), the same with borders.
Top-left and top-right corners are rounded (it's like 3px).
I am trying to find the most effective way, how to code this thing, but unfortunately still can't find the best approach...
Using css on your element:
.gradient-bg {
/* fallback/image non-cover color */
background-color: /*start color*/;
/* fallback image */
background-image: url(images/fallback-gradient.png);
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(/*start color*/), to(/*end color*/));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, /*start color*/, /*end color*/);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, /*start color*/, /*end color*/);
/* IE 10+ */
background-image: -ms-linear-gradient(top, /*start color*/, /*end color*/);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, /*start color*/, /*end color*/);
-moz-border-radius-topleft: /*pixel radius*/;
-moz-border-radius-topright:/*pixel radius*/;
-webkit-border-top-left-radius: /*pixel radius*/;
-webkit-border-top-right-radius: /*pixel radius*/;
}
The best place I like to go for CSS3 styling is CSS3Please. They use classes like:
.box_round {
-webkit-border-radius: 3px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 3px; /* FF1-3.6 */
border-radius: 3px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, #444444, #999999);
}
Based on your gradient border question in the comments, you could instead use box-shadow to simulate a border:
.box_shadow {
-webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 4px 0px #ffffff; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
You need to make use of the border-radius rule. You can learn about it at the w3c.
To see an example of its use, see http://jsbin.com/aresif/edit#html,live. Feel free to play around with it.
div.someClassName {
background-image: url("YourImageGoesHere.jpg");
background-repeat: repeat-x;
border: 1px solid red;
border-radius: 1em 1em 0 0;
}
Slight optimization
That image appears to be a simple vertical-gradient. There is no sense having it be as wide as it is, since in CSS, you can repeat a background-image with the background-repeat rule. You can read about it at the w3c. I would first change that image into a 1px wide image. This will make your page load slightly quicker since the browser doesn't need to download a larger image.
