[Konnor]

Howdy,

I was curious to know how one might code a gradient border in HTML/CSS.

So I have the following in photoshop....



Which is on both sides of the page.

I had thought that I could create an image with both borders in, measuring the entire width, with everything between the borders being transparent. Then saving as a .png. But then I seem to get problems with padding and it doesn't seem like a clean solution.

Does anyone have any thoughts on how I might achieve the above effect?

Thanks,

[sash_oo7]

show the full image

[Konnor]

sash_oo7, on 23 January 2012 - 07:34 AM, said:

show the full image

Link to the full image

http://img210.images...7/fullimage.jpg

[Wickham]

You could use this gradient maker
http://tools.dynamic...e.com/gradient/
to create a vertical gradient about 5px wide and use repeat-x for a background-image to the body style to repeat across the window width or use HTML5/CSS3 gradient.

I can't see why you would need a transparent middle section if the content div has backgrounds for the whole area to show on top of the body background.

This post has been edited by Wickham: 23 January 2012 - 07:28 PM

[porkchops]

Set the background of your container to be the appropriate CSS gradient. Then add a padding of 2px (assuming that's how thick the border is... I'm just eyeballing it). Then nest a black element inside of that. It's not very semantic but it's probably the best technical approach.

This post has been edited by porkchops: 23 January 2012 - 07:34 PM

[sash_oo7]

i wud slice the image like the following


the top red part will be thin strip along with the border and the shadow with (no-repeat)

the middle blue part will repeat the shadow (repeat-y)


and the bottom footer part will be single image with no-repeat()

and u can have seperate gradient using css3 or image for background

hope that makes sense?

This post has been edited by sash_oo7: 23 January 2012 - 09:33 PM

[Konnor]

Thanks for the solutions offered up so far.

I decided to fill the containing div with a 5 pixel repeating image, add a 1px padding on each side, then create all the content inside with a black background.

Think that's mostly what Wickham and porkchops suggested, although I didn't see whether you could create 3 colour gradients in CSS?

Ta,

[porkchops]

Konnor, on 24 January 2012 - 09:23 PM, said:

...although I didn't see whether you could create 3 colour gradients in CSS?

You can add a ton of color stops in CSS, so you can make really complex stuff.

http://www.colorzill...radient-editor/

That's a photoshop-esque way to generate them, and there are many other options out there too.

More complicated:

http://layerstyles.org/builder.html