Can I make a box (div) have a background with top half one colour and bottom half another colour, with just CSS? I’m, usually OK with CSS, but this one has got me…
You could use a gradient:
background: -webkit-linear-gradient(top, #333333, #333333 49%, #666666 50%, #666666);
This is for Safari 5+ and Chrome 10+. For older versions, the code is longer. Just change the “webkit” into “ms” (IE), “mod” (Firefox) or “o” (Opera).
With CSS gradients you can.
Edit: Wow huge delay in rendering this comment.
Try this for making de gradient:
@cynewatch meant -moz- for Gecko browsers.
Fantastic, thanks guys. I’d had a feeling that it would be a gradient but wasn’t sure I could get a perfect line between the two colours instead of a slight blur. I’ll give it a go. :D
m not sure in which browsers this will work (worked for me Mozilla, Chrome and IE8) but check this out using pseudo elements :after and :before in case you want only hard colors
@cyneWATCH You would use this for best results:
background-image: linear-gradient(#333 0%, #333 50%, #666 50%, #666 100%);
Ultimate CSS Gradient Generator
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".