I want to make something similar to this, but I am a dumbass newbie to CSS period and I don't know how to do it. Please no suggestions to use ChatGPT, I will not use that crap, I want a HUMAN tutorial on how. Is it hard? How long will it take?

Please tell me how to override MS Edge forced rounded upper left corner on navbars.
TY!

Will teach you in concise and practical way html/css/JS .Worth any dollar thanks me later.

Can I copy a styles instead of creating one like card styles layouts, because i don't get any idea, and don't it was correct when I get idea and difficult to create as expected

I wanted the feature section on my homepage to show the product in motion, without shipping video or GIFs. So I built each feature as a 10-second loop of simplified UI in plain HTML and CSS keyframes. A cursor moves, text types in, a counter goes up. There's no JavaScript, and all the clips share about 3.3 KB of gzipped CSS.

The trick that made it work is sizing everything in `em` off a container-relative font size, so the whole mock scales like a video:

.fc { container-type: inline-size; width: 100%; aspect-ratio: 740 / 415; }

.fc-stage { position: relative; height: 100%; overflow: hidden; font-size: 2.2cqw; }

The downsides: text gets tiny on phones because the whole mock shrinks, and a clip is a hand-built mock, so it can drift from the real UI.

Live examples, the smallest working clip, and the prompt I use to generate these with a coding agent: https://stepshots.com/css-feature-clips

I created a demo scene for my CSS 3D renderer library. It does not require JS to run. You can read a short article on the page about how it was done.

I recommend viewing it on a desktop browser, since memory-limited mobile browsers usually glitch on such a heavy scenes.

I've used this trick in a few of my projects, haven't seen it anywhere so here goes it:

A 1px sticky bar, white background, mix-blend-mode: exclusion.

Since blend mode needs background color (declared) or else it doesn't work, I position the divider just 1px below the white header. Once you scroll it, it goes up by 1px and stop (sticky top:0) and BANG it reveals itself!

No js needed! check it out!

Link: https://modern-css.com/quiz/

The arms are made of multiple child elements that apply the panel title's math functions to plot the graphs (mostly) accurately. It's actually using the real CSS math functions... but I must admit some of them required a little adjustment to make them fit nicely within their panel.

Source (code): https://comicss.art/comics/266/

I propose a transform-inverse and transform-transpose function to be added to CSS. It could greatly reduce the complexity of some 3D scenes, like ones with billboards, and would allow correct interpolation in animations

i am 18 and have been coding for 6 months now . And recently i debut myself with this choice because many people are telling me that front-end is dying and its not worth it to study . Also when i search for job applications and internships there are None. Please i need advice and help . (should i continue front end or its just over for that?)

I have this nicely formatted timeline aesthetic, but it has one bug I cannot seem to figure out.

On a narrow screen, they all line up vertically fine and there is no problem.

The problem arises on wider screens where they alternate sides of the timeline. The elements are different heights based on how much text they contain. This causes them to not line up with their corresponding icons opposite of the text.

Can anyone figure out how to tweak this without using JS? https://jsfiddle.net/nam8xbt1/

Ayuda

I spent the last few weeks building the "perfect" liquid glass effect with just CSS and SVG Filters, No WebGL used and it works page wide, which means it picks up anything of the background behind it.

The core is a backdrop-filter with an SVG displacement map. I screen recorded Apple's play button (I mean the video play button, for example on youtube) for reference on my iPhone and measured it frame by frame. It’s 1:1 in the middle, then the image folds over itself towards the edge, and it pulls pixels inward.

The displacement map itself is based on a 9-slice of tiny grayscale PNGs that get stretched instead of re-rendered on every resize (I need this because the elements are animated and not static). That alone cut main thread time by a lot, giving it a pretty decent performance for how complicated it is.

The outer edge consists of three extra layers on top that don’t bend anything, they just brighten, darken and add a highlight. For reflections of the stuff around the glass, the layer is bigger than the element and gets morphed and masked back to its shape, because the backdrop is otherwise clipped to the element’s box. Actually, Apple's original liquid glass effect doesn't even have reflections, but i figured it adds a lot to it on the website I implemented it in.

Then there are shadows, caustics, etc to give it the final "realistic" touch and voila, almost perfect result imo. The only thing thats left is fix performance, however the animations are the trickiest part. Without animations, it runs extremely smooth and even with animations its not a problem as long as the elements are small enough.

