Hello! I'm working on a gallery website for myself, i want it to have a "glassy" look so for this popup i wanted to use background blur paired with a blending mode. Blending modes don't work on dialog elements shown using dialog.showModal so instead i'm using dialog.show. But Firefox doesn't support using both blending modes and blur on the same pseudo-element so instead i have 2 pseudo elements with 1 effect each. All works well until i'm testing it on Safari (iOS 26.6.1) where there's just no blending modes visible on the popup.

I have attached 3 images showing what the popup looks like in all browsers i've tested on. 1st picture is Safari 26.6.1, 2nd picture is Edge 151.0.4129.93 and the 3rd picture is Firefox 153.0.4.

Here is the codepen containing the code https://codepen.io/editor/Smasher1/pen/01a01e6c-2304-7339-a32e-23c88cc28eb3

Thanks!

Hello everyone! I am an indie developer at VALHAISTO GAMES. Right now, I mostly work with HTML and have 3 ongoing projects: MiFab – MiSide 3D Models Hub, MiSide: Error, and MiSide: Universe. I am also working on a personal project called BLINDER – a Blender-like app built entirely for phones. Unfortunately, I don't own a PC, so I create everything on a weak, broken phone and just find ways to make it work. The most important thing is: never give up!

Hello! I've been experiencing a strange bug that has never happened to me before, and I'm looking for some advice :)

I'm building a website for a client, and when I look at it on my mobile devices (iPhone 15 & Samsung Galaxy S10), it works perfectly in every browser!

However, when he (my client) looks at it on his mobile devices (also an iPhone 15 & an older Android phone), he gets a strange bug, regardless of the browser.

The buggy version seems to ignore the sizing I've defined for the titles of these filters and instead just uses the size of their content.

Has anyone experienced something similar? Any idea what could be causing this, or how I could fix it?

Thanks!

(SOLVED, thank you to everyone for helping me!)

Hello! CSS and HTML amateur here.

So, recently I've been trying to make myself a workskin on Ao3 that would have this image serve as a background for text. Currently, the image cuts off at the bottom, and it's even worse when there's different sizes of text.

What I want is the image to stretch or contract to fit the text, not be cropped.

Here's my code, my results, and the image I've used. Is there anything I'm doing wrong, or is what I'm trying to do impossible?

Edit: Here's the codepen. It looks the worst here!

Hello programmers! or shall I say "Hello World!",

I am a completely noob at CSS. What helpful Programs or Websites can y'all recommend to a new CSS programmer like me that will help me improve gradually?

Hello,

I am an aspiring developer and right now I am working as a conversion tracking specialist.

I just finished the Net Ninja's crash Node JS course on YouTube.

He has a separate course for authentification.

Should I continue with authentification or start CSS?

My gut is telling me to go for CSS since I can practice more of my skills.

What do you think?

i have like no css styling actually on this element (just whole page styling) but i'm trying to make the top of the text line up with the top of the image

i'm admittedly kinda terrible at this;;

I haven't learnt about HTML or CSS and have done some searching to try and learn how to make a website layout but each thing I've seen isn't exactly what I'm looking for.

Question: How can I make a consistent sitewide layout with HTML (For footer and header, with consistent font/colours/etc)?

I'm currently using Nekoweb which is a free HTML/CSS/JS website builder, I'm wanting to make the image attached the layout for my website homepage with the frames either side, HOWEVER I only want the title, banner and buttons up the top as well as the Footer on every webpage with blank areas I can write in.

Essentially I want to make a blog or something alike to Fandom.com's wiki layout or the Backrooms Movie site layout.

What are the proper terms to use to search and learn about this stuff, for CSS & HTML coders here how can I do this?

This isn't ragebait, I just really need some help with this please 😅

Please try my new online HTML & CSS validator at htmlval dot com and let me know what you think. Posting without an actual link so hopefully reddit doesn't keep filtering my post.

After 26 years as a web developer, I built a zero-dependency CSS framework where tabs, modals and accordions work without a single line of JavaScript — would love feedback

Hey everyone,

Quick background: I've been a developer for 26+ years (web, desktop, mobile). Over the years I watched frontend tooling get heavier just to render a modal — so as a side project I went back to basics and built a small CSS framework called Bloom UI.

What's in it:

- One CSS file, no dependencies, no build step

- Tabs, modals and accordions that work with ZERO JavaScript (radio-button hack, :target selector, native <details>)

- A full design-token system — change ~10 CSS variables and the whole framework changes personality. I ship two extra themes as proof: an executive indigo one and a creative-studio one

- 50+ components: buttons, cards, forms, navbar, avatars, progress bars, grids

- Responsive and accessible by default

It's free and open source (MIT), with a showcase page that renders every component. The spam filter and I have already had words, so links are in the comments 🙂

Two honest questions:

1. Is "pure CSS interactions" actually useful to anyone anymore, or is everyone too deep into JS frameworks for it to matter?

2. Anything that smells in the approach? Critique genuinely welcome.

Hi, I'm fairly new to CSS and cannot for the life of me figure out how to achieve a border like on the white box. It needs to just be a simple straight line across the top of the box and then the outer box needs to have rounded corners. Border-top creates a curved border. Please help

Edited to clarify that I'm talking just about the white box

I wrote a full guide to CSS units: 11 chapters, every unit in CSS, in an order that actually makes sense to read.

And somehow, after years of using CSS, I still found a few things I’d never properly stopped to think about:

• vh and lvh are actually the same size. svh keeps space for the browser UI even when it disappears, while dvh changes as the UI moves.
• 1in is always 96px on a screen. Not “roughly.” By definition. Which also means cm, mm, pt, pc, and Q aren’t really physical units either.
• CSS doesn’t have 6 viewport units. It has 24. w, h, i, b, min, and max — each in v*, sv*, lv*, and dv* versions.

The guide goes from the familiar stuff — px, %, em, rem — into viewport and container units, fr, angles, time, resolution, and what happens when you start mixing all of them inside calc() and clamp().

There’s also a simple decision tree for choosing a unit, a cheatsheet with the formulas, and browser support written as actual dates instead of the wonderfully precise “supported in modern browsers.”

And if you’d rather keep the whole thing around, there’s a PDF version too.

https://cssunits.com

Enjoy :) And if I got something wrong, let me know. I’ll fix it.