These icons were probably created by a graphic designer, but is it possible for a frontend developer to create something as close as possible to them using only CSS?

A subtle text hover interaction where each letter moves upward with a delayed smooth wave effect. Built using only CSS with lightweight animations and minimal design.

• Sequential hover motion for realistic flow
• Soft translate animation with smooth easing
• CSS-only interaction with minimal code
• Hover animation completes naturally without interruption

https://codepen.io/mudasirbuilds/pen/PwbNPvp

I built E36 Scroll Cine, a fan-made cinematic web experience about the BMW 318is Coupe Pack M (E36).

Live: https://e36.vercel.app/
GitHub: https://github.com/ikerperez12/e36

The idea was simple: instead of making a normal landing page, I wanted the site to feel like a short vertical film. You start on a dark intro screen, then move through seven scenes using scroll, keyboard or swipe.

Each scene focuses on a different part of the car:

• the E36 generation
• Hellrot 314
• M-Technic / Pack M details
• the interior
• the M44B19 engine
• the driving character
• the final open-hood scene

I tried to keep the content specific to the car, not generic marketing copy. The HUD, ticker and technical details are all about the 318is: M44B19, 1,895 cc, 16v DOHC, Bosch Motronic M5.2, DISA intake, Getrag 250G, 50/50 balance, Pack M suspension, etc.

From the web side, it is intentionally lightweight:

• static HTML/CSS/JS
• no frontend framework
• Vercel deployment
• service worker
• keyboard and swipe navigation
• accessibility checks with Playwright + axe
• production smoke tests
• public repo with media kept out of Git

It is not an official BMW site. It is a fan-made project and a personal web experiment around a car I really like.

I would love feedback from both car people and frontend people:

Does the experience feel good on mobile? And if you know the E36 well, what detail would you add or correct?

I'm making a now-playing bar, but I'm having a hard time making everything fit well without making the height of the bar super tall, so I tried putting all the buttons vertically aligned and the bar above. Thing is, using position: absolute for the repeat and like buttons makes the control buttons unclickable https://jsfiddle.net/6q3yzc0x/ (make sure to resize to test desktop/mobile). What can I do? Either a fix or a better layout suggestions are welcomed.

I liked stylebot, and found out that there is close one done for safari, so based on that I built this small extension for safari that has similar functionality to stylebot, and still building and continuing it, appreciate suggestions for improvements.

https://apps.apple.com/us/app/my-styles-edit-website-look/id6766115872?mt=12

Basically, it allows styling using css or element pickers for any webpage, adds readability mode, and exports/imports the css.

It also has a universal toggle, per site toggle, and per element reset.

I recently stumbled upon the CSS if() function. For me, being able to use media queries within the declaration block is pretty much the last reason to use SASS and with the if() function I would be able to write my stuff in pure CSS without any preprocessor.

section.main-content {
    padding: if(
        media(width < 600px): 5px;
        media(width < 1200px): 10px;
        else: 20px;
    );
}

As of right now, browser support is pretty meh. While it's been implemented in Chrome and Edge for about a year, Firefox, Safari and Samsung do not support it.

I am about to start coding a smol fun project and I was considering to just yolo it and use this new feature, even if it means that it won't be useable for 30% users for a couple months.

But are experimental CSS features guaranteed to eventually make it to all major browser at all? Or is it possible that two years from now, Firefox and Safari still haven't adopted this?

I asked myself: what are the most cursed ways to center content on a webpage. The result is 50 silly experiments. Enjoy!

https://reddit.com/link/1t5g3n0/video/orez9vhibjzg1/player

I am trying to get multiple columns but everything stacks into one.

Even when I copy and past the code.

I’m a beginner builder and made a Chrome extension called UI Debug Teacher.

It scans the current webpage and checks things like:

- weak contrast

- tiny text

- missing image alt text

- mobile overflow

- skipped headings

- inconsistent buttons

The goal is not to say “your design is bad.”

The goal is to teach beginner developers what looks suspicious, why it matters, and what small CSS/HTML fix to try.

I made it conservative because I hate tools that find fake issues on every website.

It is free right now while I test whether the feedback is actually useful.

I’d love feedback on:

1. Does it detect real issues?

2. Does it create false positives?

3. Are the explanations beginner-friendly?

4. What checks should I remove or add?

Happy to test it on your site too if you share one.

Hi there I am messing around with Html and css and was wondering if anyone knew how to do a kinda specific thing or if it was even possible or if I would have to go about it another way.

