10 Incredible CSS-Only CodePens (2023)
Рет қаралды 5,954
Күн бұрынA collection of stunning CodePen demos that illustrate how you can create an amazing, interactive illustration with a few lines of well-crafted CSS.
🎨 Demos
1. CSS Only Fire by Simon Goellner: codepen.io/simeydotme/pen/Poy...
2. Dripping by Amit Sheen: codepen.io/amit_sheen/pen/jOe...
3. 100% 3D CSS + HTML Render by Jane Ori: codepen.io/propjockey/pen/KKG...
4. Copypaste Apple Keyboard by Jon Kantner: codepen.io/jkantner/pen/ZEqKgWJ
5. CSS Rollin' Road by Jhey Tompkins: codepen.io/jh3y/pen/abRxZJE
6. OnlyCSS: Low-poly Train by Yusuke Nakaya: codepen.io/YusukeNakaya/pen/P...
7. Flying Through Hexagons by Amit Sheen: codepen.io/amit_sheen/pen/OJB...
8. 3D Walkman by Ricardo Oliva Alonso: codepen.io/ricardoolivaalonso...
9. Gradient Art by Oscar Saharoy: codepen.io/oscarsaharoy/pen/B...
10. 3D CSS Wanderer above the Sea of Fog by Alvaro Montoro: codepen.io/alvaromontoro/pen/...
📖 Chapters
00:00 Intro
00:18 CSS Only Fire
01:09 Dripping
01:39 100% 3D CSS + HTML Render
02:48 Copypaste Apple Keyboard
03:24 CSS Rollin' Road
03:56 OnlyCSS: Low-Poly Train
04:21 Flying Through Hexagons
04:55 3D Walkman
05:20 Gradient Art
06:00 3D CSS Wanderer above the Sea of Fog
06:51 Conclusion
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com/
🏷️ Use coupon code KZfaq15 to get an additional 15% off on the already discounted, pre-launch price.
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#css #cssart
@ahmad-murery Жыл бұрын
CSS Only Fire brings back some memories to the Flash days, there was a similar fire effect but it used the displacement filter to manipulate the pixels of on gradient rectangle (and I like it in green theme). anyway, all are pretty cool but what I liked the most are: - 3D CSS + HTML Render - Flying Through Hexagons - The Gradient Art Thanks Zoran!
@CSSWeekly Жыл бұрын
I did dabble with Flash in the old days before getting into CSS, but never with displacement filters to create fire! 😀 Thanks for sharing this and your favorites, Ahmad! 🙏
@HuynhLuong227 Жыл бұрын
wow, amazing, big thanks
@CSSWeekly Жыл бұрын
Thanks for watching and commenting, Huynh! 🙏
@HuynhLuong227 Жыл бұрын
@@CSSWeekly keep going
@CSSWeekly Жыл бұрын
I most certainly will! 🙂
@default_shape1254 Жыл бұрын
Woow.. your videos have quality 👌
@CSSWeekly Жыл бұрын
Thank you so much for your kind words! It means a lot! 🙂
@codeforest468 Жыл бұрын
First!
@CSSWeekly Жыл бұрын
I think this is the first "First!" comment I've received on this channel! Thanks, Zvonko! 😀
@codeforest468 Жыл бұрын
@@CSSWeekly I certainly know it will not be the last :D Btw, great video... as always. Waht can be achieved with just a few lines of CSS code is amazing
@CSSWeekly Жыл бұрын
Thank you, my friend! 🙂
超人夫妇
Рет қаралды 46 МЛН
Kevin Powell
Рет қаралды 109 М.
One More German
Рет қаралды 923 М.