How can I create a small color box using html and css

Question

I have a picture on a html file site and I want to add the list of available colors for that picture  I want to create very small boxes or dots  a small box for every color   How can I do this   Thanks

User · Answer

You can create these easily using the floating ability of CSS, for example. I have created a small example on Jsfiddle over here, all the related css and html is also provided there.

_x000D_

.foo {_x000D_
  float: left;_x000D_
  width: 20px;_x000D_
  height: 20px;_x000D_
  margin: 5px;_x000D_
  border: 1px solid rgba(0, 0, 0, .2);_x000D_
}_x000D_
_x000D_
.blue {_x000D_
  background: #13b4ff;_x000D_
}_x000D_
_x000D_
.purple {_x000D_
  background: #ab3fdd;_x000D_
}_x000D_
_x000D_
.wine {_x000D_
  background: #ae163e;_x000D_
}

_x000D_

<div class="foo blue"></div>_x000D_
<div class="foo purple"></div>_x000D_
<div class="foo wine"></div>

_x000D_

User · Answer

If you want to create a small dots  just use icon from font awesome   fa fa-circle

[html] How can I create a small color box using html and css?

Examples related to html

Examples related to css