@RT T. Afif @ CSS Challenges
An interactive Scrolling Cube Animation using only CSS for the #CodePenChallenge 🧊
Scroll to rotate the cube and reveal the images!
Demo:
⚠️ Using experimental features with a very low browser support
#CSS
http://codepen.io/t_afif/full/BaOyROR
https://twitter.com/ChallengesCss/status/1625965437019095040
RT Thea 👩🏻💻🐱💙💛
My first #codepenChallenge and picked pen for this year 😊👩💻
Thank you @CodePen 💚
https://codepen.io/HighFlyer/full/WNgbwVJ
RT LukyVj - A$AP Luky
Re I also made a @CodePen version that leverages latest CSS technology ( aka @\property --foo {} & animating the variables in a #CSS keyframe )
It's Chrome only for now:
You'll have a nice lil banner indicating if your browser supports the feature or not.
https://codepen.io/LukyVj/pen/MWqWdpG
RT Dr Abstract
A simple example of using #Threejs with the ZIM! Thanks @CodePen for the fun #CodePenChallenge on Shapes and in particular, the wonderful Cube!
See the description in the pen for more examples!
#Cube #Canvas #JavaScript
#ZIMjs
https://codepen.io/zimjs/pen/ZEMzNNd
RT Álvaro Montoro
CSS drawing of Nintendo Switch.
Coded in HTML and CSS, it is interactive and responsive (resize the window and see it change.)
Demo on @CodePen:
Video of the coding process:
#html #css #cssart #nintendo #switch
https://codepen.io/alvaromontoro/full/LYJPxvr
https://youtube.com/watch?v=7IrOlF25_F0
https://twitter.com/alvaro_montoro/status/1625251700750577690
RT Ksenia Kondrashova
Configurable dice cube fits well with #codepenchallenge this week
Tutorial
Made with @threejs for @codrops
Hosted on @CodePen
#threejs #codepen
https://codepen.io/ksenia-k/pen/rNrYNgj
https://tympanus.net/codrops/2023/01/25/crafting-a-dice-roller-with-three-js-and-cannon-es/
RT Aaron Iker
Animated tab bar icons (dark mode)
On @CodePen
Created using @greensock
https://cdpn.io/XWYywgR
RT jhey 🔨🐻✨
Future CSS Tip! 🔮
Use Anchor Positioning to anchor elements to each other ⚓️ (No wrappers!)
.anchor { anchor-name: --anc; }
.anchored { top: anchor(--anc bottom); }
Create adaptive layouts with CSS alone 😮
Let the browser work it out for you! ⭐️
@CodePen link below! 👇
RT Yusuke Nakaya
CSSだけで作る、ビルの合間を飛行するドローンゲーム🏙️ 🛩️ マウスでグリグリ飛べます！ただし重い😂
CodePenChallenge のテーマが「Cube」だったので昔の作品を掘り出しました。
Only CSS: Responsive City Drone View
@CodePen
#CodePenChallenge #CSS #webdevelopment
https://codepen.io/YusukeNakaya/pen/mgReRx
RT Tom Hinton
Raymarched cubes on a cube for this weeks @CodePen #CodePenChallenge
https://codepen.io/TomHinton/pen/bGxGpjL
RT Amit Sheen
Did a whole bunch of cubes 🧊 in my time, but since this week's #CodePenChallenge is 'Cubes', I wanted to do something I've been thinking about for a long time.
The Cube of Cubes!
(#CSS only)
Live demo @CodePen:
https://codepen.io/amit_sheen/full/yLxLOKR
The Shape #CodePenChallenge continues!
This week, let's do something cool with cubes 🧊
https://codepen.io/challenges/2023/february/2
RT Jon Kantner
Glowing On/Off Buttons
https://codepen.io/jkantner/pen/gOjNdog
RT Mark Boots
My entry for this weeks "round" @CodePen Challenge . A header section with some orbiting images (CSS)
Link to codepen in comments👇
#codepen #cpcround #codepenchallenge #css
RT ycw
OooooooooooOOOOOoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo @CodePen @greensock #codepenchallenge #geometry
https://codepen.io/ycw/full/PoBrMBp
RT ☁Matt☁
CGPT Prompt🤖: write a short story in javascript using pure code
👇🏾result
https://codepen.io/appeality/pen/ExpBGeB?editors=0012
RT T. Afif @ CSS Challenges
A little animation for the Round #CodePenChallenge 👀
Demo:
#CSS
http://codepen.io/t_afif/full/RwBzKpd
https://twitter.com/ChallengesCss/status/1623694352257101824
RT Ksenia Kondrashova
Re @CodePen b/w series pt.2
(and today's #codepenchallenge)
Another quick sketch with repelling effect on canvas
Hosted on @CodePen
Demo & source code:
#html5canvas #creativecoding #JavaScript
https://codepen.io/ksenia-k/full/gOjJjzp
RT Lee Martin
Had to develop a @vuejs powered leopard pattern coloring component on @CodePen for a soon to be launched @shaniatwain app. I like being able to import component pens into other pens for presentation. 🐆
RT Dr Abstract
A fun challenge for the @CodePen #CodePenChallenge for ROUND! A little ZIM Emitter action - quite soothing to watch ;-)
If you have not tried CodePen - what are you waiting for! Sign up!
#ZIMjs #Emitter #Canvas #JavaScript
https://codepen.io/zimjs/pen/ExpJvRP
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
