sanjar-notes / web_dev_fundamentals

The basics - HTML, CSS, Javascript and more
https://sanjar-notes.github.io/web_dev_fundamentals/
3 stars 0 forks source link

Nested opacity reset #114

Open sanjarcode opened 2 months ago

sanjarcode commented 2 months ago
<div className="opacity-50">
  ...
  ...
  <div className="reset-opacity">
    I want this to be of normal opacity.
  </div>
  ...
</div>

Q: Whats the workaround?

It's not a design issue, since for code ease, one may want to apply "disabled-like opacity" on the whole parent but keep parts visible (because they have grey parts or actually are enabled).

This is much needed. Currently the way to do this is to selectively add opacity, which takes linear amount of work instead of O(1) (i.e. parent and exception).

Related: https://css-tricks.com/forums/topic/opacity-of-child-element/