Lief on Aug 23, 2010
CSS3 Sidebar Full Height Background Color
- in CSS & HTML
This is a small CSS3 trick which can do the Faux Columns trick without using image. The problem with sidebar in layout is it cannot extend automatically full height along with the content. We usually do it by creating an image for background and repeating it the way down for content container. Today, I will show you how we get the same result with CSS3. This technique is using the CSS3 gradient.
Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.
The old way
Lets review the way we usually do with the sidebar to make its background color to extend the way down of the page. According to the article from Alistapart, the author used the background image with a few pixels tall. The background image will have the wide background color for content column and one for sidebar column which looks something like
This background should used for container of both content column and sidebar column. Repeating this background vertically is what we always do:
"faux-css3" src="/img/spacer.gif">
The code using (for webkit browsers)
background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.70, #FFFFFF));
“Color-stops” specified above will determine the ending position of each color in gradient. Let make it simple, the “black” goes from right in 70% of the container then stops. Next, the “white” start filling at position 80% of the container. If you dont assign the postions to stop colors, default will %50.
Now, the trick, let them meet each other at the same position:
background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.30, #FFFFFF));
Now, this is the result
The color-stop above indicates that the left side should have black color at the point 30% of the gradient length, and the continue to fill the black color, but the black start filling color at the position 30% as well and it doesn’t have the space for two colors blending.
For Firefox:
background: -moz-linear-gradient(right center, #000000 30%, #FFFFFF 30%);
Some notes
Because Opera doesn’t support gradient at all, this technique won’t work in Opera browser. As well as Internet Explorer, its gradient filter doesn’t have color-stop function, so, this cheat will work in Firefox and Webkit browsers only.
However, since CSS gradient can be used anywhere an image can be used, we can use fallback to background image if the browser doesn’t support.
"text-align: center;">
- 20 Useful CSS3 Menu and Navigation Tutorials
- Top Worthwhile Tutorials of the Week – #6
- What CSS3 Can Do For You: CSS3 Generators and Other Helpful Tools
- What CSS3 Can Do For You: Typography and Special Effects
- What CSS3 Can Do For You: Animation and 3D effects
- What CSS3 Can Do For You: Streamlining Buttons and Imagery Transitions
- Top Worthwhile Tutorials of the Week – #5
- Kick-ass CSS3 Support in IE6, 7, and 8
- Top Worthwhile Tutorials of the Week – #4
14 Responses
perfect work thanks for sharing
Very clever and useful, but it would seem an image, which is totally cross-browser compliant, would be the best way to go and reduce the size of the CSS file (albeit, by a negligible amount). Until CSS3 enters the arena of compliance, these tricks are incredibly educational but I don’t feel are useful in a production environment.
Either way though, I do know that we have to educate ourselves now to be ready for the future. Just wish full CSS3 support (or at least enough to support attributes such as these) wasn’t years away. :/
The webkit browsers not support set the “px” to color-stop, so the mozilla is better for practice use. I think no one will set the sidebar’s width to “%”
Uhm, right. But since you already set the fixed width value for your layout, representing a percentage for the sidebar is not a big deal anymore… although I haven’t seen anyone to set percent for the sidebar before
Neat trick, but it is not CSS3, since the CSS3 Backgrounds and Borders Module does not include it. A better title would be “WebKit and Mozilla full height sidebar.”
Gradients are not part of the CSS3 Backgrounds and Border Module, but are included in the forthcoming CSS3 Images Module. Editors draft can be found here: bit.ly/7UsxJ5
Cool, I had missed that.
Yes, it’s CSS3. Gradients are not part of the backgrounds module, they are part of the image values module. The upcoming version that they’re working on right now includes it: dev.w3.org/csswg/css3-images/.
nice tutorial thanks for sharing..
nice :-bd
Nice tutorial thanks.
useful tutorial.
Thanks, you’ve done a very nice blog
Nice Read, thanks