How to create similar rotate for vertical elements wrt the hovered image in a grid format? can it be achieved just thorough css w/o js?

https://youtu.be/P80sM7ausCA?t=376

I have designed a custom Fighting game character layout in Figma. I want to implement it as a React app. This is the design :Character Layout.

i was thinking maybe with a grid layout, if someone comes with a better alternative or a insight how to do it with grid

https://i.redd.it/ytk8qc019w7e1.gif

Animation can add life to your website, creating interactive and engaging user experiences. This tutorial will show you how to build a side-scrolling effect with a walking character using HTML, CSS, and JavaScript. With keyboard controls, users can move the character in both directions while the background scrolls smoothly.

https://www.youtube.com/watch?v=7ZvkvJv4ZhI

I have several themes for my website, and I use JS to switch between them. Each theme has its own style. the other styles use regular color backgrounds, so I just used "transition: background-color .3s ease", but when I move into the theme with the linear-gradient background, it's really abrupt with no transition.

How can I implement a transition to make it less sudden?

https://preview.redd.it/wk3u94skfv7e1.png?width=1764&format=png&auto=webp&s=4c40e7ee2281f889348e4d1ca76598e2b8aeb1cf

This wasn't showing when simulating it in firefox or chrome dev but my phone browser is showing it. The text on the slideshow and sub title's kerning are messed up but when viewed in mobile...

This is my first time using container queries and I'm seriously stumped as to what's happening and wondering if anyone can shed some light. I can probably hack it to make the offending element not use container queries at all, but mostly I want to know what is happening in case I run into this issue in the future. This is all inside a React app and I don't think I can adequately create a codepen etc to recreate my issue but hopefully an explanation is enough.

I have several elements on the page with a class that holds all of my container query code, let's call it .input-container. inside .input-container I have form elements, and I'm using container queries for better control over the styling of these elements since my app might be used in all sorts of different contexts.

the container query code I'm using is:

container-type: inline-size;
width: 100%;
container-name: inputContainer; 

Here's my issue: I have one .input-container on the page. In this element, I have a button that, when clicked, triggers a second .input-container to render on the page as a direct sibling of the one in question.

When this action occurs, the first .input-element disappears.

Well, not entirely. I can see it in my elements panel. If I adjust the height of this element and add a background colour (let's say 200px and red) I see... a solid 200px tall red block. The children inside aren't visible at all.

I would love some insight into what's happening here! This is my first time using container queries but I've been writing CSS for work for a decade and rarely find myself so confused by it.

I have a client that is convinced they want their background to be move like water from an arial view. The way they describe it with their hands is a wavy motion. Lets ignore whether or not this is actually a good idea for the sake of this conversation I have to find a way to get it as close to that as possible.

My first idea was radial gradient moving blobs blended together https://codepen.io/Lauren-Selley/pen/bNbqRoR but overall it doesnt seem to really hit the mark, mostly because the brand colors are so light.

Any ideas?

I know how to use flex and grid. Position I am not so good at. But I suck at determining WHEN to use each of them. I know flex is one direction and grid is two direction. But after reading several articles on them, I still don't click on when to use them.

Sorry for this nonsense Lada but I still handle the responsiveness with css tailwind kind suck at especially with htm becoming really unreadable

I’m following W3Schools. I have the navigation bar set to bottom: 0; and Position: fixed;

On W3Schools, it shows the bar scrolling with the screen, always at the bottom.

I can’t find why, but my bar is always a little bit above the bottom of the screen (unless I increase the content for the screen to become scrollable) and it doesn’t scroll. It’s just stuck at the bottom.

I also have a page with a TikTok style video scroller, and that completely hides the nav bar at the bottom no matter what.

Is there a way for my navbar to be ontop of my content? Like it has priority to cover it? I’ve tried fiddling with the Z-index but that hasn’t done anything. I would really really really appreciate any help someone can give me

ignore the yellow and blue background color.
I tried to achieve this with text shadow but the result is not the same as this picture
I want to have white color text and red color like this

https://preview.redd.it/rl4g7fb6nn7e1.png?width=933&format=png&auto=webp&s=71b51c9dc7a0cfb49e48763bbcc86755d6f0c8f5

ul:first-of-type li:nth-last-child

ul:first-of-type > li:nth-last-child

Guys what is the difference between the 2 lines of code above?
I can't understand when '>' is used and when it isn't
I feel like it is being used interchangeably
Pls help, I'm a beginner,

Thank You!

Hi all, does anyone know, or even has a beginning of. a start of an idea how to achieve this kind of effect for a background made with css? Thanks for any answer :)

