In this article we will show how to code a gradient rounded corner box by using HTML and CSS. In this first step you need to slice the Gradient rounded corner box. You have to make a plan before you cut up the slices. It is not a straight forward task in PSD into HTML conversion as you want to make the gradient box fluid. Web designers can create gradient in many ways when they design the website. Generally, web designers use gradient either vertical or horizontal.

The gradient round corner box :

Now let’s see how to convert the design image display on the left using HTML and CSS. This is a gradient box with top of the bottom gradient. In this case the box can expand from top to bottom and it is common pattern expanding HTML boxes. Now let’s see how we can cut the slices of this design.

You can see that the designer has used two different colors in the design, in the gradient box design. Then we have to plan how to optimize the slices of the gradient box and this is the important part of PSD to HTML conversion. HTML programmer has to think about making use of CSS sprites. CSS sprites is a collection of images put in a single image. HTML programmers should use the minimum number of slices in the HTML code. Below we are showing the plan of slicing to implement the gradient box.

 

 

 

 

 

 

How to slice the image :

How to plan HTML slices?

You can see the first slice will create the top two rounded corners of the box, the second slice will create the body of the gradient box and the third slice will create the bottom two corners. We can also use CSS sprites. We can merge top and bottom slices and can create a single CSS sprite image. Using the CSS sprites we can reduce the number of images we are going to use in the HTML code. In this way we can implement the gradient box using only two slices.

CSS Sprite image

combining top and bottom slices to make a CSS Sprite image

Now the images which are required to create the gradient box is ready to use. Create the table-less HTML div structure to create the rounded corner box with HTML and CSS. For creating table-less HTML layouts most HTML programmers use divs to build the layout of HTML coding. We will 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>/

We are using four divs to build the box. Outer div will be the container or the place holder and all other three divs will create the top, middle and bottom respectively. Let’s see how we do CSS coding to style above divs using above sliced images. Let’s use our CSS to HTML knowledge in HTML styling. Using the first div or the above div structure now we make this div as the container using CSS. The easy code for this is below:-

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

Here we will be using the floated divs in the implementation of gradient box. Actually floated divs give the HTML and CSS programmers more control to handle to browser compatibility issues.

Now let’s see how we can code top part using CSS coding. Remember the height of the top slice image. For this we use the below CSS code.

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

Here we are using the CSS sprite image to build the top. Although the CSS sprite image height is 28 px, we will only need the top part of it. Hence we use the height as 12 px. Check in the browser and you can see the top part appears in it as below:-

Here is the top of the rounded corner box

Programming middle part of the gradient box is very important. This is the div which will play the expanding role. Here the div can grow vertically from the bottom. Let’s see how we will code this div using CSS.

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

The div box is still not liquid due to the fixed height. See the code in the browser and you can see that top and middle parts of the gradient box are present.

Half completed gradient box

 

Now we will code the bottom div. We will use the real value of the CSS sprite image. Let’s see how we will code CSS sprite image using HTML and CSS.

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

You can notice only one extra CSS property in the CSS code. That is a background position. We position the images at the right place and manage to get the exact bottom. We are using same image for top and bottom. This will save one request from the server. In this way you can save the requested bandwidth and increase page performance.

Now refresh the web page and you will notice your complete gradient box.

Rounded corner box not yet liquid

 

 

 

 

 

 

 

 

 

 

To make the gradient box liquid first you need to add a background color. If you check the middle sliced image, it is only 130 px in height. When the box expands it needs to keep the same gradient look. The background color should be the color at the bottom of the middle slice. We use the color #c7fc9c. Selecting the middle sliced bottom color as background color will appear as filling gap between bottom slice and the middle slice. The bottom color of the middle slice is the top color of the bottom slice. You need to control the background repeat property. We allow only background image to repeat along the x axis. In order to allow the box to be liquid we have to remove the height from middle div tag which will expand vertically.

Below is the revised CSS code:-

.gradient-box-middle{width:150px;background-image:url(gradient-box-m.png)
;background-repeat:repeat-x;background-position:top;background-color:#c7fc9c;}
 
In order to show how this div behaves we have added a paragraph in the middle to show the div expansion. You can also use images or text or valid HTML inside the middle div. The below image shows the final result:-

Liquid gradient rounded corners box

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Fully liquid gradient box

Full CSS 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;}

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

Conclusion

We have just shown you how to Slice Gradient rounded corners box using HTML and CSS. For expert services you can also hire PSD to HTML conversion services which can do this task efficiently and quickly. Otherwise follow the above given steps to get the desired result.