CODEWITHSUNDEEP
htmlcss
Eric1978
Eric1978

Reputation: 83

CSS, can i use two different colors in one table cell? (for example dark purple and light purple)

Doen anyone know how to use two colors in one table cell (td) and how to let them overflow inc each other?

For examble. For my website (www.ericversteeg.nl) i want to use in my guest book title columns light purple in the top of the cell and dark purple in the bottom.

I think i have to assign a class in the td.

But how do i make my class in CSS?

Greetings Eric

Upvotes: 1

Views: 3141

Answers (5)

Armstrongest
Armstrongest

Reputation: 15419

Is this what you're looking for?

http://jsfiddle.net/4NXRx/2/

It uses a background gradient and you don't need to call any image resources. You also don't have to worry about updating the image.

There's a back-up color for browsers that don't support gradients. It's an effect that isn't crucial to all visitors, so it's no big deal if some visitors don't see a gradient.

Note, that I have made the stops at 49%, so there is no gradual change. I don't know if that's what you want. Obviously, you'll have to choose nicer colors.

table td {
padding: 10px;

background-color: #CEC3FA;
background-image: linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -o-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -moz-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -ms-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);

background-image: -webkit-gradient(
    linear,
    right 49%,
    right 50%,
    color-stop(0.08, #CEC3FA),
    color-stop(0.51, #B9AAD1)
);

Upvotes: 0

chipcullen
chipcullen

Reputation: 6960

You could use a background gradient like was suggested, or using a background image that has both colors in it.

If you know that your cells are going to be say, 30px tall, make a 30px tall by 1px wide image that is split where you want it, and have both colors in it. Then using css:

td {
  background-image: url(colors.png);
  background-repeat: repeat-x;
}

To tile it horizontally, thus getting the effect you're after.

Upvotes: 0

Quentin
Quentin

Reputation: 943589

The CSS 3 drafts introduce gradient colours.

e.g.

background: linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%);

Note that browser support is not universal.

Upvotes: 2

Manuel
Manuel

Reputation: 10303

I found this tool quite helpfull: CSS3 Gradient Generator. The code it produces isn't the most beutiful but it works!

Upvotes: 0

Thomas Jones
Thomas Jones

Reputation: 4962

There are a couple ways to do this. The first is to have a div on top and a div on bottom, each with the different color.

<td class="multi_purple">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
</td>

and style the two divs with their respective colors.

A "better" option would be to just use a background image of the right colors. This will be cross browser supported, but doesnt do well if your table grows or shrinks in size.

The newest option would be to add a gradient. check out http://www.css3please.com to see the syntax for this.

but its something like this

background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image:    -moz-linear-gradient(top, #444444, #999999);
  background-image:     -ms-linear-gradient(top, #444444, #999999);
  background-image:      -o-linear-gradient(top, #444444, #999999);
  background-image:         linear-gradient(to bottom, #444444, #999999);

with of course your purple shades in place.

This degrades into a solid color for browsers that dont support gradients (lookin at you ie 6/7?)

Upvotes: 0

Related Questions