Text fade in and out CSS

I want to make the text go transparent in the top and bottom of the circle and be able to scroll
6 Replies
capt_uhu
capt_uhu7mo ago
hard to know exactly how to answer this without seeing some code but for your text going transparent I'm guessing a CSS gradient mask-image is what your looking for: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image
MDN Web Docs
mask-image - CSS: Cascading Style Sheets | MDN
The mask-image CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the mask-mode property.
AN
ANOP7mo ago
Thank you, It worked
clevermissfox
clevermissfox7mo ago
How is the height on the ul working? I keep getting it drilled into me that heights in percentages don’t work without having a declared height on the parent (in this case the div). … but this is working
Jochem
Jochem7mo ago
heights in percentages go off the parent's set height, and the height is being set by aspect-ratio: 1; border-radius: 999px; width: somevalue; aspect-ratio:1; is my favorite way of making simple circles
clevermissfox
clevermissfox7mo ago
Oh I didn’t realize height could “see” aspect-ratio given that it can’t “see” 100% from a min-height (which does make sense). Since aspect-ratio is a more concrete value. Thank you I totally glossed over the aspect-ratio being the “height” as a possibility
Want results from more Discord servers?
Add your server