Kieveli Kieveli - 4 months ago 11
CSS Question

How can I make an HTML colour rectangle look better?

I'm trying to show a coloured rectangle in a table and make it look nice, but I'm terrible at HTML / CSS.

This is what I have (and it looks like garbage):



<table>
<tr>
<td>
#2E21FF&nbsp;&nbsp;<span style="background-color: #2E21FF;border-width=1px;border-style:solid;border-color:rgb(204,204,204);padding:0;margin:0;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</td>
</tr>
</table>





This minicolor demo has a nice swatch in the input, but I can't seem to even come close to it:

http://labs.abeautifulsite.net/jquery-minicolors/

Fiddle:
https://jsfiddle.net/Kieveli/9hjm9Lkf/

Answer

Note that the td is styled differently with a class color-box and all the colors are then separately handled with their classes, giving you re-usability of code and simple implementation.

.color-box span {
  border: 1px solid rgb(204, 204, 204);
  padding: 2px;
  padding-left: 25px;
  margin: 0px;
  margin-right: 10px;
  border-radius: 3px;
}
.color-box {
  border: 1px #aaa solid;
  padding: 6px;
  padding-right: 100px;
  border-radius: 3px;
  -moz-box-shadow: inset 0 0 2px 0 #888;
  -webkit-box-shadow: inset 0 0 2px 0 #888;
  box-shadow: inset 0 0 1px 0 #888;
}
.blue-box {
  background-color: #0088cc;
}
.red-box {
  background-color: #ff6161;
}
.green-box {
  background-color: #70c24a;
}
.yellow-box {
  background-color: #e0e03e;
}
<table>
  <tr>
    <td class="color-box">
      <span class="blue-box"></span> #0088cc
    </td>
    <td class="color-box">
      <span class="yellow-box"></span> #e0e03e
    </td>
  </tr>
  <tr>
    <td class="color-box">
      <span class="green-box"></span> #70c24a
    </td>
    <td class="color-box">
      <span class="red-box"></span> #ff6161
    </td>
  </tr>
</table>