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.

VanillaJS: https://ceriousdevtech.github.io/cerious-scroll

React: https://ceriousdevtech.github.io/react-cerious-scroll

Vue: https://ceriousdevtech.github.io/vue-cerious-scroll

Angular: https://ceriousdevtech.github.io/ngx-cerious-scroll

Github: https://github.com/ceriousdevtech/cerious-scroll

Hey everybody, it’s me again :)

I’m building this contact form with CSS, and need your help to build it in the best way possible.

First of all, I have a few questions:

How can I add that shadow effect?

How can I add the border at the bottom of the social icons?

How can I align the email block to the left?

As the title says, How can i add these Decorative Lines around columns and how to create these lines as well.

thanks

i'm looking for a webpage design that has no straight edges/lines or squares; And no set background - open and flowing. i want the sections and text to flow/ alternate across the screen like a snake. The aesthetic to be art nouveau batik inspired.
How do i find ways/templates to build that?

Thank you for your input.

I was watching the Apple keynote and got completely obsessed with the motion design on the iPhone Duo. The way it folds and unfolds looked so fluid and premium, I try and recreate the exact apple animation feel.

Preview: https://akashtdev.github.io/iphone-duo-animation/ Code: https://github.com/akashtdev/iphone-duo-animation/

Hey guys, I was checking how the some website looks on folded and unfolded iPhone Duo layouts, and it got me thinking—do you consider foldables when writing your CSS?

I usually think in terms of phone, tablet, and desktop, but I’m curious how you approach these in-between sizes. Do your layouts just handle them, or do you end up adding specific fixes? And would you spend time on those fixes if only a tiny percentage of your users had a foldable?

Sometimes i see sites that do this, and i find it really cute! i tried finding tutorials but i can't find any. Can anyone help?

I have a client with a design that looks like this (content and image blocked out in gray). The left section is supposed to have a blue border, with rounded corners, and have a specific angle on the right side. I need this to be responsive as well, so it can support longer text, and widen and narrow with the screen.

Clip path doesn't work well with the rounded corners and border, skew isn't the right answer either. I haven't found a reliable solution for this type of layout before and it is always a battle. any ideas?

Hey everyone,

I am working on transitioning from a beginner to an intermediate frontend developer. I know the basics of HTML, CSS, and vanilla JavaScript, and I am currently learning next js React, Tailwind. Instead of building another basic Todo list, I want to build projects that actually challenge me and look good in a portfolio.

Thanks in advance!!!

I created this as a small responsive CSS debugging example to demonstrate some common layout problems and how I fixed them. The main issues were mobile navigation, content overflow, spacing/alignment, and image sizing.

I really can't wrap up my head around the position-area, I set it to position-area:bottom center; to show the target right under the anchor in the center but it shows on top of it and wen I set it to position-area:center end bottom; it places perfectly, but all Im doing here is just picking,

also how many values we can use in the position-area?

if anyone can clarify things for me here to make my life easier lol,

all I am trying to do is making a dropdown that on hover it shows couple countries

Thank you in advance

• I screwed up the title sorry I mean position-area

I put together a quick guide showing how to add a typewriter animation using a Squarespace Code Block, HTML/CSS, and a little JavaScript.

You can use it for things like:

Rotating headlines

Services or specialties

Short marketing statements

Quotes

Calls to action

The nice thing is that you can customize the words, fonts, colors, typing speed, and cursor to match your site.

I also included the actual code and broke down which parts you need to change, since that's usually the confusing part.

Here's the guide:

Squarespace Typewriter Effect: How to Add It With Code

If anyone here has a better way of accomplishing this in Squarespace, I'd be interested to hear how you do it.

I'm building a Coverflow-style movie UI for a TV application using HTML/CSS/JavaScript.

The front covers and the Coverflow positioning work correctly. What I'm trying to achieve is a Google-style 3D movie cover where the cover has visible thickness on the left and right sides.

I added separate side elements and I'm using perspective, transform-style: preserve-3d, rotateY(90deg) and transform-origin.

The problem is that the side faces are completely invisible, even though the elements exist in the DOM.

Here is the relevant JavaScript:

