This one line of CSS will fix the annoying... layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️show more

This one CSS property will fix your z-index headache.... In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️show more

Probably the most annoying thing for me in animations... / scrollable content is how easy it is to just clip the content. Even if there is no border around to clip it with, adding masks is a one-liner in css now. (slowed down transition)show more

Design Engineering Tip: If your whole page shifts 15px... the moment a modal opens, it isn't the modal. It's the scrollbar disappearing, because the library sets overflow: hidden on the body to lock scrolling. Reserve the space before you ever need it: html { scrollbar-gutter: stable; }show more

This one line of CSS will make your website... feel more native. On mobile, tapping on clickable elements triggers an ugly blue highlight. This gets rid of it: html { -webkit-tap-highlight-color: transparent; } If you found this one useful, follow for more. ❤️show more

when you add fade out for the scrollable container,... make sure it won't overlap your scroll barshow more

Need this kind of layout for collabs more often... Because the little glare Bricky is able to give that this layout allows is too good LMAOshow more

✨ An example showing the power of container queries,... inspired from Github. Notice that when the option is "Media," the UI items remain hidden despite sufficient space. However, when "container" is active, they are visible. Learn more:show more

This CSS unit is quietly ruining your website's mobile... experience. In mobile, "vh" doesn't account for the browser's address bar so the bottom of your page gets cut off. Even worse if you have a bottom right action button since users won't even know it's there. The "svh" unit fixes it: .page { min-height: 100svh; } If you found this one useful, follow for more! ❤️show more

Some hover states might be hurting your website's mobile... experience. On mobile, hover states gets stuck when users tap on them. This CSS media query fixes that: @ media (hover: hover) { .card:hover { opacity: 0.5; } } With that, the hover transitions will only apply for devices that actually supports hovering. If you found this one useful, follow for more. ❤️show more

Shine animations in CSS are actually simple to make.... .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️show more

Tip: prevent scrollbars from re-wrapping text. Using "scrollbar-gutter: stable"... fixes thisshow more

💬 why isn't the bed against the wall? 🐥... with the layout of this room, it actually looked strange if it's place against the wall, so i just put it in the middle. and when u open that window, the view outside is prettyshow more

They claim if you cut the tip off a... banana & put it in a container with paper towel, then place in the fridge that the banana can last for months without turning brown. I’ve NEVER heard of this. Is it true? Anyone actually do this??show more

I ran this a few more times, Gemini won... every time. Seems like it was quicker picking up on this prompt: "All containers are **identical** — same OS, same services, same vulnerabilities. Whatever exploit works on one container works on all of them. Your container has the same weaknesses as your targets." and examined its own container to find the vulns faster than the othersshow more

This iPhone Duo Netflix reflections thingy is awesome, even... genius I’d say. But, it doesn’t do you any good when you are watching the content. Instead, it becomes distracting within seconds. If you keep it on your desk or if you are keeping it on you when lying down, you’d seriously want the lower half of the display to turn all black.show more

When the lens of a camera tilts so that... it is no longer parallel to the camera's image sensor, it shifts the plane of focus and alters the depth of field. This is a tilt shift view of farming operations. [📹 albaxya0]show more

one trick behind this demo 👇🎞️ .images { translate:... 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙show more

If you didn’t know this is how UK Foreign... Aid Works … The Container was FULL just before it left the UKshow more

When the lens of a camera tilts so that... it is no longer parallel to the camera's image sensor, it shifts the plane of focus and alters the depth of field. This is a tilt shift view of a construction site. [📹 albaxya0]show more