RT Ricardo Oliva Alonso
🍵Swag 2.0🍵
Designed by: lukeroberts
Original image:
Live @CodePen :
#html #css #javascript #illustration #animation #web #cssart #coffee #2d
https://lukeroberts.tv/walk-cycles.php?pn=2
https://codepen.io/ricardoolivaalonso/full/JjJKJRV
RT Chris Coyier
If you're interested in the particular cocktail of technology that is Next.js and Apollo GraphQL, @shshaw and I have a great video for you:
331: Next.js + Apollo + Server Side Rendering (SSR)
https://blog.codepen.io/2021/09/01/331-next-js-apollo-server-side-rendering-ssr/
CSS-only Homer Simpson by Alvaro Montoro
https://codepen.io/alvaromontoro/details/vYZKxQj
RT Alan Brown
Re This is fluid-responsive Typography, made using Modular Scale with the Utopia Type Calculator:
Going between fluid units and pixels can be a tricky workflow, so I set up a @CodePen demo for tweaking the values:
2/8 🧵
https://utopia.fyi/type/calculator
https://codepen.io/alanbrowndesign/pen/LYLPXjg
https://twitter.com/alanbrowndesign/status/1433085694289735690
RT Jon Kantner
Futuristic Adobe Acrobat Reader Icon
https://codepen.io/jkantner/pen/abwZOjj
RT David Aerne
Langstrasse
on @CodePen
https://codepen.io/meodai/pen/QWgNBzZ?editors=0010
RT GreenSock
We love it when a forum thread comes together.
💻 codepen -
🧠 thread -
https://codepen.io/creativeocean/pen/OJgNyVm
https://greensock.com/forums/topic/29336-parallax-math-help/
RT Una Kravets 👩🏻💻
Responsive card > Responsive button > Responsive icon
Container queries are the future y'all.
SO dope to work with.
Demo requires Canary + Container Queries flag
Uses:
- Newer `container: inline-size` syntax
- Named containers to query diff parents
https://codepen.io/una/pen/NWgxXGV
RT Zach 🖐️ing
Going through some of my old @CodePen collections, and wanted to share these #CSS flags I made.
https://codepen.io/collection/DojWkB
RT George Francis
Generative news! ✨
I have a brand new tutorial coming out this week — "Crafting Organic Patterns With Voronoi Tessellations" 🎨
Here's a little sneak preview of some image-based pattern magic 👀
Codepen here! //
https://codepen.io/georgedoescode/pen/mdmZgew
https://twitter.com/georgedoescode/status/1433092581584429057
RT AdirCode
I turned my @CodePen into a live wallpaper for my #iPhone 🎉
Technology is fun
My original CodePen:
https://codepen.io/Adir-SL/pen/WNOrEbB
Re Phew. All set.
Chris Coyier: And we're back with some creative server gymnastics from Mr. @alexquez
Re
Chris Coyier: AWS US-WEST-2 (Oregon) is down.
...which makes CodePen down 😭. We're on the case of course, trying to get back up as soon as we can.
RT Chris Coyier
AWS US-WEST-2 (Oregon) is down.
...which makes CodePen down 😭. We're on the case of course, trying to get back up as soon as we can.
Very sorry for the interruption, we're on it! 🛠
RT Emma Bostian 🐞
HOW FUN that @CodePen now shows you what the generated Emmett code will be!!
I love.
RT Dan Wilson
#dzy If you look closely enough it almost appears as though the circles move and change colors... on @CodePen:
https://codepen.io/danwilson/full/LYLpydE
RT Ana Tudor 🐯
See me code a cube of bubbles pure CSS 3D animation with minimal code in ~25 min:
Live on @CodePen:
Inspiration:
More variations on the same concept:
*
*
https://www.patreon.com/posts/video-pure-css-55473182
https://codepen.io/thebabydino/details/BaZNEGK
https://ello.co/slatercombes/post/v8rsyzymvnlzwaerhld0jg
https://codepen.io/thebabydino/pen/zYzGrjJ
https://codepen.io/thebabydino/pen/WNOvVPp
RT AdirCode
I made a pure CSS To-do list, you can add items by selecting the end of the text and pressing “Enter” and you can tick off an item by making its text bold (command/ Ctrl + B)
Yep, it works with no JavaScript needed…
Here’s the @CodePen:
https://codepen.io/Adir-SL/pen/rNwBmpM
Build, test, and discover front-end code 👩🏽💻