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

help

Text design

how to have this text design with css

Vignette (inset shadow) on a video

I am struggeling with putting up a vignette (shadow being inset) to a video-tag in html5. Things I was trying to do: - Put a box-shadow on the video-tag itself - Put the video tag inside a div and give that div the box-shadow - Put a div after the video tag and give it the box-shadow (I was referring to a stackoverflow thread: https://stackoverflow.com/questions/26786940/can-you-have-css-box-shadow-inset-show-on-video-element)...

why wont my link center?

I made the navbar centered, and i copied and modified the code to fit more with the button type and now it is stuck to the side.🔥

Google Font Integration

When integrating google fonts; is it okay if I skip the first 2 lines and keep only the link tag containing css sources for my fonts to minimize my HTML code? And I write: ```html <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>...

Issue with centering the elements

When I go into mobile view, the elements are centered and i dont know how to do that. Here is the code. https://codepen.io/Aman-sghh/pen/KKBNpvq...

Whole DOM getting deleted when using display 'none' property for an id element

I want a specific id element to be deleted when I onclick a button. But when clicking the "Hide Images" button, instead of the id element the whole DOM is getting deleted. Does anybody have any idea why it is behaving like this. Here is the codepen - https://codepen.io/adarsh88/pen/vYaXwbN

Why mix blend mode not working with white and color images

while working with image, if find that mix blend mode not work with white color images here is code : http://jsfiddle.net/dwstvzqe/11/ on the other it works fine with the others color here is the code https://codepen.io/smashtheshell/pen/wvzwMLO...

aria-label = global?

Just wondering what this means exactly? It's used in several Tailwind components: ``` <nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global"></nav>...

how to change display direction depend of child of container

how to change display direction depend of child of container for example if have 3 childs display direction unset if not display direction : column...

Sliding sidenav (pushes main content)

Hey friends, I have a left-side navigation pane that on smaller screens should slide out from left to right like a drawer and push the main content to the right. Are there any tutorials on this kind of side nav? I've tried a few times but can never get this effect to work flawlessly using grid....

Help using cutout pro API

Hi! asking for help since I'm blank as polished ice on how to go on about this. I have a short snippet from cutout.pro on how to implement their background removal tool, written in node.js I do not know node.js so it's a bit greek to my eyes. Link: https://www.cutout.pro/api-document/#api-mode-1--return-binary-stream ...

Logo maker

Does anybody knows a good website where i can create and a download a logo for free with no watermarks?

Totally Different Images for Mobile screen

This is a slideshow of images. I want to use totally different images for mobile. How do I achieve that?
Tried changing the source of the figure for mobile, didn't work. Sorry if I'm asking basic thing, I'll just started learning js and jquery....

Challenging Header Design

Hi All, I've been tasked with building this header to support a video feature where the image currently sits. I'm unsure on how to go about building this in HTML & CSS. My initial thought was to build each element individually and layer them on top of each other using absolute positioning and zindex. I'm wondering if there is an easier way to do this with responsive design in mind....

is() selector issue

Was making an example for somebody on another server and found that while:
.cat-container.walking > img.walking,
.cat-container:not(.walking) > img.idle {
.cat-container.walking > img.walking,
.cat-container:not(.walking) > img.idle {
worked, the following use of :is() didn't: ```css...

Unable to add data array into left side of the documentation page

I have a data array that consists of the items on the left side nav. I tried using several methods but I'm not able to add the data array items as list elements. Here is my codepen to check out my code - https://codepen.io/adarsh88/pen/gOjMEvz. I want to add the list items with the class "nav-link" inside the ul id of listElem (Add the list items under JS Documentation). Can someone guide me on how to do it?...

Help with Select element CSS styles

What css attribute would make the border around the Select element be gone and which attribute would make the words appear half way cut off at the bottom of the element? When I inspect the select element this is what chrome shows for the styles on it: ```.field__input, .customer .field input {...

Focus state after being active

So, in my website, I added the tabIndex property so I could tab trough the links, and I added some outline while the button was focused. The problem is that when I was clicking them, so when they were active, the outline would appear. To remove it, I made the link:active with no outline and it fixed the problem. But, now, if I click the link and drag it outside because I dont want to click it anymore (or for some other reason), and then release, the :focus state is still triggered, how can I fix it, I want the outline only when it's actually needed https://i.imgur.com/3XqYtPe.gif...

How to don`t select all label using js like we do with has css

So In first image(image I draw on), show all underline are label and orange box show result of selection. But I don`t want to select the last label using js, how to prevent this(causing error show in image two)...

`Temporal` upcoming feature

Can anyone recommend some good resources for learning about the new Temporal API that's in proposal? I've been reading the official docs but I find the examples and explanations a bit lacking and inexhaustive. If there's a YouTube video using one of the polyfills that would be ideal, but I'm yet to find something that goes beyond what the docs show....