#cssonly — Public Fediverse posts

To celebrate something-or-other, I created a retro CRT using only vanilla CSS!

📺 https://codepen.io/ivorjetski/pen/qEaRjBw

No images. No JavaScript. No SASS.

Fully turn-off-and-on-able!

Also a documentary about the making of it: https://www.youtube.com/watch?v=wdNHwIqMFDk

@CodePen #css #cssart #cssonly

🌍 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

🌍 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

🌍 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

🌍 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

A CSS-Only Terrain Generator

https://terra.layoutit.com

#HackerNews #CSSOnly #TerrainGenerator #WebDevelopment #DesignTools

A CSS-Only Terrain Generator

https://terra.layoutit.com

#HackerNews #CSSOnly #TerrainGenerator #WebDevelopment #DesignTools

A CSS-Only Terrain Generator

https://terra.layoutit.com

#HackerNews #CSSOnly #TerrainGenerator #WebDevelopment #DesignTools

A CSS-Only Terrain Generator

https://terra.layoutit.com

#HackerNews #CSSOnly #TerrainGenerator #WebDevelopment #DesignTools

A CSS-Only Terrain Generator

https://terra.layoutit.com

#HackerNews #CSSOnly #TerrainGenerator #WebDevelopment #DesignTools

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

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

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

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

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

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

Visual loading states for Turbo Frames with CSS only

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

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

@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

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

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

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

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

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

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

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

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

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

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

sharing here the website i made for the architecture practice specs 👉👉 https://specs.work

the site is built minimally with static site generator #pelican and #cssonly and hosted in BE with Domaine Public :)

I've released a version of the theme (SpeCSS), with a lot of documentation on my gitlab, if anyone wants to use it as a starter kit for a portfolio site. ⚙️ https://gitlab.com/mar_ver/specss/ (edit: link was wrong) ⚙️

License is CC-BY-SA-NC

#portfolio #css #pelican #lowtechwebsite #opensource #webdev

Could this be the first ever responsive Music Video? 🎵

https://youtube.com/watch?v=V0nsD2bEqkg
https://codepen.io/ivorjetski/pen/jOgEyPO

@CodePen

#css #frontend #html #cssonly #cssart #music #musicss #video

I retro-fitted animation-timeline to my old #purecss King of Hearts, to see how easy it would be... It was too easy! 🤩 Animation-timeline is amazing!! 🥳

https://codepen.io/ivorjetski/pen/VwOraXv
via
@CodePen

#css #cssart #cssartist #cssonly #frontend

Finally got the JS-free user selectable themes integrated into sidneys1.com :)

#jsfree #cssonly #personalwebsite #blog #webdev

🎠 Today, Maxwell Barvian shares three amazing carousel experiments made with CSS scroll-driven animations, based on Francesco Zagami’s designs! No JavaScript!

🧪 Highly experimental, but oh-so-beautiful! 😍

Have a look: https://tympanus.net/codrops/?p=75188

#css #cssonly #animation #frontend #webdevelopment #creativecoding

Surely there's a #CSS-only way to create a product spinner on hover using slices and 36 images. Shall I go down this rabbit hole?
#LukeDorny7 #cssOnly

🎢 Get the lowdown on CSS scroll-driven animations in Adam Argyle's extensive tutorial. 🤓 Tons of fun examples included!

Check it out: https://tympanus.net/codrops/?p=75216

#frontend #css #webdevelopment #tutorial #howto #cssonly #ui #coding

Wanna see some AMAZING stuff made ONLY with CSS? Huge thanks to @mikebabcock for tipping me off to this Kevin Powell video. 🤯

https://www.youtube.com/watch?v=CG__N4SS1Fc

#CSS #WebDev #CSSArt #animation #design #art #CSSOnly #Codepens

Wanna see some AMAZING stuff made ONLY with CSS? Huge thanks to @mikebabcock for tipping me off to this Kevin Powell video. 🤯

https://www.youtube.com/watch?v=CG__N4SS1Fc

#CSS #WebDev #CSSArt #animation #design #art #CSSOnly #Codepens

Wanna see some AMAZING stuff made ONLY with CSS? Huge thanks to @mikebabcock for tipping me off to this Kevin Powell video. 🤯

https://www.youtube.com/watch?v=CG__N4SS1Fc

#CSS #WebDev #CSSArt #animation #design #art #CSSOnly #Codepens

Wanna see some AMAZING stuff made ONLY with CSS? Huge thanks to @mikebabcock for tipping me off to this Kevin Powell video. 🤯

https://www.youtube.com/watch?v=CG__N4SS1Fc

#CSS #WebDev #CSSArt #animation #design #art #CSSOnly #Codepens

Wanna see some AMAZING stuff made ONLY with CSS? Huge thanks to @mikebabcock for tipping me off to this Kevin Powell video. 🤯

https://www.youtube.com/watch?v=CG__N4SS1Fc

#CSS #WebDev #CSSArt #animation #design #art #CSSOnly #Codepens

RT Ben Evans
Fancy a fun holiday challenge? 🎄
Fork & put your own piece of furniture in this room.
The funnier & the more adventurous the better.
All forks will be reviewed in a YouTube video early next year.
https://codepen.io/ivorjetski/pen/vYbPgdE
Inspired by @garethheyes ♥️
#cssonly #purecss @CodePen

:sys_twitter: https://twitter.com/ivorjetski/status/1733246103464624489

Do you use a CSS library or do you write it all on your own?

#css #css3 #CssOnly

It's a CSS Maze!! 🌽
Unless in Safari... In which case it's some random shapes 🙃
https://codepen.io/ivorjetski/pen/poQpveN

🚳 No images
📵 No JavaScript
👨‍💻 Just CSS + a sprinkling of HTML

First one to screenshot the end wins... Go!! 🎉

@[email protected]
@[email protected] #nocode #purecss #cssonly #cssart #ccsgame

Do you like or hate CSS?

#css #css3 #CssOnly

#CodePenChallenge | Tricks & Treats https://codepen.io/takaneichinose/pen/BavgmVx
@codepen

A little witch girl is asking for a treat! Please give her some candies!

This behavior and animations is written only using #css animation

#html #nojs #cssonly #webdesign #webdev

RT Ben Evans
Hello👋It's been a while... I did a thing!
A Pure CSS Table Tennis Game:
https://codepen.io/ivorjetski/full/mdzrLbW
An experiment to see how closely, only CSS, can mimic a finished app.
@CodePen
#cssonly #cssart #frontenddeveloper https://t.co/rsAmUewiei

:sys_twitter: https://twitter.com/ivorjetski/status/1649081381484363776

I'm trying to nail some #cssonly game mechanics in individual chunks. Here's a "skill-tester" style one:

https://codepen.io/stevesydney/pen/MWGmbmm

RT @[email protected]

It's a-me, A Pure CSS Mario!

No images, no JavaScript, just a lot of transform3d.
Unfortunately iOS Safari can’t quite manage it.
Let's-a go!
https://codepen.io/ivorjetski/full/abEBjKN via @[email protected]

#purecss #cssart #3dcss #cssonly #nojavascript #FrontEndDeveloper #frontenddev #HTML #CSS

🐦🔗: https://twitter.com/ivorjetski/status/1506682283973087240