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
16
Mar 19
To celebrate something-or-other, I created a retro CRT using only vanilla CSS:
📺 codepen.io/ivorjetski/pen/qE…
No images. No JavaScript. No SASS.
Fully turn-off-and-on-able!
Also a documentary about the making of it: youtube.com/watch?v=wdNHwIqM…
@CodePen #css #cssart #cssonly
2
174
30 Nov 2025
#ウィークリーコーディング #デイトラ #自主課題
『Theme：落ち葉が落ちる表現』
Animation：CSS（@keyframes / transform / filter ）
✨Focus
画像に到達するまでの“時間軸”をデザイン。
落ち葉がゆっくり舞い降りる動きをレイヤー化し、秋の情緒がじわっと立ち上がる導線を設計。
🎯Challenge（違和感の除去）
「落ち葉が速すぎて突風みたい」問題をduration × opacity × 移動距離 の3点で再構築。
・アニメ時間を10〜14秒へ大幅に延長
・消失直前まで opacity:1 を維持
・落下距離を画面外まで伸ばし、自然な“消え方”に調整
📘Memo
・filter: sepia(100%) → 0% で“時間の解凍”を表現
・各葉の animation-delay を分散して、単調な落下を回避
・translateY(700px)で確実に画面外へ
#CSSOnly #アニメーション #UI実装 #Web制作 #秋が終わるまでにやりたかったやつ #桜も対応可
1
25
471
11 Oct 2025
🚀 Excited to share STRIKE — my hackathon project built using only HTML & CSS!
⚡ Challenge: No JavaScript allowed. Eager for the results. ⏳
Special thanks to: @rohit_negi9 @adityatandon02 and my #1 bro @_siddhanttt ❤️
#HTMLCSSOnly #STRIKEClone #WebClone #CSSOnly #CoderArmy
1
3
60
16 Jul 2025
day 20/100 – #100DaysOfCode 🌱
built a custom sidebar menu using just html css (no js 👀)
✔️ checkbox toggle
✔️ font awesome vibes
✔️ box-shadow slay
took me 20 days to post but we’re here now 🫶
#DevJourney #CSSOnly #FrontendDev #CodeNewbie #ApnaCollege
1
106
26 Jun 2025
Oh look 👀 It's The Backrooms in just CSS!
Early access creepypasta edition!
100% glitchy guaranteed!
codepen.io/ivorjetski/pen/NP…
How it was made 😱 youtube.com/watch?v=xiEZ54lG…
@CodePen #CSS #CSSArt #CSSCrimes #CSSOnly #theBackrooms
First person to screenshot the end wins! 🥳
2
1
6
1,609
8 May 2025
Built this: book3d-1.web.app — pure CSS.
Issue? The shadow's stuck to the book like glue.
Not the realistic type... more like its clingy twin.
ideas?
#purecss #cssonly #3dcss
2
4
51
25 Apr 2025
An accessible and responsive HTML & CSS only menu and image slider.
With HTML, CSS and JavaScript video player.
Coded with the help of #Grok 🧑🏽💻.
#WebDevelopment #WebDev #Coding #HTML #CSS #CSSOnly #Responsive #JavaScript #AccessibleDesign #Grok3 #GrokAI #AI
2
2
67
25 Apr 2025
Accessible and responsive animated menu with an image slider with controls.
HTML and CSS only.
Coded with the help of #Grok 🧑🏽💻.
#WebDevelopment #Coding #HTML #CSS #CSSOnly #Responsive #AccessibleDesign #Grok3 #GrokAI
1
3
67
25 Apr 2025
An accessible, responsive animated HTML and CSS only menu alongside the JavaScript implementations.
Coded with the help of Grok; It's so useful for coding template designs 🧑💻.
#WebDevelopment #Coding #HTML #CSS #CSSOnly #Responsive #AccessibleDesign #Grok3 #GrokAI
2
2
82
9 Mar 2025
🔥 CSS Child Selectors
CSS child selectors allow you to style only the direct children of an element.
Syntax:
parent > child {
/* styles */
}
Example:
div > p {
color: red;
}
<div>
<p>Red Text (Direct Child ✅)</p>
<span>
<p>Not Affected (Not a Direct Child ❌)</p>
</span>
</div>
Explanation:
The > symbol means "direct child."
Only <p> tags directly inside <div> will be styled.
Nested <p> tags inside another element (like <span>) won't be affected.
#CSS #CSSTricks #LearnCSS #CSSAnimation #CSSGrid #Flexbox #WebDesign #pushpendratips #FrontendDevelopment #WebDevelopment #ResponsiveDesign #UIUX #CSSForBeginners #AdvancedCSS #CSSOnly #CSSEffects #TailwindCSS #Sass #CSSFramework
30
27
139
3,170
8 Mar 2025
CSS Web Layout Guide 🖥️🎨
Creating a well-structured web layout using CSS involves understanding different layout techniques. Here’s a breakdown of the most commonly used methods:
A thread 🧵👇🏻👇🏻
#CSS #CSSTricks #LearnCSS #CSSAnimation
#CSSGrid #Flexbox #WebDesign #pushpendratips #FrontendDevelopment #WebDevelopment
#ResponsiveDesign #UIUX #CSSForBeginners
#AdvancedCSS #CSSOnly #CSSEffects #TailwindCSS
#Sass #CSSFramework
31
32
239
8,958
12 Feb 2025
気晴らしに以前作ったCSSアートをテキストバージョンにしてみたらちょっとおもしろい感じになった。
これももちろんCSSのみで動いています。
unshift.co.jp/labs/cssTrocho…
#css #cssonly #creativecoding
5 Feb 2025
CSS Only Creative Coding つくった。これもCSSのみで動いています (ちょっと重いかも)。
unshift.co.jp/labs/cssTrocho…
以前作った↓のリメイク版で、少し構造を変えて、かつ自動でアニメーションするようにしました。中心をマウスオーバーするとちょっと変化します。
codepen.io/_unshift/pen/zYLw…
#css #cssonly #creativecoding
1
2
49
5,232
5 Feb 2025
CSS Only Creative Coding つくった。これもCSSのみで動いています (ちょっと重いかも)。
unshift.co.jp/labs/cssTrocho…
以前作った↓のリメイク版で、少し構造を変えて、かつ自動でアニメーションするようにしました。中心をマウスオーバーするとちょっと変化します。
codepen.io/_unshift/pen/zYLw…
#css #cssonly #creativecoding
1
4
119
12,952
23 Jan 2025
CSS ONLY: Scroll Direction & Velocity.
I used @jh3yy's concept of capturing the scroll velocity to achieve this.
It also helped me capture the scroll direction.
100 changes.. To save the pen or not... 🤔
#CssOnly #CSS #CSSwithEIO #Frontend #Webdev
21 Dec 2024
the trick to that is to animate two custom properties on scroll but set use one as a transition-property
if the scroll stops, there will be no transition so the values will match. when scrolling, one value would lag because of the transition 🤙
2
109
2 Oct 2024
Ben wrote a 3rd person blog about this:
dev.to/ivorjetski/css-music-…
Ben thinks 3rd person blogs are the future! 😬 🙃
codepen.io/ivorjetski/full/j…
@CodePen
#codepen #css #cssart #cssmusic #frontend #frontenddev #code #html #cssonly #purecss #madness
3
141
26 Sep 2024
It's Thursday! So it must be time for...
A CSS Music Video!! 🥳💃
youtube.com/watch?v=V0nsD2bE…
codepen.io/ivorjetski/pen/jO…
Could it be the first responsive music video?
@CodePen #CSS #FrontEnd #musicvideo #cssonly #cssart #codepen
1
4
22
1,791
21 Jun 2024
Only 6 seats left, and only ~12 hours left to use the coupon CSSONLY to get 25% off :)
17 Jun 2024
CSS Games Workshop - take #2‼️
After a successful first run, we gathered the participants' feedback, made some adjustments, added a few improvements, and now we're all set and ready to do it again! 😎 So come and join Kevin Powell (@KevinJPowell) and myself in a 2 days online workshop all about CSS games. (June 25 & 27)
Whether you’re a seasoned developer looking to expand your skill set or a newcomer eager to explore the creative potential of CSS, this workshop is designed to inspire and empower you.
While learning how to create CSS-only games might seem like a niche topic, it’s a great way to discover how to harness the power of animations, new ways to work with transitions, and unlock the secrets of transforms.
If this sounds like something you’d be interested in, you can register for the workshop right here: courses.kevinpowell.co/games…
💸 Early-bird special of 25% off with the coupon "CSSONLY".
See you at the workshop! 😁
3
15
5,808
20 Jun 2024
Over half the available seats are gone, if you're interested, don't wait too long 😊
(and use CSSONLY for 25% off, good through the end of the day tomorrow)
17 Jun 2024
CSS Games Workshop - take #2‼️
After a successful first run, we gathered the participants' feedback, made some adjustments, added a few improvements, and now we're all set and ready to do it again! 😎 So come and join Kevin Powell (@KevinJPowell) and myself in a 2 days online workshop all about CSS games. (June 25 & 27)
Whether you’re a seasoned developer looking to expand your skill set or a newcomer eager to explore the creative potential of CSS, this workshop is designed to inspire and empower you.
While learning how to create CSS-only games might seem like a niche topic, it’s a great way to discover how to harness the power of animations, new ways to work with transitions, and unlock the secrets of transforms.
If this sounds like something you’d be interested in, you can register for the workshop right here: courses.kevinpowell.co/games…
💸 Early-bird special of 25% off with the coupon "CSSONLY".
See you at the workshop! 😁
21
2,540
17 Jun 2024
CSS Games Workshop - take #2‼️
After a successful first run, we gathered the participants' feedback, made some adjustments, added a few improvements, and now we're all set and ready to do it again! 😎 So come and join Kevin Powell (@KevinJPowell) and myself in a 2 days online workshop all about CSS games. (June 25 & 27)
Whether you’re a seasoned developer looking to expand your skill set or a newcomer eager to explore the creative potential of CSS, this workshop is designed to inspire and empower you.
While learning how to create CSS-only games might seem like a niche topic, it’s a great way to discover how to harness the power of animations, new ways to work with transitions, and unlock the secrets of transforms.
If this sounds like something you’d be interested in, you can register for the workshop right here: courses.kevinpowell.co/games…
💸 Early-bird special of 25% off with the coupon "CSSONLY".
See you at the workshop! 😁
1
5
34
12,082