What is the purpose of noise images blended into a CSS button?

Question

I noticed that the buttons on unfuddle.com use a layer of noise, i was just wondering what the purpose of this is, i can't visibly notice the difference, but perhaps this is some cross browser hack?

It seems silly to build such an awesome CSS3 button that uses no images only to still load a noise image anyway.

Here is their CSS that goes with the buttons in question, note the gnoise.png?cbv-1346878364

.gp_button, a.gp_button, input.gp_button:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    display: inline-block;
    font-family: "Lato","Arial",sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 34px;
    margin-right: 1px;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gp_button:hover, a.gp_button:hover, input.gp_button:hover:not([type="radio"]) {
    background-color: #A5C416;
    background-image: radial-gradient(at center center , #85C700 20%, #7EBD00 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
}
.gp_button:visited, a.gp_button:visited, input.gp_button:visited:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
}
.gp_button:active, a.gp_button:active, input.gp_button:active:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #90D900;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
.oldie .gp_button, .oldie a.gp_button, .oldie input.gp_button:not([type="radio"]) {
    background-color: #7EBD00;
    border-color: #7FBF00;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    display: inline-block;
    font-family: "Lato","Arial",sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 34px;
    margin-right: 1px;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.oldie .gp_button:hover, .oldie a.gp_button:hover, .oldie input.gp_button:hover:not([type="radio"]) {
    background-color: #85C700;
}
.oldie .gp_button:visited, .oldie a.gp_button:visited, .oldie input.gp_button:visited:not([type="radio"]) {
    background-color: #7EBD00;
}
.oldie .gp_button:active, .oldie a.gp_button:active, .oldie input.gp_button:active:not([type="radio"]) {
    background-color: #7EBD00;
    border-color: #90D900;
}

Maybe it's my eyes but I turned off the noise image and didn't notice any difference. — j08691, Jan 30 '13 at 21:52
Me neither, but maybe i have been staring at the monitor too long today, see KatieK's reply below. — deweydb, Jan 30 '13 at 23:44

score 1 · Answer 1 · answered Jan 30 '13 at 22:04

My guess is that it could have been there for browsers that don't support CSS3. However when I inspect the button in chrome it is overwritten by another image, which makes me believe that is not the case.

If it is not there for older browsers then chances are it is just a coding error. maybe they used it at some point and forgot to take it out.

But to answer your question. It isn't used for anything because it is been overwritten by this image. And if you are looking to replicate what they are doing then I would just remove it.

background-image: -webkit-radial-gradient(center center, #7ebd00 20%,#77b300 80%),url('/images/gnoise.png?cbv=1346878364');

KatieK · Accepted Answer · 2013-01-31T03:58:08.097

1

gnoise.png goes on top of the background-color (along with the radial gradient) to add some visual complexity to an otherwise flat image. The effect is barely visible on a.gp_button, but you can see it if you zoom in on a screenshot using Photoshop, or use the eyedropper to compare pixel colors. The effect is more visible on the <footer> element, because of its darker background color.

By re-using one image on top of solid colors, they get a variety of colors while avoiding multiple HTTP requests which might slow down page loading.

It's just a guess, but the get parameter (?cbv=1346878364) could be used to ensure that, after an update to the image files, a new image file is actually pulled from the server instead of using a browser-cached version.

edited Jan 31 '13 at 03:58

answered Jan 30 '13 at 22:13

KatieK

13,586
17
76
90

Awesome! any guess as to why they have that get parameter behind the gnoise.png? /images/gnoise.png?cbv=1346878364 Perhaps gnoise.png is actually a php file that is serving a random noise image with a png header? but i can't see any reason to change it every page load. – deweydb Jan 30 '13 at 23:43
@deweydb - I added a little information, but it's only a guess. – KatieK Jan 31 '13 at 03:58
Well i played around with it a bit, and it definitely is just a static file and not a script generating that file. So i will go with your explanation, although it seems a little bit strange, the same thing could be accomplished with headers at the server level. – deweydb Jan 31 '13 at 12:28

What is the purpose of noise images blended into a CSS button?

2 Answers2