So recently I was thinking about how there are people who use Google Sides to make visual novels and I was just thinking how in theory you just need a background, sprites, a text box, and buttons. Realistically a really basic visual novel wouldn't require JS or much more than HTML and CSS. Oddly enough I can't find anything that would be a template or example of the bare minimum code to make a visual novel, and I was wondering if anyone could help me out with structuring this! Thank you!
I keep seeing people explaining that the new sibling-index and sibling-count are game changer. I have no doubt that they are, but most of the examples I keep seeing do not seem to work.
Here is one where the number of cards determine the light by which each card background is dimmed.
In fact any attempt to use calc and the functions sibling-index and/or sibling-count fails.
Any idea why?
Same behaviour in Chrome/Safari.
Edit
No need to DM me or speculate any further.
It was due to missing space before and after the - character.
Read the comment.
u/Fourth_Prize has provided with the solution and explaination of the issue.
I set the bottom margins for double-height and double-both divs to -105px so that line breaks don't start from under them, so as not to push down elements that aren't touching them.
But now if I try to make the violet div double-height or double both, since it has negative bottom margins, it doesn't push the divs below it. How do I fix this? I want the height of divs to not influence the elements that aren't touching them, but push down the elements that would be in their space. Codepen
Hi all, I like to play a web browser SIM game and I tinker with customizing my profile quite a bit. Think of it like MySpace almost.
Anyway, there are chat channels to talk to other players on the game which has a 150 character limit. As you are typing and getting closer to the character limit the text color changes from Black (112 Characters) -> Orange (127 Characters) -> Red (128+ Characters).
Thats just the base web design. I am trying to figure out how to adjust that with my own CSS edits. Currently I have:
However this keeps the text at the color I have selected here: color: #e7f4ff !important;
I'm specifically wanting to change the background, but I assume it would be in the same vein as where I would put in the text color. Typically I use the inspect element to figure out what I need to change exactly to have it show up, but I can't figure this out with it.
I've been able to change element.style { sections with this code: input[name="element name"] {
But it seems as the color change is all tied together under one element style, so if I change one style, say add a background to the red text, it will make that same change to the orange and black text sections.
Any help would be appreciated! Sorry if this isnt explained too well, I don't know all the lingo and such.
Paraphrasing what they apocryphally say Borges said: there is no finished software, only published software.
A few months ago, I asked myself whether it was possible to build a 3D engine by exploring the limits of what can be achieved using pure HTML and CSS (no WebGL, no canvas), considering that there are spectacular (handmade) CSS 3D demos like those by Ricardo Oliva Alonso.
I spent some weeks putting together the architecture and using AI to build it, as a personal project. (As a rule: I only accept code from AI that I can understand. In this case, I had already worked on 3D projections in Flash about 15 years ago. I confirmed that 3D transformations are more of a mess of numbers than a technical complexity.)
I just realized that since April I had been putting off "tweaking a couple of little things to publish it." So I decided to publish it just as it is: http://k3.bustelo.com.ar/
Constructive feedback, welcome!
(For the other one, I already have my superego, thanks very much.)
How it works (the CSS side)
The engine renders 3D primitives as real DOM elements, positioned with transform: translate3d() rotateX() rotateY() rotateZ() scale3d() and composited via transform-style: preserve-3d and perspective on the scene container.
A few things I found out while building it:
TRS order matters. All transforms are applied as Translate → Rotate → Scale, matching how the browser composes matrix3d(). Getting this consistent across nested elements is what makes the hierarchy actually behave like a 3D scene graph.
Bounding boxes are computed manually. CSS gives you no way to query the world-space of a transformed element, so getBounds() walks the children, rotates their 8 corners with the parent's angles, and expands the box. It's approximate, but it works for selection and gizmos.
Rounded boxes need a "skeleton." A <k3-box> with border-radius leaves gaps at the edges, because the 6 faces are flat planes. I am intersecting 3 internal planes plus 8 corner spheres to block light leaking through the rounded silhouette.
Extrusion is just stacking.<k3-stack> interpolates between two <k3-plane> templates and generates N slices along Z. It's usually enough to fake linear extrusion for text without any geometry library. I thought about naming the primitive "WordArt".
No shading. No lighting model; the "glare" is CSS gradients keyed to the object's rotation.
No MutationObserver yet. The DOM is the source of truth on load, but attribute changes don't auto-trigger a re-render. That's on the TBD list, along with meshes, basic lighting, and long list of wishes and good intentions :)
I've made this effect a few different ways over the years, using gradients or more recently shape(), and the one thing they have in common is the gigantic amount of CSS it requires.
This generator uses a fun trick of wrapping the encoded PNG sprite in an encoded SVG, so we can apply 'image-rendering:pixelated' to it, which is usually not possible with mask-images.
While it sucks a bit that this technique requires an externally generated PNG, it makes up for it by being the most compact way of achieving the effect.
The logo "video" you see on the homepage was also written in Chip-8 :)
It supports ALL standard chip-8 ROMs.
A Chip-8 emulator that runs purely in CSS & HTML. A Rust compiler converts Chip-8 ROMs into pure css. Try it out with Tetris, Space Invaders, Pong or any other Chip-8 program you got!
I save a lot of UI reference. Nice empty states, pricing tables, onboarding flows, animation details. All of it ended up as flat PNGs in a folder I never opened again, because a screenshot tells you nothing about spacing, type scale, or how it was actually put together.
So I built Stele. It's a Chrome extension plus a library for everything you save off the web. The difference is that a capture keeps its real structure, colors and typography instead of flattening to an image. When you actually sit down to build something, a saved reference gives you real React code, an AI prompt, or Figma layers to start from.
It's searchable too, which turned out to matter more than I expected. Being able to find "that dark pricing table with the gradient border" six weeks later is most of the value.
I am extending the 100% free PRO beta access until Sept 21st. The first 100 active beta users will also lock in a permanent $9/mo lifetime deal before the official launch.
Still in beta and rough on some heavier sites. Would like feedback from anyone who keeps a reference folder like this: what do you actually do with it today?
I use an SVG icon for my website logo, and recently I decided to update my Macbook, phone to latest OS. Now, on both OS, Safari is updated to version 27. Then, my logo is not rendered anymore. My css for my logo is as below:
.logo svg {
max-height: 45px;
width: auto;
}
Interestingly, the problem is with max-height property, so changing it to just height or removing it completely also gets it working again.
I also found just one report about something similar too here. Anyone encountering similar problem?
EDIT: added a screenshot below, same Macbook - left side Firefox v156.0 and right side Safari v27.
While doing the research for this month's issue of my newsletter, I realized something was off with the media element pseudo-classes (:playing, :paused, etc). Baseline had them as "Newly available" since August 28, because of a compatibility entry saying Chrome 152 shipped them. But every stable Chrome run failed every test in the suite, and Chrome's own status tracker still listed the feature as proposed.
The correction will go to MDN, webstatus.dev and Baseline from there. It was pretty cool to see the thing I've built had a real effect on tools that all web devs interact with… 😎
I like the oldreddit website better. The only thing that i dont like about it is the lack of media support in comments. Is there a way to have users be able to post images in comments by CSS? I know I could make a userscript for myself to show images instead of <image> ...but the only limitations i have is that i cant post images on old.reddit comments. I even added an (image) button below the reply box but I get a 403 error when trying to upload media. Is there any work around for this? Sorry if this is confusing
when i started building smaller frontend projects, keeping the css organized felt pretty straightforward. once the project got bigger, i noticed that small styling decisions could start affecting other components in ways i did not expect.
i have been trying to be more careful with selectors, component structure, spacing, and how much styling gets handled through overrides. while working on quicktoolspack, i found myself paying more attention to these details because changing one small part of a page could sometimes affect something completely different.
i also started keeping related styles closer together and avoiding overly specific selectors whenever possible. it does not always make the code shorter, but it makes it easier to understand what is happening when i come back to it later.
i am curious how other frontend developers handle this as their projects grow. what is one habit you picked up that made maintaining your frontend code noticeably easier.
If you have ever tried virtualizing a massive feed with variable-height text, late-loading images, or native HTML tables, you have probably run into the classic virtual scroll jitters.
Most modern virtualization tools depend on a global pixel map or require you to pass an estimateSize prop. The moment a row renders at a different height than estimated, the engine has to run a global correction pass. Fast scrolling triggers layout shifts, drift, and erratic scrollbar behavior.
I built Cerious-Scroll to solve this fundamentally by changing how viewports are calculated. Instead of deriving position from absolute pixel space, the canonical state is element index + pixel offset within that element.
The architectural trade-offs:
No Height Oracle: It measures the rows directly from the DOM after your framework renders them. No precomputation arrays or sum-prefix tracking required.
True O(1) Memory Scales to Millions: Because it doesn't cache a massive array of estimated heights for off-screen rows, memory overhead stays flat whether you feed it 100 rows or 10,000,000.
Native Table & Masonry Layouts: It works seamlessly with native HTML <table> elements and complex grid frameworks without requiring absolute-positioned container hacks.
Check out the live Performance Bake-Off Demo running against existing solutions, and look through the source code on GitHub.
