Blog
Creating a dynamic container with a gradient
April 26, 2010 Author: Joel
Here is the approach I take when creating containers that are dynamic in height.
First I start with a png image of the container.
I open this in Photoshop and create my slices (4 images) from the original image.
Image 2. The background that is repeated, only 1px high cut just below the header ![]()
Image 3. The bottom gradient of the container. The top is just below the section that is repeated and bottom just above the bottom slice where the corners begin to round. ![]()
Image 4. The bottom of the container.
Now for putting this together with xhtml and css.
Here is my xhtml:
<div class="container">
<h1>Container Demo</h1>
<div class="main">
<div class="bottom">
<p>Add your content here</p><p>Add your content here</p>
</div>
</div>
<img alt="" src="images/bottom.png" width="429" height="11" />
</div>
and my css:
body {background-color:#fff; margin:40px; font-size:62.5%; line-height:100%; font-family:Arial, Helvetica, Sans-Serif;}
.container{width:429px; background:transparent url(../images/header.png) no-repeat top left;}
.container h1{font-size:1.2em; font-weight:bold; line-height:2em; color:#fff; text-align:center; margin:0;}
.container .main{width:429px; background:transparent url(../images/background.png) repeat-y top left;}
.container img{display:block;}
.container .bottom{width:429px; background:transparent url(../images/gradient.png) no-repeat bottom left; padding:5px 15px;}
A little explanation of what is going on.
Basically it all comes together with the two layers. The bottom gradient is on top of the main layer. When content is added the bottom gradient layer pushes the parent main container down. We align the bottom gradient at the bottom of the cell with the rest of the background transparent so you see the main repeating background behind it.
Is this how others are doing this? Do you have a better approach that you can share?
-
Categories
- asp.net (13)
- Blog (3)
- Business (6)
- Conferences (1)
- Errors (7)
- Office (1)
- Portfolio (3)
- Reviews (3)
- SEO (4)
- SQL Server (4)
- Tips (2)
- Uncategorized (3)
- Web Development (18)
-
Archives
- October 2012
- August 2012
- July 2012
- June 2012
- May 2012
- April 2012
- January 2012
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- April 2009
- March 2009