Rounded Box with Gradient in CSS
Rounded edges are naturally easier on the eye and give a calm flowing feel. They are in use on so many websites and can be assembled hundreds of ways. This is just one way to create this visual effect.
First things first, you'll need some kind of image editing software. I prefer Adobe Illustrator cs4 and Adobe Photoshop cs4 to create graphic elements. Make a rounded box to the width and minimum height that you need. Make sure the gradient starts above the corner and below the top corners. Also keep in mind the the Hexidecimal color code for you top gradient color and your border.
Here is a 200 pixel wide box with the top gradient color “ #ebebeb ” and a 1 pixel border that is “ #7f7e77 ”.
From there Slice it up into 3 sections. Make sure You have a solid color on the top where the gradient ends.
Take the middle section and clip it down to 1 pixel wide. This is all you need because it will tile across the box
Now that you have these 3 peices save them as them as a GIF or PNG with transparency turned on, or make sure the background behind the rounded edge matches the background that the rounded box will go on.Be sure to keep in mind optimizing images for the web, I'll save that for another day.
Put the pieces in your image folder for all your site pieces on your server. Then you need to create the html for the box on your webpage.
<div class="boxtop"> </div>
<div class="boxcontent"> whatever you want in the box goes here </div>
<div class="boxbottom"> </div>
Easy enough. Now create an external style sheet that will contain this
.boxtop {
background-image:url(images/posttop.gif);
height:6px;
position:relative;
width:200px
}
This is the top of the box, we declare the exact size of the image that is the box top, and then place the image in the that area
.boxcontent {
background-color:#ebebeb;
background-image:url(images/postbody.gif);
background-position:left bottom;
background-repeat:repeat-x;
border-left-color:#7f7e77;
border-left-style:solid;
border-left-width:1px;
border-right-color:#7f7e77;
border-right-style:solid;
border-right-width:1px;
position:relative;
width:200px;
}
Here we create the center of the box. It can expand vertically, while the gradient image tiles across the bottom of the container. Then we put a border only on the sides, to match the border that goes around our curved corner pieces. The background color of this box matches the background color of the top rounded corner image.
.boxbottom {
background-image:url(images/postbottom.gif);
background-repeat:no-repeat;
height:6px;
position:relative;
width:200px
}
This part is just like the top. It's just a box that has the bottom rounded corners and buts up to the content box.
I should also mention it would be good to find a CSS reset code snippet and use that in your style sheet. Just do a google search for css reset, Eric Myers has one I use all the time.
Basically think of css like putting together a puzzle. You make these little odd pieces that don't make sense on their own, but when put together they make a seamless picture. Also remember things like picture format and size, and as you understand css more use shorthand to compress the file sizes down even more. When using images and external style sheets, make sure to point to the correct places these files are stored. The biggest problem I see fellow students having is linking to the correct spot they stored files on their server.
I'm sure someone out there has a better way to make a rounded box, or this particular usage may not be appropriate in your design. The box only expands up and down, not left and right. But it works well in my site right here.
No comments yet.
No trackbacks yet.