Search code examples
cssjsfrichfaces

JSF,CSS - dynamically decrease brightness

I'm playing with CSS styles. how to make this somehow intelligently?

enter image description here

I'm able to create manually x variation of green color in css file, but it mustn't be a solution..

<h:outputText value="#{bean.date1}" styleClass="green1"/>
<h:outputText value="#{bean.date2}" styleClass="green2"/>
<h:outputText value="#{bean.date3}" styleClass="green3"/>

How to decrease it "dynamically"?

Solution

  • I'll assume when you say "dynamically" you mean "somehow programmatically, without having to manually maintain different CSS classes". If so, your scenario is fairly straightforward - you could have all your output have the same color, but different opacity. You should be able to directly set style attribute:

    <h:outputText value="#{bean.date1}" style="opacity:1"/>
<h:outputText value="#{bean.date2}" style="opacity:0.8"/>
<h:outputText value="#{bean.date3}" style="opacity:0.6"/>

    ~Fiddled