KPC

Kevin Powell - Community

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

Join

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

stoney

11/3/2023

How to create this border.

I’m creating a website using plain html and css and I’ve been unable to find a guide for how to create a stylized border.

alberduris

11/3/2023

CSS & Design-to-Code Workflow

Hi all! So, my journey in React and Next.js is going well, but I've hit a roadblock when it comes to transforming designs into code, especially in layout and styling. Here's where I'm stuck: - Crafting different layouts or the 'shell' of a web app from a design or an existing web app is puzzling me....

Boeroe

11/3/2023

center my button

Hi guys i can't get my button responsive in the middle under the textarea. I can get it with margin-left but its not responsive that way. Anyone got an idea what the best solution is? https://codepen.io/Boeroe/pen/oNmzBBg...

11/3/2023

Getting a Clip-Path animation to start from the cursor position (like a ripple effect)

Hi, I have this card and I'm trying to have a background circle fill effect on it where the circle expands from where the cursor is, I have a card div and I'm using its ::before pseudo element, first I tried to put a clip-path: circle(var(--size) at var(--transform-origin) on it and control its size and position using custom properties on the parent div which I will use javascript to animate them. I'm updating the --size and --transform-origin using javascript but since I have to use a default value for --transform-origin to get the clip-path rule to work when the page is first loaded the default value is getting read first and then once you click on the card the --size become 150% and the circle fills the background but the position is starting from the default value and not from where the cursor is, but when you hit the reset button it shrinks back to where you clicked earlier. - Here's a code pen for the complete code https://codepen.io/x287x/pen/zYeKQwP...

Pat66

11/3/2023

Dropmenu menu

Hi everyone I realise this menu but the problem is when I click on the button contain in iv who have entete class the div who have class info appear on the div entete ...

suicidedog

11/3/2023

Button borders and best practice in a design system

Hello. I'm trying to translate our UX-designers design into working buttons using scss. They have a default state without a border, and recieves a border on :hover and on :focus. This makes the buttons take up extra space, which visibly make em dance in a way I'd like to avoid (pushing elements close to them away). The button will be a part of a design system, the point is to make the buttons available to pretty much copy paste into other projects and work as intended. ...

Jimster

11/3/2023

Navbar item extra padding

https://codepen.io/web_dev_pr0/pen/KKJgJZa

The Internet's own Kiddo

11/3/2023

Issue with positioning ::before pseudo-element behind the main element

'm having an issue with CSS styles for an element with the class .vision-card and its ::before pseudo-element. I'm trying to hide the pseudo-element behind the main element using z-index: -1;, but it doesn't seem to be working. Here are my styles: https://codepen.io/jackyiakovenko/pen/KKJgobr?editors=1100...

Light

11/3/2023

Help with expanding layout

So I'm trying to create a layout where the first element has a minimum width, and then it'll try to fit as many additional elements before starting a new line. I've attached a CodePen to help with this idea. https://codepen.io/elad-karni/pen/oNmLBGz...

Jus Sus || 💀

11/3/2023

Resizing issue

https://codepen.io/stressunfit/pen/NWoROgx?editors=1111 I am not able to figure out why resizing isnt working properly when i try to resize with any handle expect bottom right handle. Bottom right handle works fine. Any kind of help we be greatly appreciated. Thank you......

Bless😇

11/3/2023

Postcss @import not returning content of the files.

My output file returns '@import 'files'' instead of the content of the files. I don't know what I'm doing wrong. I've tried changing files paths, still getting same output. But when I link 'main.css' to my html head, the content in the file reflects on my work. postcss.conf.js - module.export = { plugins: [...

RaviTeja

11/3/2023

How to design performance meter

Hi , am trying to figure out on how to design a component , which shows performance meter based on value given. The meter color goes with gradient . please guide me !...

Jus Sus || 💀

11/3/2023

How to achieve this using HTML Canvas

Hi, i have been trying to be a canva like application using vanilla js (no libraries). right now i am working on adding texts to the canvas. What approach should i follow to achieve this : https://www.veed.io/view/f6da6b9d-6dc7-4ea7-aa1a-786579e26215?panel=share

syg

11/3/2023

how do I handle IMG srcset and widths together?

Lighthouse is yelling at me to add widths to my images where I use srcset, doesn't this negate srcset and constrain the width to the width attributes value in pixels? How are you supposed to use these together?

! nier

11/2/2023

Flex container issue

Hi, I have a problem with a flex container info-cards with flex-wrap active. The container has 3 cards that by default are on the same row, but if the vw gets too small they break in other rows. The problem is that when this happens the width of the container keeps on being 100% while I'd need it to just fit its content so that it can stay horizontally centered. I can fix it using media queries but I'd rather have a cleaner code. Here's the codepen: https://codepen.io/uzhas/pen/gOqwXGm

CDL

11/2/2023

TOP - CV Application - Some guidance on setting this layout up

Layouts haunt me, I always mess them up, so this time I'm coming for a little guidance first 😛 Firstly - admire my amazing paint skills. Secondly - what's a better idea, having a dropdown menu to then reveal the inputs, or just show the inputs from the get-go? Thirdly - how would you build this layout? my initial thought was grid. Have 3 areas/cards down the left, then a large card on the right with a 30/70 split? or is flex perfectly fine? I really don't know....

Psyzen

11/2/2023

How to show first 3 items in the browser ?

I want it to be like in the image. Im not sure how to make it so that the third item is like first 2 items and when scrolling it scroll one item at a time. I didn't tried to impement javascript functionality yet because I struggle with css. I tried to do with grids and flex but the third element bottom is always behind and I want to see 3 items with margin of 2em and row-gap of 2 em....

Anil

11/2/2023

Require Animation on scroll up/down.

Hello guys can you suggest a good library or other trick to achieve one animation. Animation will work like, on scroll up parts of the objects will moves to up. And on scroll down moves to down. Let’s think object like watch and parts of the watch is moving up and down....

Cortezano

11/2/2023

:root gradient color issue

Hello everyone, I'm creating test project to test my skills from the scratch, and I try the root gradient color but when applying this color can show in my website, can you help me guys whats wrong in my gradient code https://codepen.io/Cortezano/pen/VwgKWJp btw, I'm testing it in the nav-bar-section with the gradient color just to see if I can do it, but it doesn't really work,...

anon-pradip

11/2/2023

flickering on hover

when I hover at the bottom of the floating div, the floating div moves up due to translate propert but after like 1 second being the mouse cursor at the same position, the floating div comes to initial position. why is this happening? <div class="main"> <a class="card"> <div class="floating"> ...

Previous Next

Gaming

Programming

Kevin Powell - Community

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

Kevin Powell - Community

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