@RT Ksenia Kondrashova
New #WebGL pattern!
A Voronoi diagram (love it) with eyes calculated over the polar coordinates of each cell. No images or graphic libs here, just a #GLSL shader wrapped with JS
Live demo & source code: https://codepen.io/ksenia-k/full/poYZpyQ
Hosted on @CodePen
Special thx to @bookofshaders
RT Spencer Yonce
Just finished the #codepen challenge for this week!
The prompt was "Leap Year"
Here is what I made!!
You can see my code here: https://codepen.io/spenceryonce/pen/zYbLzva
RT Arby
Logical 🌐 & accessible carousel
built with @openprops
- Container queries
- Scrollbar-width
Check it out on CodePen: https://codepen.io/mobalti/full/MWxBYBW
#CSS @CodePen #webdevelopment
RT Konstantin Denerz
This post 😍 inspired me to create a simple blob switch with an SVG filter ✨.
@CodePen
https://codepen.io/konstantindenerz/pen/GReBKQa
#css #switch #blob #fluide #uxui #codepen
<div class="rsshub-quote">
Matia: You can do blobs with CSS filter but it only works as black or white as far as I know but you can use SVGs to achieve the result you want.
</div>
https://twitter.com/CodePen/status/1754900417593418043
RT GSAP
💚 What a year for demos! Always so much fun to see the creativity that comes out of this community.
Keep on making magic folks!
Here are our favourite @codepens from 2022
✨ Have we missed your demo? Post it in the thread below.
https://cdpn.io/pen/debug/wvxdZqr
"Coin Flip Donate Button" by Cooper Goeke
https://codepen.io/coopergoeke/pen/abZqEbK
The February #CodePenChallenge starts now!
February 2024 has a leap day, so this month we'll leap into the front-end with CSS & JavaScript challenges 🤸
https://codepen.io/challenges/2024/february/1
If you write in JSX and sometimes use `style={}` for quick styling, and sometimes wish you could define hover styles or @ media styles, well, that's what CSS Hooks is for and it does a pretty good job!
https://css-hooks.com/docs/react/getting-started
Example: https://codepen.io/chriscoyier/pen/PoLRZwX
RT Jon Kantner
The toggle that just keeps rolling back!
https://codepen.io/jkantner/pen/vYPRvgr @CodePen #CSS #JS
"Easy flexible gallery grid" by Jordan
https://codepen.io/DeyJordan/pen/ExOGRoJ
Force the height, let them grow or shrink, no squishing with `object-fit`, and just let flexbox do flexbox.
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Use the magic border-image and add as many borders as you want to your images for a fancy decoration
✅ No extra elements & No pseudo-elements
✅ Only one gradient
✅ Optimized with CSS variables
Demo: https://codepen.io/t_afif/full/JjzpwyL via @CodePen
RT Álvaro Montoro
This slider is a single HTML tag styled with CSS. No images and no JS (apart from an inline command.) It's responsive and works on all major browsers.
It uses:
- Custom properties
- Filters
- Container queries
- Trigonometry functions
Demo on @CodePen: https://codepen.io/alvaromontoro/pen/oNVEqgz
RT Nameless God
WebGL Vortex Image
Playing with curve is really fun :)
Code: https://codepen.io/alphardex/pen/NWJyPBR
Inspired by: https://www.cosmos.so/
@CodePen #threejs #glsl #shaders
RT Ecem Gokdogan
Guess the Movie
If you manage to correctly guess all the titles, you'll win the game. However, keep in mind that a single typo will end the game.
https://codepen.io/ecemgo/pen/eYXVpGp
@CodePen #codepen
RT Not Found
S̵w̵e̵e̵t̵H̵o̵m̵e̵, Suit...Home? Diorama - ThreeJS
Live + code @CodePen : https://codepen.io/ricardoolivaalonso/pen/oNVpvJB
Inspired by @ emorysarts
#html #css #javascript #threejs #blender #diorama
The No. 1 Top Pen of 2023 on CodePen is "Carousel with drag and wheel" by Fabio Ottaviani. Woooot! Congrats Fabio!
https://codepen.io/supah/pen/xxJMbbg
RT Jon Kantner
Snowball Range Slider
https://codepen.io/jkantner/pen/KKEXrog @CodePen #CSS #JS
RT Amit Sheen
That's what I did for this week's #CodePenChallenge - a 3D dial graph slash round progress bar (you can use it however), completely dynamic, everything is set and calculated with tons of custom properties and lots and lots of calc() functions (well, that was the challenge 😎).…
RT Ksenia Kondrashova
Möbius strip geometry 🤝 Hacked MeshNormalMaterial
The new elegant @threejs toy here!
Insert just 2 lines of #GLSL code to the original shader with .onBeforeCompile and get a whole range of gorgeous gradients
Live demo & source code: https://codepen.io/ksenia-k/pen/NWJaBZb
Hosted on @CodePen
RT Amit Sheen
If you're doing the #CodePenChallenge this week, I made you a little 'cheatsheet' on sin(), cos(), and tan(), with all the relevant formulas.
And if you want to see what cool things you can do with #CSS and some math, join me for tomorrow's live stream. 😊
<div class="rsshub-quote">
Amit Sheen: ▶️ Live stream!
I love the @CodePen challenges, but I haven't done one in a long time, so I'm going to do this week's challenge - Live!
And since this week's topic is 'CSS Mathematics', I'll try to do a weird idea I had for a while now, using a whole bunch of #CSS calcs and trig…
</div> https://twitter.com/CodePen/status/1750199868793012341
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
