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

Looking for some tips/tricks to use Svelte animations/transitions for either page load, or scroll

Looking to jazz up the portfolio a bit but don't want to over-do it. At the moment I only seem to have fly working well, but I can't just use that for the entire page 🤣 https://github.com/callum-laing/portfolio-v4...

`display: contents` on `<details>`?

https://codepen.io/zachjensz/pen/rNbwOdV I would like to be able to stylistically hide a details element but it doesn't seem to be possible...

image rendering blur when scaling.

Hello, could anybody give me a tip on how to avoid image blurring when it scaled up, So I have my image in a container, and I put transform: scale (103%) when hovered to the container, the image has width and height 100%, so it fills up the container when I hover over it and the container the images scale up, but it blurs during the transition, and I have .6s ease-in and out aswell, I tried to upload code pen but keeps giving error trying to host image. Thank you. .container--scale-1{ padding: 5em 5em; position: relative;...

Fixing overflow issues in nested components of NextJS

On the test page of this demo, the div with Hello Worlds should have vertical scrolling. However, the scrolling appears for the entire page instead. https://stackblitz.com/edit/stackblitz-starters-l38e7q?file=app%2Fpage.tsx,app%2Ftest%2Fpage.tsx...

How to create buttons with torn | distressed paper edges effect? (old paper edges look)

I am excited to this one!, I tried searching about this. I want to make button something like in below examples sites. Please anyone can teach me how to do that?
Card edges | Container edge (https://www.seaofthieves.com)

I want my div (table) to take the entire remaining height of the screen without overflowing.

<div>unknown height</div>
<div>should take all remaining vertical space</div>
<div>unknown height</div>
<div>should take all remaining vertical space</div>
If it matters, I am using JS with tailwind. Another thing to note is that the second div is a table....

Responsiveness query

Hey, How would you structure this box at the bottom of the hero? currently made it absolute and translate: 50%. this is not working out for other hero sections as content is increasing and decreasing....
No description

Boxes Changes When a Character is clicked

How can I make the boxes change colour when a character is entererd? (e.g. When "/" is clicked, the box turns green?)
No description

Full height hero section with navbar

What would be the best way to design a hero section that, together with the navbar, takes the entire page height? Im thinking about doing it by explicitly sizing the navbar, and using calc to subtract from 100vh of the hero section height, would this work? I don't know how i feel about explicitly sizing the navbar height...

My grid elements are multiplying by 10 and I can't find the reason

When the user uses the slider, the currentSize variable changes successfully (I have been console.logging like crazy) but then when the grid reloads, shit hits the fan and It does generate but it multiplies by 10, that is, if the user picks 1 as their grid size, they 10 squares instead of just 1. If they pick 2, instead of a 2X2 grid (4 squares) they get 20. The thing is, the createGrid function is working correctly. When you call it by itself, it works no problem. This just happens when the user slides. Here's the link to the codepen. Thanks in advance (btw the grid elements borders are just decorative, so we can see stuff is working properly) https://codepen.io/norwyx/pen/MWRmzza...

Remove margin on top of column 2

There is a div container with text that has 2 columns at sufficient widths. I don't want orphans on the second column so I set ``` .intro p { margin-top: 0; text-align: left;...

Problem with toast animation (how to make old one slide back?)

I created this codepen https://codepen.io/Lko3001/pen/mdgmKaW, as you can see, when you create a few toasts, and then create a new one, the new one appears out of nowhere and most importantly, the other cards jump up and then down, instead, I want the current cards to slide back, and then add a new card, how do I do that?
No description

Form Validation working weirdly

Hi there, I make this validation but when I play with it by changing the inputs, it is performing weirdly, I tried to find the problem but could not, could anyone please help me to find out what the actual problem is? Please see the video, after changing the name multiple times it is acccepting the wrong input and letting the action file open. https://codepen.io/hamzacodepen951/pen/xxedjzJ...

Cursor Animation

Hello, I am trying to make the cursor on this website https://www.cynthiaugwu.com/ I am here so far. Its not exactly behaving as required. https://jsfiddle.net/2xpne574/2/ It pinches in wrong axis when I move the mouse up or left. Works fine for bottom and right directions. Still figuring out why. ...

Swing Animation

Hello guys, I am attempting to make a square move towards you like a swing would! My first thought was that it would be a transform property value but I am having a hard time finding it!!!!!! Here is an image to help you visualize the type of swing animation I am going for!!!

help with positioning

I’ve been working on this project and it’s displaying perfectly on my device but when I try out the online code editor (Codepen) the positioning is off and is all the way to the right. I’d like to know if it’s going to be an issue going forward or if I should overlook it. https://codepen.io/thatboybubu/pen/mdgmVRY...
No description

how does one make this design more responsive?

ive been stuck with this for almost a week and figured it's best i ask for help to get things kicking there's a bunch of related problems but im not too sure how best to articulate them so i've got this setup after the dev container environment is setup and the preview of the app is showing (it can take awhile), click on the icon on the right side of the preview address bar to pop it out onto another tab, this is so u can have devtools on it and conveniently inspect all the elements. when u alter the code on the editor, remember to hit ctrl-s to save it and the preview would correspond to the changes. ...

Forms for websites.

Hello, Could somebody please explain how forms work? I read through a "mailto" articles and tutorials yet they dont show how where or how to add, I've also seen only using html? will that work or do I need javascript? I just don't get how to send the information they put into the form, and get it sent to me on my email? thank you.

Hierarchical Sticky Headings

How can a sticky H2 be "pushed up" by a following sticky H1?