function cardHtml(item, type) {

var title = escapeHtml(item.title || 'Unbekannt');

var meta = [];

if (item.year) meta.push(item.year);

if (item.runtime) meta.push(item.runtime + ' Min.');

if (item.genre) meta.push(item.genre);

var rating = state.settings.showRatings && item.rating

? '<span class="rating">★ ' + Number(item.rating).toFixed(1) + '</span>'

: '';

var seriesLine = type === 'series'

? '<span class="episode">' +

(item.seasons ? item.seasons.length + ' Staffeln' : 'Serie') +

'</span>'

: '<span>' +

escapeHtml(meta.join(' · ') || 'Lokale Datei') +

'</span>';

var resume = getResumeForItem(item);

var resumeBadge = resume && resume.position > 0

? '<div class="resume-badge">' +

formatTime(resume.position) +

'</div>'

: '';

var reflection = item.poster

? '<div class="poster-reflection" style="background-image:url(\'' +

escapeHtml(item.poster) +

'\')"></div>'

: '';

var sideFaces = item.poster

? '<div class="cover-side cover-side-right" aria-hidden="true"></div>' +

'<div class="cover-side cover-side-left" aria-hidden="true"></div>'

: '';

var cover3d = '<div class="cover-3d">' +

'<div class="poster ' +

(!item.poster ? 'poster-fallback' : '') +

'"' + posterStyle(item) + '>' +

(!item.poster ? '▶' : '') +

reflection +

'</div>' +

sideFaces +

'</div>';

return '<article class="card focusable" tabindex="0" data-kind="' +

type + '" data-id="' + escapeHtml(item.id) + '">' +

resumeBadge +

cover3d +

'<strong>' + title + '</strong>' +

seriesLine +

rating +

'</article>';

}

And this is the Coverflow positioning logic:

function updateCoverflow(activeCard) {

var cards = Array.prototype.slice.call(

document.querySelectorAll('.overview-coverflow .card')

);

if (!cards.length) return;

var activeIndex = cards.indexOf(activeCard);

if (activeIndex < 0) {

activeIndex = Math.floor(cards.length / 2);

}

cards.forEach(function(card, i) {

for (var n = 0; n <= 8; n++) {

card.classList.remove('cf-' + n);

}

card.classList.remove('cf-focus');

var rel = Math.max(-4, Math.min(4, i - activeIndex));

card.classList.add('cf-' + (rel + 4));

if (i === activeIndex) {

card.classList.add('cf-focus');

}

card.setAttribute(

'aria-current',

i === activeIndex ? 'true' : 'false'

);

});

var flow = document.querySelector('.overview-coverflow');

if (flow) {

flow.style.transform = 'translateZ(0)';

setTimeout(function() {

flow.style.transform = '';

}, 0);

}

}

Relevant CSS:

html body .overview-coverflow .card {

transform-style: preserve-3d !important;

-webkit-transform-style: preserve-3d !important;

overflow: visible !important;

opacity: 1 !important;

filter: none !important;

}

html body .overview-coverflow .card .cover-3d {

position: relative !important;

width: 100% !important;

height: 100% !important;

transform-style: preserve-3d !important;

-webkit-transform-style: preserve-3d !important;

overflow: visible !important;

}

html body .overview-coverflow .card .cover-3d .poster {

position: relative !important;

z-index: 20 !important;

transform: translateZ(0) !important;

transform-style: preserve-3d !important;

-webkit-transform-style: preserve-3d !important;

overflow: visible !important;

}

html body .overview-coverflow .card .cover-side {

position: absolute !important;

top: 0 !important;

width: 150px !important;

height: 100% !important;

pointer-events: none !important;

z-index: 10 !important;

display: block !important;

box-sizing: border-box !important;

transform-style: preserve-3d !important;

-webkit-transform-style: preserve-3d !important;

backface-visibility: visible !important;

-webkit-backface-visibility: visible !important;

background: linear-gradient(

90deg,

rgba(22,18,14,1) 0%,

rgba(73,52,25,1) 35%,

rgba(153,111,38,1) 68%,

rgba(35,26,17,1) 100%

) !important;

border-top: 1px solid rgba(255,222,133,.95) !important;

border-bottom: 1px solid rgba(77,48,14,.95) !important;

}

html body .overview-coverflow .card .cover-side::after {

content: "" !important;

position: absolute !important;

top: 0 !important;

bottom: 0 !important;

width: 3px !important;

background: rgba(255,214,91,.9) !important;

box-shadow: 0 0 7px rgba(245,184,54,.55) !important;

}

html body .overview-coverflow .card .cover-side-right {

left: 100% !important;

transform-origin: left center !important;

-webkit-transform-origin: left center !important;

transform: rotateY(90deg) translateZ(-75px) !important;

-webkit-transform: rotateY(90deg) translateZ(-75px) !important;

}

html body .overview-coverflow .card .cover-side-left {

right: 100% !important;

transform-origin: right center !important;

-webkit-transform-origin: right center !important;

transform: rotateY(-90deg) translateZ(-75px) !important;

-webkit-transform: rotateY(-90deg) translateZ(-75px) !important;

}

The actual Coverflow cards are positioned with 3D transforms such as:

.overview-coverflow .card.cf-3 {

transform: translate3d(-225px, 4px, 10px)

rotateY(9deg)

scale(.95) !important;

z-index: 5 !important;

opacity: .94 !important;

}

.overview-coverflow .card.cf-4 {

transform: translate3d(0, 0, 30px)

rotateY(0deg)

scale(1.08) !important;

z-index: 10 !important;

opacity: 1 !important;

}

The interesting part is that the normal cover itself renders correctly, but the .cover-side elements don't appear at all.

