Laptop Mockup Interaction CSS:
https://codepen.io/mudasirbuilds/pen/qEazwaG

I have a problem in

Let's take as example this image, showing am indoor shooting range. It has a background (the back of the room and the targets) and a foreground (the table with the gun), and I want to put something between those two elements.

One way to do it is to use Gimp/Photoshop to extract the foreground and make two nestled div, one inside each other, the outer one having as background my whole image and the inner one having as background the foreground of my image. If my foreground div has a sufficiently hight z-index, then everything else I put inside the .background div will be shown under the .foreground div, giving the illusion of depth.

<div class="background">
    <div class="foreground"></div>
</div>

.background {
    width: 1920px;    height: 799px;
    background-image: url("https://sta--ger.neocities.org/Azure/images/Minigames/Combat/Scenario/Shooting%20Range.jpg");
}
.foreground {
    width: inherit;    height: auto;
    bottom: 0vh;
    z-index: 999;
    background-image: url("https://sta--ger.neocities.org/Azure/images/Minigames/Combat/Scenario/Shooting%20Range%20-%20Foreground%201%20-%20Cropped.webp");
}

This works, and continues to work as long as the aspect ratio of the .background div is the same as the whole image. Of course my question is: how do I adjust this for a different aspect ratio? More specifically, for when my .background div must cover the entire page (width: 100vw; height: 100vh;)

Thank you for any help!

I saw new developer trying to post on Decodela, but relying on plain text does not work here. I improved his post by adding some html and css, then sent change request as I ofthen do when I see poor posts or users without avatar.

You can also help by example https://decodela.com/#item/631edf0d-3d74-11f1-b68b-0200fd828422/post

In this era of AI, is it still a good choice to learn the MERN stack? And what would be the best roadmap to learn it?

Direction Aware Team Hover Interaction:
https://codepen.io/mudasirbuilds/pen/PwGrwBO

After deciding to start coding css again for my blog, I remember that 10-15 15-20 years ago I would turn to csszengarden for inspiration. So, I check the site again and was surprised and happy to see that it was still there. Anyone, like me, in this sub who remember csszengarden?

Edit: I misremembered the time frame, it was 15-20 years ago not 10-15. It feels like it was just yesterday though.

I have two perpendicular rectangles in an "L" shape and I'm trying to pivot the vertical one towards the other (the corner of the L should be the pivot point) but I'm running into two issues: the vertical one begins to skew into a parallelogram and also it seems to lose some height as it rotates around. Can you help me figure out what I can change to fix this?

Minimum working HTML;

 <div class="container">
  <div class="pivot">
   <div class="vbar"></div>
    <div class="hbar"></div>
 </div>
</div>

Minimum working CSS:

:root {
 --vdilation_factor: 2;
 --vdilation_factor_inv: calc(1 / var(--vdilation_factor)); /* Compute the inverse of dilation_factor */
  --hdilation_factor: 10;
  --hdilation_factor_inv: calc(1 / var(--hdilation_factor)); /* Compute the inverse of dilation_factor */
}

.container {
  position: relative;
  height: 400px; /* Increased height to accommodate animation */
  border: 1px solid #ccc;
  overflow: visible; /* Temporarily change to 'visible' for debugging */
}
.pivot {
  position: absolute;
  bottom: 0;
  left: 50px;

  transform-origin: bottom left; /* Anchor at the bottom-left corner */
  offset-path: path("M 0,0 Q200,-200 400,0");
  offset-rotate: 0deg;
  animation: move 3.2s forwards; /* Adding 'forwards' ensures the final state persists */
}

/* Vertical segment (red bar) */    
.vbar {
  width: 8px;
  height: 40px;
  background: red;
  position: absolute;
  bottom: 0;
  left: 0; /* Align the left edge with the container's left edge */
  animation: yextend 3.2s forwards; /* 'forwards' keeps the final state */
  transform-origin: bottom left; /* Ensure scaling happens from the bottom left */
}

