The Odometer Effect (Without JavaScript) — Preethi shows us how to approach creating a dynamic display for showing changing numeric values with just CSS and HTML || #CSSAnimation #WebDev #CSSOnly bit.ly/41fYMpA
2
0
0
0
#cssonly
Latest posts tagged with #cssonly on Bluesky
Posts tagged #cssonly
0
0
0
0
To celebrate the launch of Artemis II 🚀, I put together a #cssonly scroll-driven animation.
Powered by animation-timeline: scroll — no JavaScript, just modern CSS.
Still WIP, but already a fun experiment.
Full demo on @codepen.io ✨
codepen.io/cbolson/full...
#artemis
10
5
1
0
To celebrate something-or-other, I created a retro CRT using only vanilla CSS!
📺 codepen.io/ivorjetski/p...
No images. No JavaScript. No SASS.
Fully turn-off-and-on-able!
Also a documentary about the making of it: www.youtube.com/watch?v=wdNH...
@CodePen #css #cssart #cssonly #frontend
79
26
9
5
An Inverted radius tabs demo which uses anchor-positioning + corner-shape + :target
#cssonly
See the full demo on @codepen.io
codepen.io/cbolson/pen/...
6
1
0
0
Descrambling text using rotation and animation-timeline.
Pure CSS with no JS.
Link to demo in first comment.
#codepen #cssonly
5
1
1
0
Falling cards with perspective using just CSS.
The cards drop down as you scroll down using animation-timeline.
#codepen #cssonly
(see the Codepen link in first comment)
1
0
1
0
All sorts of #CSSonly dropdown/select/nested #interfaces coming together!
our collection on @codepen.io!
codepen.io/collection/r...
0
0
1
0
Ok, we have rewritten the CSS Only Nested Dropdown, now it is multilevel!
codepen.io/vivarado/pen...
#OpenSource #CSSOnly #UserInterface
2
0
1
0
codepen.io/vivarado/pen...
We needed a drop-down with nested menus, so here is one CSS-only (two levels for now)!
• Click to open, hover to explore.
• With a hover tunnel-triangle.
• Mouse Out persistent.
VivaRado User Interfaces: codepen.io/collection/r...
#OpenSource #CSSOnly #UserInterface
2
0
0
1
i get the _theory_ but have you SEEN FINNISH?! and GERMAN NOUNS?
(yea i have break-word and the right attributes)
oh, look, the #csswg has been discussing this 😩 for at least five years
i have no idea how to get around this, #cssonly. js & shy unacceptable. 😱😱
any german or finnish devs here?
0
0
0
0
For those who come after.
codepen.io/manuelsanche...
#cssonly #pixelart #boxshadow #clairobscur #expedition33
3
0
0
0
I've got the hobbledehoy movement working in the Backrooms, but I need to work on the interactions with it, because you can't currently press the light-switch. But it's fun to hobble around if you like:
tinydesign.co.uk/css-backroom...
#css #cssart #backrooms #cssonly #purecss
1
1
0
0
#cssonly !!!
1
0
0
0
View bobbing actually works quite well! 🤩
Not sure the animation is quite right yet though. I look like I have a limp :)
#css #cssonly #cssart #frontenddev #backrooms
10
1
1
1
So I made a thing: #russian-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 […]
[Original post on mstdn.social]
0
1
0
0
@kevinpowell.co challenged me to adapt my rotation cube view-transition to a scroll-based animation. It kinda works with #CSSonly but I think using a bit of JS and view-transitions between sections would look better, I might try it in the future.
codepen.io/ragnar_ock/p...
10
1
1
0
Oh look 👀 It's The Backrooms in just CSS!
Early access creepypasta edition!
100% glitchy guaranteed!
codepen.io/ivorjetski/p...
How it was made 😱
youtu.be/xiEZ54lGFt8?...
@codepen.io #CSS #CSSArt #CSSCrimes #CSSOnly #theBackrooms #frontend #CSSGame
First person to screenshot the end wins! 🥳
27
8
4
3
How to make a circular profile hover effect in HTML & CSS! 🌀
Discover clean web magic with zero JavaScript — visit javidev (link in my profile).
mystic.js
#WebDesign #HTMLTips #CSSOnly #FrontendMagic #CodeSnippet #HoverEffect #DevLife #CleanCode #UIUX #WebDevTutorials
1
0
0
0
Make your cards shine — check out more at javidev, link in my profile.
Glow up your design with pure CSS. Let’s light it up! mystic.js
#cardhover #outerglow #cssdesign #htmlcss #uianimation #webdesign #frontenddev #cssonly #devreel #codingtutorial
0
0
0
0
Serve up sizzling UI design — check out javidev, link in my profile.
Tasty transitions, bold style. Code that hits different. mystic.js
#burgercard #csshover #htmlcss #uianimation #webdesign #frontenddev #hovereffect #cssonly #devreel #codingreels
0
0
0
0
Transform your profile with style — explore more at javidev, link in my profile.
Hover effects that pop. Make your profile stand out. mystic.js
#profilecard #csshover #htmlcss #uianimation #webdesign #frontenddev #cssonly #codingreels #devreel #uidesign
0
0
0
0
Make your UI play-ready — see more at javidev, link in my profile.
Dynamic effects for gamers & devs alike. Build it smooth. mystic.js
#gamecard #csshover #gamingui #htmlcss #frontenddev #uianimation #cssonly #webdesign #codingreel #devreel
0
0
0
0
Add cinematic flair to your UI — see more at javidev, link in my profile.
Dynamic, stylish, and smooth. Your cards deserve the spotlight. mystic.js
#moviecard #csshover #htmlcss #uianimation #webdesign #frontenddev #cinematicui #cssonly #devreel #codingdesign
0
0
0
0
Give your UI that premium feel — more at javidev, link in my profile.
Crisp, smooth, interactive. Your cards just got cooler. mystic.js
#filtercard #csshover #htmlcss #uianimation #webdesign #frontenddev #hovereffect #cssonly #devreel #codingtutorial
0
0
0
0
Bring your UI to life in 3D — explore more at javidev, link in my profile.
Sharp angles. Smooth motion. Pure CSS power. mystic.js
#3dhover #triangletransition #cssmagic #htmlcss #uianimation #frontenddev #webdesign #cssonly #codingreel #devreel
0
0
0
0
Transform your UI with clean effects — explore more at javidev, link in my profile.
From basic to stunning in seconds. Your list elements will thank you. mystic.js
#listhover #cssmagic #frontenddesign #htmlcss #hovereffect #uianimation #cssonly #devreel #codingreels #webdevelopment
0
0
0
0
Craft epic UI moments — more on javidev, link in my profile.
Blur, depth, motion. Your game cards just got legendary. mystic.js
#gamecard #blureffect #csshover #htmlcss #uianimation #webdesign #frontenddev #cssonly #devreel #gamedevdesign
0
0
0
0
Level up your UI game — see more at javidev, link in my profile.
Smooth, elegant, interactive. This hover effect makes your profile shine. mystic.js
#csshover #profilecard #webdesign #frontendmagic #htmlcss #uidesign #hoveranimation #cssonly #devreel #codingtutorial #uianimation
1
0
0
1
