How to create liquid gradient rounded corner box

Slicing a gradient rounded corner box is not an easy task in psd to html, especially if you want to make it expandable. You can create gradients in different ways. Let’s consider how to convert below design to css, a gradient box with top to bottom spreading gradient. In this slicing psd scenario the box can be expanded from top to bottom and it is the general way of expand html boxes. Let’s look at how we could do the slicing of this psd to html shown below;

As you see, there are two different colors we have used in the psd gradient box. Step one need to plan and optimize the slices of the psd gradient box. This is the most important thing that psd to html coders can do. You need to think about, how we make use of css Sprites? What is the minimum use of psd slices? I came up with below plan of slices to implement the gradient box.

If you do the slicing psd to html like shown in above image you can focus on how we can use css Sprite. As you see, for top and bottom slices we can use css Sprites and create an image as follows.

Let’s create the required nested table-less html div structure in order to create the rounded corner box in clear psd to html. When you are creating table-less html layouts most html coders prefer using divs to build the layout of html coding. I’m going to use the below mentioned div structure;

    <div class="gradient-box">
        <div class="gradient-box-top">
        </div>
        <div class="gradient-box-middle">
        </div>
        <div class="gradient-box-bottom">
        </div>
    </div>

Next task is to do css code to style above divs using above slices; how to style above table-less html div structure using css? Let’s pull out our css to html knowledge or css knowledge in html styling.  Consider the above table-less html div structure. The first div of the above div structure is responsible of holding all the divs as one unit. How would you do that using css to html? You can do it as follows;

.gradient-box{float:left;width:150px;}

I will be using floated divs throughout the implementation of gradient box. Floated divs will give the css/html coders more control in browser compatibility issues.

The second div is going to hold the top psd slice of the gradient box. Let us look how we can code it using css coding;

.gradient-box-top{height:12px;width:150px;background-image:url(css-sprite.png);}

Even though the css sprite image height is 28px, we only need the top part of it. So we use the height as 10px. Now when you view your html coding in the browser you will see the top part appears over  there like this.

Now comes the middle part of the gradient box and the most important div too. Here you need to be very careful.  Why? This is the div that will play the liquid role or the expanding role. In this case the div can only expand or grow vertically from the bottom. Let’s look at how we could code this div using css.

.gradient-box-middle{height:130px;width:150px;
background-image:url(gradient-box-m.png);}

Note that still the div box is not liquid because of fixed height. Once you view your code on the browser you can notice that top and middle parts are of the gradient box is present.

Now comes the interesting part of how to code the bottom part. Why now we going to use the real value of the css sprite image. Let’s look at how we code css sprite image using css and html.

.gradient-box-bottom{height:12px;width:150px;
background-image:url(css-sprite.png);background-position:left -16px;}

Let’s dig into above css code. Only one extra css property has come to play. That is the background position. This is the most important property when it comes to css sprites by positioning your images at the right place we manage to get the exact bottom. But did you notice one thing? We are still using the same image for top and bottom. This will save one request from the server. If you reuse this gradient box in many places, each time you use it to save the request bandwidth and increase your page performance.

Once everything is done refresh the web page, you will see your complete gradient box in this way.

Let’s make this gradient box liquid now. How? You need to add a background color. In this case the back ground color and it should be the color at the bottom of the middle slice. In this case color(#c7fc9c) One other thing is you need to control that the background repeat property. In this case you allow background image to repeat along the x axis. The other thing we need to do is removing the height from middle div tag make it expand vertically. You can take a look how I have changed the css to make it expandable.

.gradient-box-middle{width:150px;background-image:url(gradient-box-m.png);
background-repeat:repeat-x;background-position:top;background-color:#c7fc9c;}

To show how this div behaves I have added a paragraph to show div expansion. You can use images or text or any other valid html inside the middle div. below image shows the final result.

Here is the full css style code;

p{margin:0;padding:0;}

.gradient-box{float:left;width:150px;} 

.gradient-box-top{height:12px;width:150px;
background-image:url(css-sprite.png);} 

.gradient-box-middle{width:150px;background-image:url(gradient-box-m.png);
background-repeat:repeat-x;background-position:top;background-color:#c7fc9c;} 

.gradient-box-bottom{height:12px;width:150px;
background-image:url(css-sprite.png);background-position:left -16px;}

Here is the html code;

<div class="gradient-box">
        <div class="gradient-box-top">
        </div>
        <div class="gradient-box-middle">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut
libero ligula. Proin viverra convallis lorem, at pharetra ligula vehicula id
. Nunc convallis accumsan commodo. Ut sed elit vel dui feugiat tincidunt
 quis id lorem. Fusce dignissim odio nec erat interdum dictum. Phasellus est
nulla, feugiat sit amet ultricies non, egestas iaculis justo. </p>
        </div>
        <div class="gradient-box-bottom">
        </div>
    </div>

You can find the completed sample here.