Мобильная версияI am trying to create master card and i want a vertical line behind it. When i use backdrop filter on master card it works fine. But when i put it on its parent element ::before pseudo element come in front of master card. I can't even fix this with z-index.
I tried this on firefox but i have to add backdrop-filter to both parent and child then this works
Here's the code:-
:root { --white: #fff; --gold: rgb(255, 215, 0); --bg-color: rgba(255, 0, 255, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url("
"); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 1rem; } .container { display:flex; justify-content:center; align-items:center; width: 50%; height:90vh; margin:2rem; padding: 5rem; box-shadow: 0px 0px 3px var(--gold), 0px 0px 3px var(--gold); border: 0.1rem solid var(--gold); border-radius: 3rem; position: relative; backdrop-filter: blur(1rem); &::before { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0%; width: 0.2rem; height: 100%; background-color: var(--gold); } .master-card { text-transform: capitalize; color: var(--white); width: 100%; aspect-ratio: 2/1; /*backdrop-filter: blur(1rem);*/ background-color: var(--bg-color); border: none; border-radius: inherit; padding: 2.5rem; box-shadow: inherit; display: flex; & .brand-bg { width: 10%; aspect-ratio: 1; border-radius: 50%; } } } Master card master card card number8050 5040 2030 3020
prem kumar shahi
I think should use a hr tag then rotate it but because of padding it could touch the borders of the container div.
Here's an image of the design. "This image is from firefox since its somehow working on it"
Источник: https://stackoverflow.com/questions/781 ... rop-filter
