CSS - how to style rounded area with a gradient background?


Tags: html,css,background

Problem :

enter image description here

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...



Solution :

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 */
}

    CSS Howto..

    How to revert to original CSS?

    How can I get the second child using CSS?

    How do you disable the set width of parent element for child element?

    How to position a fixed div under another fixed div?

    How to make a small icon using css?

    How to organize html and css to do this UI design with responsive design

    How to inject css into a document via ajax?

    How to make a square button

    How to add a centered div that fades-in from the top over my content?

    How to use Ant to concatenate CSS files from external CSS @import file

    How to use z-index to make an element overlap another element in CSS

    How to style a parent element when the mouse is over a child element?

    How to return a javascript set style property to CSS default

    Portrait screen with 2 pages but only one of them should show

    How to center an image over another image in CSS

    How to refactor an existing project to use Compass?

    Dompdf - how to display table and graph sidebyside?

    How can I test websites for Mobile Devices

    How to find address of css and js files?

    How to make css menu width impossible to change when zooming or changing resolution?

    How to use text-overflow properly to format text?

    How to dynamically change CSS elements to be HTTPS or HTTP

    How to convert a piece of CSS code to LESS css

    How do I handle the hover in this recursive menu using jQuery?

    How to switch between multiple CSS animations?

    HTML/CSS Fluid Grid: How to overlay div to another div

    CSS: How to drill all the underlying layers up to the background?

    How to select ids which contain special characters?

    How to remove the vertical white line between the two green divs without floating?

    How to show the same font which in photoshop on my webpage?