Colours above site.

[joshkallmeyer]

howdy!

Check out this: http://cl.ly/AsJg

An acquiantance built it, but he took down the demo, so I’m not sure how the colours at the top of the screen work… I remember the html being similar to:

and the css something like this:

footer > .f1 {left: 0%; background: #COLOUR}

That’s about all I remember. Does anyone know how to create the colours at the top?

Thanks!

[Johnnyb]

A few methods which could work are:

– You could try using a top border image
– Or perhaps use a :before pseudo element and style it with a css3 gradient which uses several color stops.
– Or for deeper browser support you could use a background image on the white content section of those colored strips.

John

Edit: I couldn’t see your HTML code before, but now that I can I’d advise against using spans like that as it’s really unsemantic and is just resulting in unnecessary markup.

[daniel_newdigs]

The colors seem to be made up of two things, a hex color (i.e. #112233) and a PNG overlay that puts an alpha gradient on them. If you have such a gradient, it’d be something like:

footer > span { background-image: url(gradient.png); background-repeat: no-repeat; }

footer .f1 { background-color: #112233; }

footer .f2 { background-color: #334455; }

footer .f3 { background-color: #556677; }

footer .f4 { background-color: #778899; }

footer .f5 { background-color: #99AABB; }

[Chris Coyier]

@daniel..
here it is

[chrisburton]

Instead of all that markup, couldn’t this be done with css gradients?

Edit: I see this was already suggested.

[Author]

Posts