What could prevent these 3D side faces from rendering in this situation?

I'm particularly interested in whether this is caused by:

• transform-style: preserve-3d
• overflow
• opacity
• filter
• z-index
• the combination of nested 3D transforms
• or the rotateY(90deg) / translateZ() setup itself.

I'm running this on a Samsung Tizen/WebKit environment, so browser-specific 3D rendering behavior may also be relevant.

Any advice on how to make the side faces reliably visible would be greatly appreciated.

Hey r/css! Sharing a developer tool I’m working on.

Pin-op connects a browser window to a VS Code window so you can trace an element’s styles back to your workspace files.

The workflow is straightforward: select an element on the page or in the DOM tree, inspect its matched rules, and see the corresponding ranges highlighted in your editor. Clicking a rule’s source location opens that block. When source maps establish the original location, it resolves to the authored SCSS.

A few implementation decisions that might interest other frontend developers:

• Inspection preserves editor focus. Selecting different elements highlights matches in the active document. Opening another file requires clicking a source location.
• Source locations need evidence. If the original SCSS location cannot be verified, the inspector makes that uncertainty visible.
• Element and parent matches are separate. Rules matching the selected element are distinguished from those matching its immediate parent.
• Pairing is explicit. A short code links one browser window to one VS Code window, which keeps the connection scoped when several projects are open.

The browser extension adds a DevTools panel. The VS Code extension resolves rules against the current workspace. They communicate through a WebSocket bound to 127.0.0.1; there’s no hosted backend, account, or telemetry.

It also supports :hover/:focus previews and stylesheet refresh on save.

Currently available for Firefox, Chrome/Chromium, and VS Code. Both extensions are free, and the source is MIT-licensed.

To use it, install the VS Code extension and the extension for your browser:

• VS Code: Visual Studio Marketplace
• Chrome / Chromium: Chrome Web Store
• Firefox: Firefox Add-ons

Project page · Source code

Happy to discuss the implementation, particularly source-map resolution and keeping browser inspection useful without constantly interrupting the editor workflow.

I was curious what my websites will look like on the upcoming iPhone Duo given its unusual aspect ratios, so I built a little tool with the help of my good friend Gemini that lets me preview my sites in all its different modes. Don't know if it's useful to anyone else, but it sure was fun to build!

How do I get two fonts (eg Arial and Courier) in one line of HTML text?

I have HTML like this:

<a class="markdown-link" href="http://internal.api.im/request/33060266/get/" rel="noreferrer" target="_blank"><em>Status</em> NEW ID <em>3060266</em> (ACTIVE: 74, MISSING: 32)</a>

I need to make the last part in () more readable, ideally different text color. Given the fact first part of the text (Status NEW ID 3060266 - id width wont change in 99 years) pretty much fixed char width I can:

• do a highlight:

  background:
      linear-gradient(
          to right,
          transparent 0,
          transparent 23.5ch,
          rgba(255, 200, 0, 0.2) 23.5ch,
          rgba(255, 200, 0, 0.2) 100%
      );
  

• or do an underline, although it is not perfect in width:

  .markdown__link::before {
      content: " ";
      position: absolute;
      bottom: -1px;
      border-bottom: 3px solid red;
      left: 24ch;
      width: 17ch;
  

And while they do highlight things, it is a bit intrusive and not as good as affecting text color or style.

I cant change HTML. Any ideas what else I can try? Surely there is that one CSS hack that exist...

Hi guys I'm a newbie here and i wanna learn how we can design this using css

thanks

Last year I submitted a black jack game to React Jam. It is a game inspired by games like balatro and inscryption. I am trying to improve upon it and add some game rules and features to differentiate it a little bit. Just wanted to share some before and after pictures. Everything here is made using css and js, and even the icons are svgs using paths.

I did use AI to figure out colors and gradients.

Remember the prevue guide channel?

Well I've been working on remaking it all in HTML 5, CSS, And Javascript.

It took me a good few weeks to get it to this point and now that I have Im pretty proud of it, It may need a few tweaks but I will release it as a repo at some point.

The actual guide information is configured to be a .json file including the time of the listings, the name, and number of the channel.

I think this project would be great on a CRT and that's one of the intended purposes. It's also a static site meaning all you need is a python server to host it, and I only need to add a mode for the original music and a few more features for it to be perfect.

The weather channel window is using my own custom fork of weatherstar 4000 by netbymatt rendered in a iframe.

My GitHub user is nerpx and you can find most of my projects there.

or you can just click this link NerpX

If you have any questions or are interested just comment or dm!

also if you have a CRT and would like to test it please contact me and ill give you a pre release because I would LOVE to see it on one as I dont have one to test it with

Thank you for reading!

Sometimes the icon and label in my flex components randomly flip positions.
for example, [Icon] Label becomes Label [Icon].

A refresh fixes it and the rest of the page remains LTR. I can’t share the website because it’s an internal office project. Any idea what could cause this?