2

I would like to be able to create nice-looking buttons of any color dynamically within a web page, without defining a separate CSS class for each color ahead of time.

Using CSS3 gradients with alpha channels seems like it would be the best way to go about doing this, with low opacity gradients overlayed on top of a solid background color.

However, I don't know enough about CSS to even tell whether or not this is possible, much less actually implement it.

I have found a couple of resources on the web that look like they will help:

Can someone with more CSS experience tell me if this is possible, and perhaps point me towards other resources to make this easier to pull off?

Community
  • 1
  • 1
smithpr
  • 43
  • 1
  • 6
  • 1
    Just a resource, might help out a little, the [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/). And, in my opinion, your option 3 sounds the best/easiest to implement. – MrOBrian Jul 20 '12 at 20:13
  • Cool, thanks! Checking it out now! – smithpr Jul 20 '12 at 20:31
  • I made a transparency gradient using that gradient generator, and it works like a charm! I'll just tweak the gradient (using the generator again) until the buttons all look pretty! – smithpr Jul 20 '12 at 20:49
  • If anyone notices the question change... I'm simplifying the wording to explain the minimal use case for this solution, and changing the tags to represents what technologies were actually used. Just some basic clean-up, so that the question may be more useful to others down the road. – smithpr Jul 22 '12 at 19:38

2 Answers2

1

Using something like LESS or SASS, this is fairly easy to do legitimately. Create a mixin like this (robust version):

.auto-gradient(@color) {

    /* Use any of the built in functions like saturate() or spin() */
    @topcolor: lighten(@color, 20);
    @bottomcolor: darken(@color, 20);

    background: @color;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(@topcolor), to(@bottomcolor));
    background: -webkit-linear-gradient(@topcolor, @bottomcolor);
    background: -moz-linear-gradient(@topcolor, @bottomcolor);
    background: -ms-linear-gradient(@topcolor, @bottomcolor);
    background: -o-linear-gradient(@topcolor, @bottomcolor);
    background: linear-gradient(@topcolor, @bottomcolor);

        /* If using PIE.htc for IE */
    -pie-background: linear-gradient(@topcolor, @bottomcolor);
    behavior: url(pie.htc);
}

Usage:

.my-button {
    .auto-gradient(darkviolet);
}

This will compile to valid CSS(3), it should be something like this:

.my-button {
  background:darkviolet;
  background:-webkit-gradient(linear,0 0,0 bottom,from(#c43aff),to(#4c006d));
  background:-webkit-linear-gradient(#c43aff,#4c006d);
  background:-moz-linear-gradient(#c43aff,#4c006d);
  background:-ms-linear-gradient(#c43aff,#4c006d);
  background:-o-linear-gradient(#c43aff,#4c006d);
  background:linear-gradient(#c43aff,#4c006d);
}

Note: I use lessphp myself, and the version I'm using now seems to choke on named colors like DarkViolet being passed to lighten/darken unless they are lowercase.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • LESS looks really cool, and would be perfect for something like this. However, the solution mentioned in MrOBrian's comment above is working well enough for me right now. Thank you for the suggestion, though! – smithpr Jul 20 '12 at 21:19
  • When you said "programmatically" I guess I thought you meant you wanted to code an automatic solution, not manually use an online third party tool to create the gradients one-by-one. Is there some API that I'm not aware of, because I thought you said the colors were in your database? I also didn't see anything that creates gradients automatically from a single color. Did I misunderstand the question? – Wesley Murch Jul 20 '12 at 21:30
  • No, you understood it. I used the third-party tool to create a transparent gradient, which is overlayed on top of a solid color. Each button uses the CSS code for the generic button fluff and the overlay, and then its own background color derives the main color of the button. Here, I'll make a fiddle... – smithpr Jul 20 '12 at 21:34
  • Added a JSFiddle to the self-answer above. This is an automatic solution, but a very simple one involving no additional frameworks. There's nothing wrong with your suggestion, and indeed for larger projects it would be ideal; I just wanted to go with something a little bit simpler this time. – smithpr Jul 20 '12 at 21:45
  • Ah I see what you did, great idea and looks nice. I'm still in the stone age with a lot of front-end stuff because I have to support IE7, hence the PIE.htc reference. In fact just the other day a client sent me a screen shot and it was indeed IE7 they were using... – Wesley Murch Jul 20 '12 at 21:51
  • That's a scary thought... This solution is intended for use on one of my company's internal sites, and so IE7 and IE8 will make up the majority of the visitors. Hopefully the CSS3 solution will still work, or at least degrade nicely on IE. – smithpr Jul 22 '12 at 19:54
  • Update: My styles look pretty ugly on IE8. – smithpr Jul 23 '12 at 18:20
  • PIE looks pretty cool. Sadly, however, according to the documentation it does not support transparency on gradient stops in IE 6-8. – smithpr Jul 25 '12 at 21:38
  • Yep, you'd have to use solid colors - but that would achieve basically the same effect as an "overlay" since what the user sees is only the final rendered colors. – Wesley Murch Jul 25 '12 at 22:07
  • Remember that the colors are intended to be arbitrarily set. PIE alone wouldn't provide that functionality, which is currently accomplished using transparency. – smithpr Jul 26 '12 at 13:33
  • Right, you'd have to use LESS and PIE. Originally your post said "color-coded based on stuff that's specified in a database". Using lessphp for example, you would pass the colors from the db in as variables when compiling the CSS, then use something like `.my-button {.auto-gradient(@mybutton-background-color);}`. Maybe I'm not understanding the "stuff that's specified in a database" part or it's no longer relevant. I do this exact same thing all the time, it definitely works if you have the right setup. Let me know if you need more help. – Wesley Murch Jul 26 '12 at 14:19
  • OK. Basically, my boss insists that all the code be client-side... So I wrote a Java program that gets the necessary data from the source (Sharepoint 2003 lists) and converts it into JavaScript objects. It then saves those objects as a script, which the web code references. The Java program runs on a schedule to keep things roughly synchronized. – smithpr Jul 26 '12 at 19:55
1

MrOBrian's suggestion of the Ultimate CSS Gradient Generator made this a snap. Here is the solution I ended up going with, which is a relatively simple CSS style cobbled together from the aforementioned Gradient Generator and the Cross-Browser CSS Gradient Button Guide.

The following code adds a nice, slick button appearance when applied to an element with a background-color CSS attribute specified. This will allow me to use a common style for all of my buttons, specify their color using the background-color attribute.

JSFiddle Demo

Thank you for all of the advice and suggestions!

smithpr
  • 43
  • 1
  • 6