0

I am using both daisyUI with Tailwind for this project. I want to target a specific text here, in this case, the word 'developer':

Screenshot of node element

I want something similar to what is happening with shapes in 2015 XOXO festival webpage.

I've tried just using mix-blend-difference, but it does not work, probably because it is looking at the immediate parent element.

<div class="flex flex-col min-h-screen" style="background-image: url(&quot;/src/images/mesh-gradient.png&quot;);">
   <div class="flex flex-1 flex-col base-100 text-base-content">
      <div class="hero bg-transparent h-96">
         <div class="hero-content text-center">
            <div class="max-w-md">
               <h1 class="text-5xl font-bold">
                  <div>Hi, I'm Anon,</div>
                  <div>a <span class="mix-blend-difference">developer</span></div>
               </h1>
            </div>
         </div>
      </div>
   </div>
</div>

Pretty sure that this is wrong, but I've also tried stacking multiple mix-blend-difference, starting from the immediate child to the nested element:

<div class="flex flex-col min-h-screen" style="background-image: url(&quot;/src/images/mesh-gradient.png&quot;);">
   <div class="flex flex-1 flex-col base-100 text-base-content">
      <div class="hero bg-transparent h-96 mix-blend-difference">
         <div class="hero-content text-center mix-blend-difference">
            <div class="max-w-md mix-blend-difference">
               <h1 class="text-5xl font-bold mix-blend-difference">
                  <div class="mix-blend-normal">Hi, I'm Anon,</div>
                  <div class="mix-blend-difference"><span class="mix-blend-normal">a</span> <span class="mix-blend-difference">developer</span></div>
               </h1>
            </div>
         </div>
      </div>
   </div>
</div>
Ashvith Shetty
  • 90
  • 2
  • 11
  • Think 'stacking context' ([The stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)). Each element that creates a new *stacking context* will discard the underlaying or parent element graphical settings. It looks like a 'new notepad with fresh pages' and new settings (in my head anyway, sorry!). Not using Tailwind. Check the MDN 'scenarios'. – Rene van der Lende Jan 28 '23 at 00:50
  • Looks like daisyUI's `hero-content` had the property `z-index: 0`, which was messing up with the text. I had the choice to either remove the class, or add `z-auto`. – Ashvith Shetty Jan 28 '23 at 02:19
  • As long as you got the result you needed. At least you now know (hopefully) that *stacking context* has to be taken into account... – Rene van der Lende Jan 28 '23 at 02:23
  • @RenevanderLende That is something new I've learnt for CSS. Looks like I'll have to go through the rules again sometimes later. – Ashvith Shetty Jan 28 '23 at 02:27
  • Yes, and then some. Happy ... hunting?!? – Rene van der Lende Jan 28 '23 at 02:30

1 Answers1

0

daisyUI's hero-content is the culprit here.

.hero-content {
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80rem;
  gap: 1rem;
  padding: 1rem;
}

It sets z-index to 0, which causes mix-blend-difference to behave improperly. There are two ways to fix this:

  1. Remove the class hero-content.

  2. Add the class z-auto to override hero-content default z-index value.

Ashvith Shetty
  • 90
  • 2
  • 11