Kevin Powell - Community

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

front-end

resources

back-end

ui-ux

os-and-tools

How do I approach this circle micro interaction

The arrow part, I'm able to recreate but the border animation I'm not able to. Please help...

Visualize a cubic-bezier online

Hi everyone Please is it possible to have a soft online who can allow me to see the curve on cubic bezier example if I put this
cubic-bezier(0,.83,0,1.49)
cubic-bezier(0,.83,0,1.49)
I will see the shape on this...

Subgrid for Masonry Layout? (Puzzle Pieces on a Grid)

Hello everyone, I am working on a math game in React where I'll have puzzle pieces that can be dragged onto a board with a grid. There is an intial container where the puzzle pieces start and I'm trying to make that layout also be a grid so the pieces can start already aligned to the grid even before they're picked up. For context, here's the game frectangles.netlify.app. Right now the left side of the screen where the pieces start is laid out with flexbox. I'm trying to change it to a grid where - There is a gap of 1 unit between each piece wherever possible - The pieces are densely packed together (I don't care about the order of them)...
No description

autofill input field bg Color change

In html input field when I starts typing and it gives some autocomplete suggestions of previous used values and when I click that , the input box bg Color change Like in the image I provided , normally the input box bg is Color is transparent After I select or hover , it changes the bg Color to white...
No description

Easing Wizard: linear function doesn't seem to work

I try to use the Easing Wizard from one of the latest vids from Kevin. However when I paste the code it says "unknown function linear". I tried to see if the code is working, but I don't see any differences. See screenshots
No description

How to do a dashed border with a gradient and a border-radius in css?

Closest I could get to was with an svg background-image: ```css .dashed-border { background-size: 100% 100%;...
No description

Background image animation

Hey everyone, how can I apply box-decoration-break: clone; to all the other properties except for background image? codepen link: https://codepen.io/sushanyadav/pen/raNaNgW...

cant figure out position : sticky in a react component

i have a react component thats basically divided in two section i want the left section that is heading to stay sticky until the section ends i tried putting position : sticky but its not working can someone take a look what im doing wrong

dark - toggle in reactjs

So Im going to create a portfolio for me , And I get some template and thinking about adding Dark-light toggle on that , i asked chatGpt and it gives as that we need to store the value ( light or dark on Local storage) and gets based on that , is there any other way other than using local storage orcan we get users system theme ?? In reactjs

How to achieve such stretched fonts sizing?

I recently found out these vertically stretched text on Awwards site. I have seen some animations using such design before. How do I replicate it using CSS?
No description

can anyone help me to create Html css js code for this pic plz

can anyone help me to create Html css js code for this pic plz
No description

Improving My Slideshow for All Screen Sizes

https://codepen.io/Redcaus12345/pen/dPyyJQB I’ve built a slideshow and want to make it as good as possible across different screen sizes. Do you have any suggestions for improvements? Thanks in advance

Is it OK to hide an item using `opacity`, `pointer-events`, `aria-hidden` and `tabindex` ?

Can you hide an item using opacity: 0 + pointer-events: none + aria-hidden="true" + tabindex="-1" instead of using display: none or the hidden attribute ? Specifically in the context of accessible tabs: https://youtu.be/fI9VM5zzpu8...

Cookie pop up preference

https://github.com/Code-S1/Huddle-landing-page I just completed this design from FEM, and now I want to add something of my own that is not a part of the design. I want to add a cookie preference pop-up. How can I achieve that is it too advance for me?...

Center with position sticky

Good evening everyone I realise this...
No description

Z-Index issue

I tried solving the "Meet Landing Page" exercise. Everything is almost done. But there is one issue. The "Download" button at the bottom of the page is not accessible. I thinks that is becuase of the z-index. Github repo: https://rounakkumarsingh.github.io/meet-landing-page/src/ Live Link: https://rounakkumarsingh.github.io/meet-landing-page/src/ Please Help. I used HTML and CSS only. I used Tailwind as framework....

Grid or a mix of grid and flexbox

As a challenge I want to see if I can make this layout : https://mindspring-light.webflow.io/ if I look at the orginal, the css is a mix of flex , grid and position: absolute. Should I do the same or can this layout be easily done with only grid ??...

How to scroll inside a fixed element? React / Tailwind

Hello kind people, I have been stuck on this issue for 2 days and I would like some help. https://ylli-vert.vercel.app/showroom This is a simple shopify cart I have created which adds and removes items. ...

PLEASE I need help on LCP and bg-fixed

PLEASE I need help on LCP, i'm not that deep into frontend so i don't get it yet maybe but i'm doing a bg-fixed and the LCP is apperantly the background fixed image but on mobile it renders the entire page (?) i thought bg-fixed is only the image where you are at and that's mainly on mobile on desktop (image 3 and 4) are kinda fine...
No description

[SOLVED] Set an image in div

Hi everyone I have a problem I want put an image an a div ```html...
No description
Next