Grow your CSS skills. Land your dream job.

Two-tone box?

  • # October 6, 2011 at 3:32 pm

    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…

    # October 6, 2011 at 3:45 pm

    You could use a gradient:
    example:

    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).

    # October 6, 2011 at 3:46 pm

    With CSS gradients you can.

    Edit: Wow huge delay in rendering this comment.

    rch
    # October 6, 2011 at 3:52 pm

    Try this for making de gradient:
    colorzilla gradients

    # October 6, 2011 at 3:53 pm

    @cynewatch meant -moz- for Gecko browsers.

    # October 6, 2011 at 5:05 pm

    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

    # October 6, 2011 at 7:45 pm

    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

    http://jsfiddle.net/3jakp/4/

    # October 7, 2011 at 12:26 am

    @cyneWATCH You would use this for best results:

    background-image: linear-gradient(#333 0%, #333 50%, #666 50%, #666 100%);
    # October 7, 2011 at 9:37 am

    Ultimate CSS Gradient Generator

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".