HI! I am a newbie at HTML and CSS and while learning I encountered my first major problem..

I was following YouTube toturials while practicing myself as well to not get into toturial hell and actually learn something but the when the course taught about padding and that it should help with more flexibility if the buttons change text or have a larger text.

so when should I use padding? and what about width and height? I had been creating buttons using width and height till now? Should I abandon that approach and just use padding for size of buttons? Trying different padding values until I get what I want?

I tried looking it up if professionals actually use padding in these cases but couldn’t find a solid answer to my question.

I know padding is used to create space within the button opposed to a margin and is mainly used to center or correctly place the text but when should it be used?

thanks!

Hello Everyone,

I hope you are all having a great day! I am building this Advanced Color Picker tool for designers and developers to help them find and manage colors. I am also integrating AI features that can help find color palettes with keywords and provide in-depth color psychology on any color.

I know the pain of finding the perfect colors and searching through websites for color inspirations. So I started building a simple tool for myself to save and share color palettes easily. Then I thought of integrating AI to help generate color palettes and provide in-depth analysis on why to use a particular color for a specific brand or industry. Now, I want to share this tool with everyone for free.

Feedback is much appreciated.

https://reddit.com/link/1hgywe9/video/apvztik15l7e1/player

Hi everybody, I'm working on a project, and I pulled out a part I'm having trouble with. I want the div in the middle to line up with the buttons to visually make one continuous shape, but for some reason when I set the display to inline-block, its as if there is a margin, when there isn't.

https://jsbin.com/cafeciz/edit?html,css,js,output

Thanks in advance!

I use the Dark Reader extension to add a custom dark theme across the web, and am currently in the process of making some tweaks to YouTube's webpage. As shown here, there are a couple of elements(?) I would like to change from black to the blueish-gray hue I use for my background.

I'm trying to target the description background, which I was able to change the inner part of successfully by using this CSS code:

#description-inner {
  background-color: #26353E;
}

However, the black border still remains, even if I alter the code to target #description as opposed to #description-inner. In this screenshot, you can see a yellow box hovering over the area containing the black border. I figure that means that I'm getting close by looking at the <div id="description-inner" class="style-scope ytd-watch-metadata"> line of code. I also tried adding:

.style-scope ytd-watch-metadata {
  color: #26353E;
  background-color: #26353E;
}

with the color property included as well, but to no avail. Any ideas on how I should go about looking for that container's id?

(Apologies for lack of a codepen or snippet, this is an internal website.)

I'm building a page for our internal application. One of the segments of the page shows a table, which in some cases could get pretty long. I'd like that container to scroll when the table exceeds the vertical size, but nothing I've done has gotten it to scroll. The vertical size of the segment is set via Tailwind using h-[calc(25vh)]. I can get scrolling if I apply it to the whole segment, but if I apply it to div that actually contains the table, no scrolling happens (the table just grows past the bottom of the fixed-height segment).

On Chrome, I get a "ghost" scrollbar on the right of the table, but no thumb and the table only goes over the bottom of the container, never scrolls.

On Firefox, I don't get the "ghost" scrollbar, but the table still only goes over the bottom rather than scrolling.

We are using flexbox on the div elements, I wonder if that is an issue? We are also using some elements of Tailwind, and I've tried various combinations of h-full, max-h-full, and overflow-y-scroll on each level of wrapping div (as well as the table itself).

Can anyone recommend resources to learn both the basics and advanced concepts of CSS? I’m aiming to achieve serious mastery so I can build custom components from scratch whenever needed and improve as a developer.
Mostly Example or project based learning.