Question

I’m trying to get a background for some text that is dual-tone, or the top half is one color and the bottom half is another. I have attached a link to a picture of what this should look like. Any ideas on how I can achieve this? Thanks, in advance, for the help!

Michael

http://michaelphillips.dropmark.com/12339/296433

Answer 1

Three ways come to mind:

One: Most Cross Browser (CSS1): Make a 1px wide image of the two colors, probably about 30px tall for each color, then

<span class="duoTone">wrap your text in a span</span>

and set the

.duoTone {background-image: url(path/to/your/img.jpg) left center repeat-x;}

Two: Less friendly to older browsers (CSS2): Same span wrapper as above but with this css (see fiddle).

.duoTone {
   position: relative;
}

.duoTone:before,
.duoTone:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 50%;
   z-index: -1;
   background-color: #bbbbbb;
}

.duoTone:after {
   top: auto;
   bottom: 0;
   background-color: #888888;
}

Three: Sleek, but only for newer browsers (CSS3): Same span code as #1 (see fiddle).

.duoTone {
   background-color: #888888 ;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .4)), color-stop(.5, transparent), to(transparent));
   background-image: -moz-linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
   background-image: -o-linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
   background-image: linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
}