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

Chaves

11/4/2023

How do I achieve this effect in my image?

How do I achieve this effect in my image? I tried with background-blend mode and it didn't work.

kostas

11/4/2023

How can I make this sticky section, with reverse column scrolling effect

Hello, guys. Over the past few days, I've been attempting to reproduce a particular video effect, but with no success. I'm really eager to find out if this can be achieved with CSS only (although I'm quite certain it's not possible). If Vanilla JS is necessary, could you please outline the steps to accomplish it? Unfortunately, the original poster was unwilling to share the URL, making it impossible for me to examine the code. I did, however, come across a similar effect on [CodePen](https://co...

Abrar

11/4/2023

useMemo,useEffect,useCallback

Does this three hook will be return and execute in the first rendering of the component?

Salman Khan

11/4/2023

NEED LITTLE HELP IN CSS DESIGN

Hi, I am working on this small design, and now I am stuck. I want to display a blue circle behind the white table. I've tried using a div and also attempted to use the ::before pseudo-element. I've also experimented with the z-index property. Can anyone help me finish this? 1st Image - Image of the design 2nd Image - My design ...

carl

11/4/2023

How to fit a background-image in the browser's viewport

Hello! [Just started exploring in CSS and html] I'm having trouble to fit the background image in the browser's viewport (I used EDGE). I've tried several solutions, but they don't work. My current code does work in preserving the original ratio of the image, but it leaves spaces between the sides of the window. This is my html and css, files: https://codepen.io/make-web/pen/LYqRwVR.

Silvershot

11/3/2023

CSS variable scoping when using animation

Watching Kevin's video (https://www.youtube.com/watch?v=Qj0Qx8HpNUo) on parallax had me wondering at 8:22. He goes ahead and uses the --parallax-speed variable, which is declared privately/locally in each of the .parallax's children. Each .parallex child also has an animation declared, which makes use of the @keyframes parallax animation. How does the @keyframes parallax animation scope have access to the --parallax-speed variable of every child?

Brings

11/3/2023

Create Google Chrome extensions,start after load !?

Hello folks I have created a Chrome extension. So far everything is fine. The extension works like this, I am on the desired page. there I click on my extension at the top left and then on a button ...

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

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 🙂.