N-gated Hacker NewsNov 4
🌍 A CSS-only terrain generator? 😂 Because who needs functional 3D modeling software when you can painstakingly craft your own mediocre mountains in CSS! Get ready to spend your weekend rotating, tilting, and zooming your way to pixelated paradise. 🙃
https://terra.layoutit.com #CSSonly #TerrainGenerator #WeekendProject #PixelArt #FunWithCSS #HackerNews #ngated
Layoutit Terra - CSS Terrain Generator

An interactive CSS terrain generator. Define a grid and generate your terrain!

Hacker NewsNov 4

A CSS-Only Terrain Generator

https://terra.layoutit.com

#HackerNews #CSSOnly #TerrainGenerator #WebDevelopment #DesignTools

Layoutit Terra - CSS Terrain Generator

An interactive CSS terrain generator. Define a grid and generate your terrain!

Hacker NewsOct 2

Visual loading states for Turbo Frames with CSS only

https://railsdesigner.com/visual-loading-turbo-frames/

#HackerNews #VisualLoadingStates #TurboFrames #CSSOnly #WebDevelopment #RailsDesigner

Visual loading states for Turbo Frames
with CSS only

Learn how to add instant loading feedback to your Turbo Frames without JavaScript. I’ll walk you through using the aria-busy state with CSS pseudo-elements to show text or animated SVG spinners during slow requests.

Rails Designer
Show threadPixelcode Apps ​Jul 7, 2025

@fnohe It's actually fairly easy to create a #CssOnly dark mode: Two radio buttons let the user toggle between light/dark. In my stylesheet, I've added an `html:has(#dark-mode:checked)` rule which applies the dark theme. With more #CSS, only one button is visible at a time and both buttons look like regular ones (not like typical radio buttons). #WebDev

You can see it in action on https://blog.forgoodeyesonly.eu and https://forgoodeyesonly.eu.

I've published a #CodePen demo too: https://codepen.io/realpixelcode/pen/KwpOjeW

All blog posts | For Good Eyes Only Blog

The purpose of this Free Ethical licence is promoting a sustainable and dignified world by attaching conditions of justice and morality to the use and re-distribution of licensed works.

For Good Eyes Only Blog
Pixelcode Apps ​Jul 1, 2025

So I made a thing: #russia​n-speaking visitors are now greeted with an anti-war popup on https://forgoodeyesonly.eu and https://blog.forgoodeyesonly.eu! 🇺🇦

Feel free to copy it to your own website! You can try it out without changing your browser's language on Codepen: https://codepen.io/realpixelcode/pen/RNPOmdw

And, yes, you can adjust it to be shown without JavaScript (but to all visitors then), because the popup is actually just an #HTML details element. 😎

#StandWithUkraine #Ukraine #WebDev #EthicalWebDev #CSS #CssOnly

Jon LunmanMay 2, 2025

Hey #CSS folks, I have a #CssOnly challenge for you.

https://codepen.io/jlunman/pen/RNwrRBo

Challenge: CSS-only Multi-Selection Detection

...

alephoto85    Apr 20, 2025
Every once in a while I like a change but this time I'm playing at home 🤪🤪🤪

#blog #guufITA #webdev #cssonly #fuckjs #working #zola #ssg

Hacker NewsApr 3, 2025

Minimal CSS-only blurry image placeholders

https://leanrada.com/notes/css-only-lqip/

#HackerNews #MinimalCSS #BlurryImage #Placeholders #CSSOnly #WebDesign

Minimal CSS-only blurry image placeholders

Show threadBojidar MarinovMar 28, 2025

Also, new article's up! Exploring how I made a CSS-only slideshow with scroll snapping (plus some quick notes on radio-button approaches) 😊
You can even navigate the slideshow with arrow keys!

Overall, I'm really happy to see CSS features to control scroll behavior without JS now! Scroll snap is a joy to use, and opens the door to a lot of easy-to-do customization that required a lot of carefully managed scroll-linked event listeners before ✨

https://bojidar-bg.dev/blog/2025-03-28-css-slideshow/

#CSS #CssOnly #webdev

Bertrand KaernelMar 25, 2025

Une petite expérimentation avec des #SVG animés. Le principe est simple. Une forme SVG animée par un filtre grace à la balise feTurbulence. #CssOnly

https://codepen.io/BKaernel/pen/YzRXYOx

SVG animation with filter feTurbulence

...