A CSS Thing I Want

CSS design is hard. Particularly if you’re trying to do things that CSS itself doesn’t support. If you’re used to working in Photoshop (which I am not) you’re used to having a wide variety of different tools right there at your disposal. One of those tools is noise. It allows you to add a degree of randomness to the brightness of a set of pixel colour values. Unfortunately, this is not available on CSS3. In the following post, I’ve outlined how I think a CSS noise property should work.

The colour (or ‘color’) of a standard CSS element is set by the keyword ‘color’, as follows:

h1{
    color:#FFF;
    */ or any of the following
    color:hsl(0,100,0);
    color:rgb(255,255,255);
    color:rgba(255,255,255,1);
    color:#FFFFFF;
    color:white;
    */
}

I would like this to be a bit more flexible, allowing for more dynamic colors. Sure, it doesn’t fit with flat design, but what the hell. Noise, for example, would be (in my opinion) a great addition. Obviously this isn’t true just because I say it is, maybe I’m completely in the wrong and we should all be using background-image:url(“noisey-prerendered-background.png”);. I just think it’d be a nice option to have. At this point I should probably say that partly because I am not a designer who uses photoshop, partly because of plain ignorance, I do not know which other similar effects would be nice to implement in CSS. I do know, however, that adding them all (as there are undoubtedly many that apply to block colours rather than to images) is probably unsustainable, in that the list would become huge, CSS would grow by too much, and cross browser compatibility would be tough because of disagreements over algorithms between various rendering engines (I’m looking at you IE11 dev team!).

Syntactically, I propose it would work like this:

h1{
  color:#AAA noise(#111);/*allow 16 unit variance in each color channel*/
  color:#AAA noise(#080818);/*allow 8 unit variance in each color channel, and 24 units in the blue channel*/
  color:rgb(160,160,160) noise(rgb(8,8,24));/*same as above using rgb*/
  color:hsl(0,67%,0) noise(hsl(1,2%,0));/*hsl mode*/
}

The main downside to this is that each time the page loads, the pattern created by the noise will be different. One way to get around that is to use a set seed to render the random noise in such a way that using the seed renders the same set of random data every time. Perhaps grabbing a seed from some other data contained on the website, something that is unlikely to change such as the domain, would be a good way to solve this problem without a user having to worry about it. Naturally, an option to disable this functionality and generate random data every time the page is loaded would be good, as follows:

h1{
  color:#AAA noise(#111) nosteady;/*or maybe a less silly keyword*/
}

Just my two cents.

energie vergelijken

This entry was posted in Web Design on by .

About Hugh Rawlinson

I am a Music Computing student at Goldsmiths University in London. I will generally post about music related tech, but I'm also a member of the London Hackspace, and will occasionally post about what I do there, as well as what I do about the various hackathons I attend around London.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>