@RT Ahmad Shadeed
💡In flexbox, pseudo-elements are treated as flex items.
In the example, the line is filling the available space, and the margin will flip based on the direction thanks to CSS logical properties.
h2:after {
flex: 1;
margin-inline-start: 0.5rem;
}
🔗
https://codepen.io/shadeed/pen/yLpWBmP
RT Louis Hoebregts
Combining @greensock power with @threejs and boom 🔥
The animation is using `.setDrawRange()` on each tube's geometry to make them grow 💡
Watch it live (without Twitter compression) on @CodePen ⚡️
https://codepen.io/Mamboleoo/pen/abExQmM
It's the final week of the April #CodePenChallenge!
This week we'll focus on the little details in a long article 🔍
Thanks @memberful for sponsoring!
https://codepen.io/challenges/2022/april/4
RT Maxi83c
¿Qué les parece esta lámpara de lava que hice con CSS?
Pueden verlo aquí:
➡️
#CSS
https://codepen.io/maxi83c/full/ExoMGGv
RT Louis Hoebregts
Drawing shadows with #canvas can be hard to manipulate and very non efficient!
A quick solution is to duplicate your canvas into another one with `blurCanvas.drawImage(canvas)` and apply a `filter: blur(5px)` in CSS on it ✨
Check the code on @CodePen 👇
https://codepen.io/Mamboleoo/pen/GRyexvE
RT Jhey 🔨🐻✨
CSS MonDDDrian 🎨✨
Tap to regenerate! 👇
Seen some posts about learning CSS Grid by creating Mondrian style paintings 😎 Thought I'd recreate an old CSS Grid demo in 3D 🚀
👉
http://codepen.io/jh3y/pen/mdpvBey
"A→B→A" by Jason Hibbs (@jasonhibbs)
https://codepen.io/jasonhibbs/pen/mdpvmyd
RT Amit Sheen
Animated 3D @CodePen logo (w/ #CSS)
live demo:
https://codepen.io/amit_sheen/pen/KKZJLJR
RT Adam Kuhn
working to earn myself a waffle party using a handful of CSS vars, SCSS random functions and creative clamp()ing to recreate the Lumon Macrodata Refinement interface from Severance over at @CodePen
thanks for lookin'
https://codepen.io/cobra_winfrey/full/WNdPooO
https://twitter.com/cobra_winfrey/status/1516802272260411393
RT Álvaro Montoro
I redid the terrible "soy milk" joke in CSS. This time, instead of making it fake 3D, it's actual 3D CSS. It may not be as cartoony as the original, but it was fun to code.
Live demo on @CodePen:
#html #css
https://codepen.io/alvaromontoro/full/zYpeKzE
https://twitter.com/alvaro_montoro/status/1516551686315286535
RT Kit Jenson
This past week saw the creation of a simple tower defense game. And yes... it is Pacman. See all code and play here...
#gamedev #indiedev
https://codepen.io/kitjenson/pen/OJzQOxZ
RT Joeru ✏️
I just completed the @CodePen's Little Details challenge for this week, "Icons". I had a lot of fun building it ✨
See the full code here:
#codepenchallenge
https://codepen.io/joeltorres-7/pen/popqYzG
RT Jhey 🔨🐻✨
⚡️ Speedy CSS Tip! ⚡️
Learn how to make 3D with CSS 🚀
Use custom properties to make reusable cuboids and create awesome 3D scenes 🤩
Re-edited and exported ✨
Thanks for the support 🙏 @CodePen below 👇
RT masahito art
Coded a penguin - click somewhere on the page and the penguin will waddle towards where you clicked.
@CodePen
#javascript #penguin
https://codepen.io/Ma5a/full/MWrZPOP
RT Álvaro Montoro
This weekend I completed a few "artsy" CSS drawings for the @comi_CSS comic strip. They are based on paintings by:
Kandinsky
Mondrian
Gris
Warhol
Lichtenstein
https://codepen.io/alvaromontoro/full/zYpMZam
https://codepen.io/alvaromontoro/full/MWrzJPb
https://codepen.io/alvaromontoro/full/NWXeqZO
https://codepen.io/alvaromontoro/full/ZEvmqmd
https://codepen.io/alvaromontoro/full/wvpYvdv
https://twitter.com/alvaro_montoro/status/1516035277667643407
It's week three of the April #CodePenChallenge!
This week's little details are Icons 🔍
Can you transform this tab bar nav from basic to iconic?
Thanks @memberful for sponsoring!
https://codepen.io/challenges/2022/april/3
RT Hyperplexed
Animal photo gallery w/ a side of Fizz (cats) Buzz (dogs).
@CodePen #codepenchallenge
https://codepen.io/TheVVaFFle/full/BawpvRa
"3D Preloader" by Jon Kantner
https://codepen.io/jkantner/pen/jOYejeq
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