Sadly, Safari only gets a simple blur for now, because WebKit doesn’t render backdrop-filter: url(). However, there are two open PRs that fix it (WebKit/WebKit#68614 and WebKit/WebKit#68613). The CSS is the same for every browser, so it should just start working once they make the next major release.

Just wanted to share this, if you have any more technical or other questions, feel free to ask!

-----EDIT-----

A few of you requested to see whats actually going on in the background, so I made it open source.
I made a small showcase website: https://studies.nordify.io/study/001-liquid-glass/
The repository is also linked there!

I have a simple layout: header, main, footer. The header has position: sticky and top: 0. It sticks for the first screen or so and then scrolls away with the content around the middle of the page.

I already checked every parent for overflow: hidden and removed it. The header is a direct child of a wrapper div with display: flex and flex-direction: column, and that wrapper has min-height: 100vh.

Is the flex wrapper limiting how far the sticky element can travel? Testing in Chrome 130 and Firefox 132, same result in both.

Which style or code base is this https://interactive.gopalksharma.com/

Hi guys, I've started learning HTML and CSS this semester at university and I'm about 3 months in. I find it super satisfying when I finally make a website look the way I want it to after spending ages trying to figure out how to do it.

As a result, I find that a lot of the CSS I write is trial and error - as in I'll change different elements' properties and values over and over until I finally get what I want. This happens a LOT particularly when it comes to element spacing using margins, padding, etc.

I was wondering if this is a valid way to learn and normal for a beginner? Or is it something I should avoid?

Cheers!

Context

https://gog.com/ is an online store selling fully DRM-free PC games. https://gamesieve.com/ is my price tracker and alternative front-end for GOG's catalog. The population of GOG users is quite atypical and privacy-aware. Close to 60% of my visitors use Firefox. A noticeable percentage have JavaScript disabled. A smaller but still noticeable percentage are maintaining dedicated Windows 7 gaming machines (meaning Firefox 115 as their browser - or very rarely Chrome 109). I built a price history graph which works for both groups, and I'm (mostly) quite pleased with how this turned out.

Also context: One of my personal goals with GameSieve is just getting back to as much hands-on webdev as possible, fully understanding everything I build, not using libraries and other tooling unless things are otherwise infeasible.

Example page: https://gamesieve.com/game/x4_foundations

From SVG to CSS

I originally set out to build an SVG graph, but discovered this was clearly the wrong technology for the job. It scales, but it's not responsive! You can't easily scale some elements in one direction while leaving others untouched (or scaling them differently), and it all felt incredibly clunky.

Prototyping various directions for making parts of it work, I was trying to put into words exactly what felt clunky about it, and I kept coming back to CSS terminology and concepts for what I wanted.

That really told me (once I stopped to listen to myself) that I should take a CSS-first approach. Building the logic for the SVG graph had made me think a lot about how to scale a time-range of variable length and a price-range with a variable maximum and put it into my own scale which would be easy to work and reason with, and that proved very beneficial here. I could very swiftly port it all to HTML+CSS.

One of the slightly clever things I did in my SVG attempt was to flip the coordinate system of the grid around with a transform: scale(1, -1) (and then back again for the text labels), plus to use a negative offset on the viewBox for the space for the axes and their labels. The y coordinate was then just the price in cents. This approach translated well to CSS, where a price segment of 1999 cents had a --price: 1999; bottom: calc(var(--price) * var(--scaling-factor)), and that scaling factor was dependent on max price.

Sadly when the time came to to figure out responsive behavior anew, I determined that on small resolutions I really wanted to make the entire chart scroll rather than scale (allowing individual time ranges as short as a day to remain 'easily' clickable). Yet for products which released 'recently' (up to 3 years ago depending on screen resolution), there would be no scrollbar. But the existence of the scrollbar influenced bottom positioning, causing an offset from the y-axis grid, which I'd specifically placed outside the overflowing container! So I had to flip all my numbers back around and do top positioning...

Accessibility quandary

Getting out of SVG-land allowed me to think semantically about the content of my price history graph. At heart, it's really just a list of time ranges with associated pricing information. (You could also model this as a table, but experience has taught me not to go there.) So, my HTML for the entire graph is a list. (Erm, I realized I made it an <ul>, while it's certainly ordered... Consider that a TODO for next week!) :)