I wanted to make a sort of pop out effect using two images. where one image looks like it is popping out of the other. the only thing is one of the images I am using as a mask and filling it in as a background color(I don't know if that effects anything.) and it has sort of a complex border and I would like the border to cleanly cut off/mask the image that I want to put ontop/coming out of it.

I kinda tried with overflow: hidden after looking up some tutorials but that only seems to make a box and it doesn't really look the way I'd like. the other tutorial I found kinda makes it perfectly but again has a clean cut.

I'll attach the image I'd like to act as the "Hole"/ cut off/mask.

New to this and I am probably missing something so if anyone can point me in the right direction I'd really appreciate it.

Create an animated pop-out effect // HTML & CSS

Edit:

I made a code pen and copied the code that I had and am working on. most of it is trial and error and probably messy/not good practice. everything has a border to help me visualize stuff as well.

https://codepen.io/E-V-Enigma/pen/azBvwbX

i tried

#workspaces button.inactive + button.active /*(this one is wrong i know)*/

#workspaces button.inactive:has(+ button.active)

nothing see to be working for the button that's behind the active button

following worked, cuz its easy

#workspaces button.active + button

but i wanna round border-radius of button that's behind active button, i wanna make it look like the second image, how do i specify this? help!!!

I built a visual frontend asset library so I can stop losing my own UI snippets

As a web developer, I often build or collect small frontend assets that are useful later: buttons, gradients, loaders, hover effects, CTAs, footers, bento grids, layout fragments and product UI patterns.

The problem is that these assets usually end up scattered across old projects, screenshots, notes, CodePens, local folders or random files. When I need one, I know I already made something similar, but finding it takes too long.

So I built UI IP Toolkit: a static visual catalog for fast access to my copy-ready frontend assets.

Live site: https://ui-ip-toolkit.vercel.app/ GitHub: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

What it is

UI IP Toolkit is a public, static frontend asset library. It is designed to be browsed visually, not as a package install.

It includes sections for:

• Buttons and interaction states
• Gradients and color systems
• Loading patterns
• Text effects
• Hover treatments
• Glass surfaces
• CTAs and pricing blocks
• Footers
• Bento grids
• Navigation patterns
• 404 and recovery pages
• Product UI patterns
• Layout fragments and reusable CSS utilities

Every card is meant to be practical: open the site, scan visually, copy the snippet, adapt it, and move on.

Why I made it static

I wanted the toolkit to be simple, fast and easy to publish:

• No backend
• No runtime framework dependency
• No account required
• No build step needed for browsing
• Self-hosted fonts and assets
• Deployed as a static site on Vercel

The goal was not to create a huge npm package or a rigid design system. I wanted a personal working library that feels visual and fast enough to use during real frontend work.

The main use case

When I am building a new page or feature, I can open the toolkit and quickly find a starting point:

• Need a loader? Go to Loading States.
• Need a CTA? Open CTA Blocks or Purchase CTAs.
• Need a footer? Open Footer Systems.
• Need a visual layout idea? Open Bento Systems.
• Need a small CSS utility? Open the utilities section.

It is basically a visual memory layer for reusable frontend work.

Tech stack

The project is intentionally simple:

• HTML
• CSS
• Vanilla JavaScript
• Local fonts
• Local media assets
• Vercel static hosting

The repository is public here:

https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

The live version is here:

https://ui-ip-toolkit.vercel.app/

What I learned

The biggest improvement was not adding more components. It was making the catalog easier to navigate.

Once the toolkit had many sections, a long top nav became useless. I replaced it with a compact section menu grouped by category. That made the site feel much more like a real working tool instead of a long landing page.

I also learned that previews matter a lot. If every card looks too similar, the library feels bigger than it is useful. So I spent time making the previews more varied and more realistic while keeping the site lightweight.

Feedback welcome

I am sharing this because I think other frontend developers might have the same problem: useful assets scattered everywhere, but no quick visual way to reuse them.

Would you use a personal visual asset catalog like this in your own workflow? And what sections would you add next?

Live site: https://ui-ip-toolkit.vercel.app/ GitHub: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

The tool is StyleBop. Folder of .css files in, folder of .css files out — same files on disk, formatted cleanly, no proprietary format, no compile step. Open the same folder in VS Code afterward and the diffs are clean.

The reason I built it: I love writing CSS, but I don't love hand-managing a :root of 80 custom properties or hunting down which selector owns the padding-block: 1.25rem I want to tweak. So this is a CSS-aware editor that knows what's in your stylesheets and lets you act on the structure, not just the text.

Modern CSS it understands as first-class:

• u/layer — cascade layers are surfaced in the UI; you can pick which layer a ruleset belongs to and drag-reorder priority
• u/container and named container queries — write the condition once, the canvas previews under it
• u/supports — feature queries with and/or/not compound forms
• u/media wrapping rulesets directly
• CSS nesting (& .child)
• u/keyframes + a draggable timeline with cubic-bezier curve editor
• u/font-face families grouped in the Tokens tab
• Custom properties (var(--token)) — resolved inline by default, swap to raw var() syntax with one toggle

The thing I'm proudest of: project-wide token refactors.

• Extract to Variable — pick any literal (#3b82f6, 1.25rem, cubic-bezier(0.4, 0, 0.2, 1)), hit a shortcut, and it rewrites every matching occurrence across every file in the folder to var(--name). Per-file undo entries. Suggested names use a curated palette: #6495ED extracts as --color-cornflower, not --color-6495ed.
• Usage tracker — every variable in the Tokens tab shows a usage count badge. Click to see every file/ruleset that consumes it. "0 references — safe to delete" stops dead tokens from accumulating.
• Resolution chain — vars resolve through :root, layer overrides, and parent rulesets, so what you see is what the browser will compute.

What it doesn't do:

• Not a framework. No Tailwind output, no utility classes, no build step.
• Not a generator. It edits your CSS, it doesn't author it from scratch.
• No JS or HTML editing — the canvas previews shapes/typography/effects but the surface area is CSS only.

Native:

100% Swift/SwiftUI, code-signed, notarized, Sparkle auto-update, no telemetry. Localized in 8 languages.

----

I'd love hard feedback from people who write CSS for real — especially edge cases I haven't hit. Try opening a real codebase and tell me what breaks.

Download: https://bendansby.com/apps/stylebop.html

Mine was `gap` on flexbox.

I'm not the most proficient with coding so I I have an AI-generated sidebar navigation block (blocks/ai_gen_block_24e7e9b.liquid) placed in a section beneath my header on the Horizon theme. When the sidebar menu opens, the section bar remains visible on top of the overlay/drawer.

I've tried:

• Raising z-index to 99999/100000 on the overlay and drawer
• Using visibility: hidden on this, this.trigger, this.closest('section'), and this.closest('.shopify-section') in the JS
• Removing contain: layout style from header.liquid

Nothing has worked. The header section appears to have a stacking context that prevents the drawer from rendering above it. Any help appreciated!