- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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!
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.
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; }
Instead of all that markup, couldn’t this be done with css gradients?
Edit: I see this was already suggested.