2

See this code example: Houdini-gradient-borders

When I want to recreate this effect in React TS with styled components I get it compiled with no errors. But the gradient on hover effect does not work. I am struggling to find the solution to get it work?

My App.tsx

import React from "react";
import styled from "styled-components";

/* Set Custom Properties Here */
const Houdini = styled.div`
  --color1: pink;
  --color2: orange;

  @supports (background: paint(houdini)) {
    @property --gradPoint {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 40%;
    }
  }

  --gradPoint: 40%;
  font-family: "Amiri";
  width: 380px;
  padding: 2rem;
  text-align: center;
  display: flex;
  background: pink; /* fallback value */
  background: linear-gradient(
    var(--color1) var(--gradPoint),
    var(--color2) calc(var(--gradPoint) + 20%)
  );
  transition: --gradPoint 0.5s, filter 0.8s;

  @supports not (background: paint(houdini)) {
    .post:hover,
    .post:focus {
      filter: hue-rotate(-90deg);
    }
  }
`;

function App() {
  return (
    <>
      <Houdini>
        <h2>This Demo Requires Chrome 85+</h2>
        <p>
          Browsers which support CSS Houdini will see a gradient with a gradient
          stop transition on hover. Unsupported browsers will see a gradient
          background with a hue rotation on hover.
        </p>
      </Houdini>
    </>
  );
}

export default App;
  • this is the third time repeating the same question. Either remove the old ones or keep only one and edit it (two will get closed as duplicate) – Temani Afif Aug 08 '22 at 21:34

1 Answers1

1

This entire animation relies on changing the CSS Variable --gradPoint which you are never doing.

Move that --gradPoint variable around on hover.

&:hover,
&:focus {
  --gradPoint: 100%;
}

But the gradient on hover effect does not work.

See example of adding said lines to your code: https://codesandbox.io/s/spring-fog-hvdr4w

Hovering moves the gradient down just like the reference.

image example

Yuji 'Tomita' Tomita
  • 115,817
  • 29
  • 282
  • 245
  • Yes I skipped the @supports (background: paint(houdini)) part and did not notice. But it still does not work hmm, thank you! –  Aug 12 '22 at 15:27
  • 1
    @Figario yes it does. You literally have to paste 2 lines into your code. https://codesandbox.io/s/spring-fog-hvdr4w?file=/src/App.js:772-815 – Yuji 'Tomita' Tomita Aug 12 '22 at 17:42
  • Sorry maybe its something on my computer but it does not work, the gradient border does not work, I tried your link some times and its not working –  Aug 15 '22 at 11:33
  • @Figario uhh are you talking about the border itself or the animation when you hover over it? If you want the "border", you need an element inside the padded gradient element that's white. See here. https://codesandbox.io/s/weathered-sea-867yns?file=/src/App.js:0-1319 – Yuji 'Tomita' Tomita Aug 15 '22 at 18:33
  • Thanks, I just got confused because unsupported browsers will see a gradient background with a hue rotation on hover. in the original link, while in your example its the same but just not a smooth transition on unsupported browsers :) –  Sep 01 '22 at 16:23