Edit Question - KnowledgeHub

Title Body

I'm currently working on an color-picker component using HTML, CSS and Javascript, one major question is how I should implement a color palette like this one: Ignoring browser compatibility issues introduced by IE8 or earlier, I have 3 methods to implement this: The <img> way: This is simple and is used by many color-picker components for years, we simply include an image exactly the same as the above one using <img src="palette.png" /> . The problem is <img> would introduce extra network roundtrip, although we can prevent it using dataURI, but an image data is a little too large for me. The <div> way: In this way we should use 2 <div> elements, one of them provides a left-to-right linear gradient and the other provides a top-to-bottom alpha gradient, the style should be: <style> #map { width: 400px; height: 400px; background: -webkit-gradient( linear, left top, right top, color-stop(0%,#ff0000), color-stop(16.67%,#ffff00), color-stop(33.33%,#00ff00), color-stop(50%,#00ffff), color-stop(66.67%,#0000ff), color-stop(83.33%,#ff00ff), color-stop(100%,#ff0000) ); } #overlay { width: 400px; height: 400px; background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)) ); } </style> <div id="palette"><div id="overlay"></div></div> It works perfectly, but the problem is, this method introduces 2 elements for styling only, the 2 <div> elements don't have any semantic

Tags (comma-separated) Cancel