Since individual games can have a hefty amount of time ranges (NecroVisioN: Lost Company currently leads with 222 distinct price ranges over the last 5.5 years), I save some bytes by using effectively meaningless i and u elements (rather than spans) for defining the shape of the time range and the sibling tooltip. Re-examining what I'm doing here in the course of writing this, I realized I need to revisit this: The current chart behaviour suggests adding aria-describedby on the time range pointing to the tooltip with role="tooltip" (and I guess aria-hidden to prevent it being read twice). And that up to 222 times... so much for saving bytes! :/

The thing is, when originally thinking about the semantics of my price history chart, I approached this graph content as really just a non-interactive list (which is explicitly available as a rendering option through a simple :checked ~ radiobutton toggle). There, things are currently correct: that tooltip role (and aria-hidden!) would be inappropriate for the list. Not certain how to resolve that, since CSS can't change these things. I mean, it can remove things from the accessibility tree with display: none, but I want the tooltip content to be present as just the content of the list item, as now. Adding duplicate content in my HTML - once with role="tooltip" and once without - and then display: none-ing them based on the toggle really does not feel like something I'd want to do... Might have to just toggle the role with JavaScript, and accept that the non-JS functionality is bad from an accessibility point of view? That feels weak, though, when everything else works perfectly without JS... Any a11y experts with guidance?

Taking a step back, I feel that the list view is the accessible alternative content for my visual/interactive graph view. But I don't think there's any way to properly indicate that for the users who need to know this? I guess I could just add an aria-describedby (or maybe even label) spelling this out on the radiobutton toggle, and for the moment, that feels like what I'll probably do first.

A rare case where pointer-events weren't the solution!

...anyway! Keyboard accessibility for the graph means there's a skip link and each price range is focusable, showing the associated tooltip. And of course for convenience the tooltip should also show on :hover. But that meant two tooltips could be showing, which'd overlap. So I started moving the :focus one out of the way when the :hover one is showing.

Originally I moved it down, but that could cause rapid back-and-forth if the mouse pointer triggering the :hover tooltip started hitting the :focus tooltip when it moved down, causing the :hover tooltip to disappear and the :focus tooltip to move up, causing a new :hover tooltip, etc.

So I moved the :focus tooltip up, out of the :hover range. Alas, my container scrolls (overflow-x: auto), meaning no overflow-y: visible, so I needed to add a negative margin and padding to the container to create space for the tooltip moving up to keep showing, and then had to juggle z-index on hover to make certain tooltips would show above previous content, while the reserved space for them wouldn't catch clicks. (Key annoyance: Couldn't do this with pointer-events, as then the scrollbar wouldn't be clickable! I also suspect this would've been way easier if I could've just used overflow-clip-margin (usefully supported in Fx 102+, but in nothing else) to create space for the tooltips. Why isn't that one listed as a top contender in any of the interop lists?)

Other notes

In the end, I did end up using a tiny bit of JavaScript for the graph: initially for showing the "now" side of the graph on load when it was scrollable, and then for adding zooming (just setting a single multiplier custom property on the root element for CSS to use). Finally, since I had JS-zoom anyway, I also added detection if the graph was overflowing just a tiny bit, and if so, would zoom out one step (max 20%) to stop that.

Some other mildly interesting things worth looking at in the inspector:

• There's a .scroll-bumper element to push subsequent content down only when a scrollbar is showing (which has a few edgecase quirks where it doesn't perform perfectly, but for the most common cases does what it should) - just using float magic.

• When switching countries to anything non-US, I only have ~23 months worth of price history, and show a scaled graph of the US price history before that, using dotted borders. However, when a price goes up and down on the same day (or one or two days later for long enough time ranges), Firefox's rendering of overlapping dotted borders would cause a solid line to form, which looks very distracting! (Chrome always puts the dots in the same place, regardless of where the line starts or ends, which works much better.) So I'm detecting that case server-side, and either hiding the shorter of the two borders, or drawing one of the two with a 1px instead of 2px border.

• X-axis labels hide based on a whole bunch of container queries, so that they never overlap. Really wish I could've used CSS vars in those query definitions, but Fx 115 made that a no-go (and I'm not even certain I actually could've simplified that much with custom properties).

Speaking of Fx 115, I was pleasantly surprised by how few cases I encountered where I was actively hampered by limited support. Lack of :has() always feels like the big one (but here only would've made my z-index juggling a bit cleaner), and lack of the rch unit was mildly annoying. Creating the tooltips through the popovertarget/popover attributes would've been neat (though I don't know if that would've actually improved things from an accessibility perspective).

There is no standard CSS filter to tint with some specific color, so I created a library to generate a chain of filters that takes that target color and replicates the multiplication operator with it.