Clever Geek Handbook

How can I color a square div with two colors?

I have a table like this:

<table class="lugares">
    <tr>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-not-avaliable"><div></div></td>
        <td class="seat-badvis"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
    </tr>
</table>

There is an "inaccessible seat" with a black background, an available seat with a green background, and I want to add a seat (badvis seat) in two colors, half black and half white. I've tried: after and: before, but it doesn't work.

Here's a fiddle with my code:

http://jsfiddle.net/g8p9pn1v/38/

+3


source to share


5 answers


You don't need to use pseudo selectors here, use a linear gradient instead:

background: linear-gradient(to right, #fff 50%,#000 50%);


Here's the script: http://jsfiddle.net/dbbtxL50/

+1


source


You might want to use a linear gradient:

.seat-badvis div {
    background: linear-gradient(90deg, #5e6461 50%, white 50%);
}


Here is a fiddle with a background to make it easier to see the difference - > jsfiddle

Check browser compatibility if targeting older browsers look-up table

+3


source


You can use a linear gradient for the effect. Use color codes at different color stop levels. The direction is set to right

for your problem.

.seat-badvis div {
  background: linear-gradient(to right, #000 0%, #000 51%, #fff 51%, #fff 100%);
  border: 1px solid #333333;
}

      

        
        
        
      

    

.seat-avaliable div,
.seat-not-avaliable div,
.seat-badvis div {
  height: 12px !important;
  width: 12px !important;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  cursor: pointer;
}
.seat-selected div {
  height: 12px !important;
  width: 12px !important;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  background: #ffc720;
  border: #5e6461 solid 1px;
}
.seat-avaliable div {
  background: #05cd7a;
}
.seat-not-avaliable div {
  background: #000;
  border: 1px solid #333333;
}
.lugares td {
  padding: 2px!important;
}
.seat-badvis div {
  background: linear-gradient(to right, #000 0%, #000 51%, #fff 51%, #fff 100%);
  border: 1px solid #333333;
}
      

        
        
        
      

    
<table class="lugares">
  <tr>
    <td class="seat-avaliable">
      <div></div>
    </td>
    <td class="seat-avaliable">
      <div></div>
    </td>
    <td class="seat-avaliable">
      <div></div>
    </td>
    <td class="seat-avaliable">
      <div></div>
    </td>
    <td class="seat-not-avaliable">
      <div></div>
    </td>
    <td class="seat-badvis">
      <div></div>
    </td>
    <td class="seat-avaliable">
      <div></div>
    </td>
  </tr>

</table>
Run codeHide result


+1


source


You can use a background gradient:

.seat-badvis div {
    border: 1px solid black;
    background: rgb(0, 0, 0);/* Old browsers */
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 50%);/* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(49%, rgba(0, 0, 0, 1)), color-stop(50%, rgba(255, 255, 255, 1)));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 50%);/* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 50%);/* IE10+ */
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 50%);/* W3C */
}

see this FIDDLE

If you want, you can also change the direction of the color.

Take a look here and use the link for an excellent gradient generator.

0


source


Use a simple gradient and delete before and after. I've also added a border if you want it.

Here's a violin

.seat-avaliable div, .seat-not-avaliable div, .seat-badvis div {
    height: 12px !important;
    width: 12px !important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
}
.seat-selected div {
    height: 12px !important;
    width: 12px !important;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    background: #ffc720;
    border: #5e6461 solid 1px;
}
.seat-avaliable div {
    background: #05cd7a;
}
.seat-not-avaliable div {
    background: #000;
    border: 1px solid #333333;
}

.seat-badvis div {
    background: linear-gradient(90deg, red 50%, blue 50%); /* metade vermelho, metade azul*/
    border: 1px solid black
}

.lugares td {
    padding:2px!important;
}
      

        
        
        
      

    
<table class="lugares">
    <tr>
        <td class="seat-avaliable">
            <div></div>
        </td>
        <td class="seat-avaliable">
            <div></div>
        </td>
        <td class="seat-avaliable">
            <div></div>
        </td>
        <td class="seat-avaliable">
            <div></div>
        </td>
        <td class="seat-not-avaliable">
            <div></div>
        </td>
        <td class="seat-badvis">
            <div></div>
        </td>
        <td class="seat-avaliable">
            <div></div>
        </td>
    </tr>
</table>
Run codeHide result


0


source






More articles:


All Articles