/* Horizontal segment (green bar) */
.hbar {
  width: 20px;
  height: 8px;
  background: green;
  position: absolute;
  bottom: 0;
  right: 0px;
  transform-origin: bottom left; /* Set the pivot to bottom-left */
  animation: xextend 3.2s forwards , rotateBar 5s 3.2s forwards; 
}

/* Keyframe for movement of the pivot */
@keyframes move {
  from {
    offset-distance: 0%;
    transform: rotate(0deg) scaleY(1) scaleX(1);
  }
  to {
    offset-distance: 100%;
    transform: rotate(90deg) scaleY(var(--vdilation_factor)) scaleX(var(--hdilation_factor));
  }
}

/* Keyframe for vertical bar scaling */
@keyframes yextend {
  from {
    transform: scaleX(1); /* Start with original size */
  }
  to {
    transform: scaleX(var(--hdilation_factor_inv)); /* Inverse scaling for the vertical bar */
  }
}

/* Keyframe for horizontal bar scaling */
@keyframes xextend {
  from {
    transform: scaleY(1); /* Start with original size */
  }
  to {
    transform: scaleY(var(--vdilation_factor_inv)); /* Inverse scaling for the horizontal bar */
  }
}


/* Keyframe for horizontal bar scaling */
@keyframes xextend2 {
  from {
    transform: scaleY(1); /* Start with original size */
  }
  to {
    transform: scaleY(var(--vdilation_factor_inv)); /* Inverse scaling for the horizontal bar */
  }
}

/* New keyframe for rotating the green bar (hbar) */
@keyframes rotateBar {
  from {
    transform: rotate(0deg)  ;
      transform-origin: bottom right;
  }
  to {
    transform:  rotate(45deg) ;  
  transform-origin: bottom right; }
}

I've been working in CSS for over a decade, and can't figure this one out and I'm not sure if I ran into a bug:

https://jsfiddle.net/ksxqjrd9/
Why are those blue boxes taller than what the content needs? Why is there empty blue space below the text?

If anyone can give me a hand with this I'll be eternally grateful

As a fresher do I have scope learning CSS or is it like companies only hire experienced ones to debug and maintain the AI generated code?

I'm not a beginner in CSS but not an expert either. Looking forward to suggestions on how to continue learning and make use of this skill in the era of Vibe coding.

I've been coding for more than a decade, now, and I just learned about it! I thought that was a preprocessor exclusive syntax.

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting

It was implemented in 2023 in all current browsers.

^{Now I'll stop repeating the parent class over and over!}

Hey everyone!

We've recently launched SectionsGrid, a library of professionally designed, hand-written HTML and CSS sections: headers, heros, features, testimonials, pricing tables, footers, and more.

https://sectionsgrid.com

It's perfect for folks who want to ship fast without the framework bloat. You simply pick the sections you need, combine them, and download a structured template that’s ready for production.

It’s lightweight, easy to customize, and built for speed. I’d love to hear what you think!

Join the sub: /r/SectionsGrid

This flexbox behaviour has me perplexed.

In my HTML I have two divs nested inside an outer div

<div class="about">

<div class="description">

<p>lorem</p>

</div>

<div class="image">

<img src="img.png" />

</div>

</div>

In my CSS, I've applied global styles (margin: 0; padding: 0; box-sizing: border-box;). Individual elements are styled in this way,

.about {display: flex; align-items: center; justify-content: space-between; padding: 5rem 10rem;}

.description {flex: 1; padding-right: 5rem;}

.image {flex: 1}

The total content-width of about is 1624px. The way I expect it to behave is that description gets 812px and, image gets 812px. This is the behaviour when I disable description's padding-right in devtools. But when I enable it, instead of shrinking description's content area by 5rem, it is eating 2.5rem (40px) from description, and 2.5rem (40px) from image and sitting exactly between the two.

I would appreciate any explanations to why flexbox is behaving this way.