Qt stylesheets; color fading, 2D gradient and CSS classes

Question

I'm having some questions about Qt's stylesheet functionality. It's really great, but it feels like the feature isn't around for too long yet, true? It's by far the easiest way to style my GUI though.

1. Is it possible to add color fading in the stylesheets? Whenever the mouse hovers over a certain widget, I don't want it abruptly changing background color, just fade into the new color in 200ms or something. Is there a nice way for this, or must this be done code-wise?

2. Can I have a 2D gradient? I know how to use the 1D gradient now, you can change colour gradually over one axis (often either horizontally or vertically). I would like to add a second gradient on top of that, that has a has a low alpha value for example. So if your gradient goes from green (top) to red (bottom), I would also like it to go from transparent (left) to white (right).

3. Qt has CSS selectors for types (e.g. QPushButton) and for ID's (e.g. #mywidgetname), but I haven't found a way to select or set classes. I have a number of QFrames for example, and to a certain subset I would like to add one particular style. Should I name my frames all the same (same ID)? Sounds bad. But selecting on their type (QFrame) isn't right either...

Thank you!

Answer 1

1. Not using CSS that I know of. However, Qt has several nice demos using different techniques (using the animation framework), see for example the demos/examples browser.

2. You can probably achieve what you want in #2 by using the following construction using relative coordinates of the endpoints:

   qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0.273, stop:0 rgba(0, 0, 0, 255), stop:1 rgba(255, 255, 255, 255))
   

   Qt Designer has a nice editor for gradients (and for CSS in general), you may want to play with this and see what it comes up with and use that for inspiration.

3. Not quite sure how to best solve this, but you can put multiple matches before the same rule, so you can have:

   QFrame#frame1, QFrame#frame2 { background-color: blue; }
   

Answer 2

I know this is quite an old question, but I recently had a similar problem.

Anyway, for "3." I found you can use a "property selector" in the qss and just set the property value on the relevant widgets.

e.g. in your C++ code:

widget1->setProperty( "StyleClass", "MyCustomLAF" );
widget2->setProperty( "StyleClass", "MyCustomLAF" );

then in the qss:

QWidget[StyleClass="MyCustomLAF"] { color : purple ; }

Then any QWidget (or derived class) instance with the "StyleClass" property set to "MyCustomLAF" will have the color:purple style applied. Forgive me if the following explanation is a bit confusing or technically incorrect, but I'm implying that the property "StyleClass" is what Qt calls a "dynamic property" which (in my words) means a property that is added to a QObject instance at runtime, without being registered in the "meta stuff" using the Q_PROPERTY macro.

Answer 3

Also you can select all QFrames for particular parent

#ParentName > QFrame will select all QFrames that are children of #ParentName

#ParentName QFrame will select all QFrames contained in #ParentName and it's children