DevFlow

Dev Overflow

Home

Ask a question

Community

Collections

1 Gradient on multiple elements

asked 1 year ago

1 Answers

4 Views

I wrote a div element with some buttons inside. I want to clip the background with the button elements, so that the button background will be colorful and the background color for the element outside of the buttons is black.

return (
  <div className="flex mt-10 flex-col items-center">
    <div className="relative">
      <div className="bg-gradient-to-br from-[#70d6ff] via-[#ff70a6] to-[#e9ff70]">
        <div className="p-4 font-semibold grid grid-cols-3 items-center">
          <button className="bg-transparent bg-clip-padding border rounded p-2" onClick={() => {setView(10);}}><span>Kelas 10</span></button>
          <button className="bg-transparent bg-clip-padding border rounded p-2 ml-2" onClick={() => {setView(11);}}>Kelas 11</button>
          <button className="bg-transparent bg-clip-padding border rounded p-2 ml-2" onClick={() => {setView(12);}}>Kelas 12</button>
          <div className="grid grid-cols-2 col-span-3 space-x-2 mt-2">
            <button className="bg-transparent bg-clip-padding border rounded p-2" onClick={() => {setDateYesterday();}}>Kemarin</button>
            <button className="bg-transparent bg-clip-padding border rounded p-2" onClick={() => {setDateTommorow();}}>Besok</button>
          </div>
          <button className="bg-transparent bg-clip-padding border rounded p-2 col-span-3 mt-2" onClick={handleCopy}>{copyMessage}</button>
        </div>
      </div>
    </div>
    <Display/>
  </div>
)

Is there a way, or is it impossible with the Tailwind CSS currently?

What I tried: Using every bg-clip- in Tailwind CSS. What I expect: The background on the button element stays, and for the elements/spacing outside of the button element to be black.

Tailwind-css

Next.JS

1 Answers

Nina Wildberry

•answered 1 year ago

I revised the answer that I posted for editing.

It's hard to find the clip-path among tailwind classes

I tested it once with pure-css.

It won't be the perfect answer, but I hope you're close to solving the problem...!

globals.css:

...
/* bg-gradient-to-br from-[#70d6ff] via-[#ff70a6] to-[#e9ff70] */
button.custom-clip {
  clip-path: xywh(0 0 100% 100% round 0.25rem);
  background: white;
}

button.custom-clip:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom right, #70d6ff, #ff70a6, #e9ff70);
  border: 1px solid white;
}

jadwalRewrite.tsx:

    return (
        <div className="flex mt-10 flex-col items-center">
            <div className="relative">
            <div className="">
                <div className="p-4 font-semibold grid grid-cols-3 items-center">
                    <button className="custom-clip rounded border-none" onClick={() => {setView(10);}}>
                        <span className="block w-full h-full border p-2 rounded">Kelas 10</span>
                    </button>
                    <button className="custom-clip rounded ml-2 border-none" onClick={() => {setView(11);}}>
                        <span className="block w-full h-full border p-2 rounded">Kelas 11</span>
                    </button>
                    <button className="custom-clip rounded ml-2 border-none" onClick={() => {setView(12);}}>
                        <span className="block w-full h-full border p-2 rounded">Kelas 12</span>
                    </button>
                    <div className="grid grid-cols-2 col-span-3 space-x-2 mt-2">
                        <button className="custom-clip rounded border-none" onClick={() => {setDateYesterday();}}>
                            <span className="block w-full h-full border p-2 rounded">Kemarin</span>
                        </button>
                        <button className="custom-clip rounded border-none" onClick={() => {setDateTommorow();}}>
                            <span className="block w-full h-full border p-2 rounded">Besok</span>
                        </button>
                    </div>
                    <button className="custom-clip rounded col-span-3 mt-2 border-none" onClick={handleCopy}>
                        <span className="block w-full h-full border p-2 rounded">{copyMessage}</span>
                    </button>
                </div>
            </div>
            </div>
            <Display/>
        </div>
    )

Popular Tags

Next.JS

JavaScript

Tailwind-css

1 Gradient on multiple elements

1 Answers

jadwalRewrite.tsx:

Top Questions

Popular Tags