UI Selector Ideas?
I am making these plus & minus selectors for a client, the image is from the Figma. I'm a bit stuck with how to best go about making them, specifically with the text/select options. For the Quantity, I can use a number input and have the buttons add or subtract vrom the value. But for the Grind Size and Bag Size I'd appreciate any ideas.
- Vanilla JS
- As a11y friendly as possible
Also, is there a UI term for this kind of component? I hit a dead end on google....
Creating magnifying effect using JS, CSS, HTML
Hi guys! I started coding this year and I'm trying to make a website for my art installation. Everytime a user presses a play button, a different audio track gets played (I've just included some test tracks right now). It features a video playback and a custom cursor that needs to act like a magnifyer when the mouse is moving and the play button has been pressed. Try it by pressing play and hovering over the lava lamp. Here's the link to my codesandbox project:
//shrunk URL to codesandbox.io because it's way too long...
https://shorturl.at/grvV8
...
Container query makes absolutely positioned elements not appear correctly
Hello there.
I am working on my university thesis project, which is a React Spotify clone. I've come to a part where the user can 'play' songs and set queues. This means that i have a container for the queue list. This container is positioned on the right side of the main container, similarly to spotify's layout. If the queue wrapper is open, the playlist table is too big, so that's why i want to hide certain columns based on the container's width. After searching on possible solutions to how to do this, i've come across the container-queries. This works fine and all, but caused the problem: some absolutely positioned elements now does not appear correctly. I think this is because the previously mentioned container-queries.
The popup should overlay the full screen, but because of the container-type: inline-size it appears like on the picture.
Is there a better way to hide columns based on container width?...
animation-timeline-view header from kevin's video
I saw kevin's video about how we can customize the header after certain point when scrolling. I tried the same effect but the header stops sticking after a certain point.
Code π...
CSS color fallbacks
I'm confused by what the 'final' color would be in this instance:
```css
.foo {
color: #c65d07;
color: color(display-p3 .724144 .386777 .148795);...
Does Safari on OSX support CSS nesting?
It seems to pass all the tests at
https://codepen.io/bramus/pen/oNdrypM
But everything is yellow in this test:...
Add a mask image
I want reproduce this effect in html and css
https://www.youtube.com/watch?v=momF_D4odCM the problem is when I had he mask-image I should get this...
https://www.youtube.com/watch?v=momF_D4odCM the problem is when I had he mask-image I should get this...
why conic gradients cause aliasing when the value is an integer %?
compare both images.
if i add 0.5, it looks smooth, if i don't then it looks jagged and ugly.
why would it do this?
...
Next.js + Tailwind - HamburgerMenu is either scrolled past or cut off
Repo: https://github.com/waikoo/thrifty
Live: https://thrifty-seven.vercel.app
If you navigate to the live page on a mobile device, press the hamburger icon from the bottom NavBar, you'll notice you can't scroll downwards. If you take a look at the gif, it works for me as I'd expect this to work on the dev server when the viewport is as small vertically to cut off the whole height of the hamburger menu.
...
CSS issue
When I reduce the size of width to check for mobile screens, spaces between the words are increasing
How to truncate text with ellipsis in the middle based on container width?
Hi all! As the title states I want to truncate a long breadcrumb like text in the middle with ellipsis. ex
Foo > Bar > ... > Baz
. I have a solution by using a Resize observer on the element and then measuring the string size based on the font using canvas and then I truncate appropriately and update the elements textContent
. This all works fine but I am afraid when I have a large list of these items that all need to be truncated I will have performance issues. So I was hoping someone here knows a better way to solve this.
Markup is a list of possibly long text to truncate
```jsx
<ol>...Unable to assign correct answer variable
Good day,
Please assist with the following: I'm loading quiz questions from an API and I'm having trouble assigning the correct answer to a variable and accessing and comparing it to the user answer.
Below is my Code Pen link.
...
Help trying to understand Canvas API
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke#re-stroking_paths
I just can't seem to understand this part from the MDN Docs for the life of me.. I feel like it's worded confusingly....
Compatibility issues
Hello! I'm working on my personal website: https://birthyear.site/. Everything looks at works well at the natural size, however, as soon as I scale the width down using Devtools, my 100vh divs suddenly shrink and do not cover the whole viewport.
I tried achieving it in another file like that:
```html
<head>...
kind of "parallax"
Hello , could anyone help me understand how to create this effect?
There is a background image that is position fixed at a lower z-index, and there is content on-top higher z-index with a transparent background to be able to see the image in the background, and the image background is fixed, but the content on top is scrollable, and when that section ends the one on-top of the background image, it just kind of fades into the next section, and the background image in only viewable when you are scrolled on that specific section and just gets overtaken by another section when you scroll away. I had a screenshot but canβt find it. It's similar to βparallaxβ but less animated I guess....
CSS bounce ball animation
Hello. Still new here. Just sharing a cool bounce ball animation. Let me know what you think.π
Create an infinite horizontal scroll animation
Regarding this amazing tutorial: https://www.youtube.com/watch?v=iLmBy-HKIAw&t=524s&ab_channel=KevinPowell. I followed Kevins tutorial and in that video Kevins used max-width of 600px for scroller container, for my project I am using max-width of 1300px for my scrolling container but I still get this "blinking" effect and a lot of empty space between last and first element. My code is the same as Kevins, but it still "blinking", I have short text inside scroller and I am not sure what causes thi...