RT CSS Challenges
What kind of CSS loader are you?
⚫️The Dots
⬛️The Bars
Why not both at the same time. Check the below single-div collection "The Dots vs The Bars"👇
One div = one loader
Demo:
#CSS
https://codepen.io/t_afif/pen/gOmooGQ
https://twitter.com/ChallengesCss/status/1472486247440556032
RT Álvaro Montoro
Rudolph (the red-nosed CSS reindeer)
Demo on @CodePen:
Video of the process:
https://codepen.io/alvaromontoro/full/VwMWWYY
https://www.youtube.com/watch?v=z_YcY01_qwQ
https://twitter.com/alvaro_montoro/status/1472601405538160648
RT Chris Gannon
Merry Chris-morph! @CodePen
https://codepen.io/chrisgannon/pen/rNGwWdd
❄️ Let it snow, let it snow, let it snow! ❄️
open this "Snow Day" collection in TV view for maximum chill
https://codepen.io/tv/eJMZQr
RT Jon Kantner
Progress Clock
https://codepen.io/jkantner/pen/MWEmExB
RT Mustafa Enes
Here's something for the good folks at @CodePen
Live demo:
https://codepen.io/pavlovsk/pen/eYGWJmJ
RT Brandel Zachernuk
I made a #webgl demo of the Screen Capture API in #threejs. I hope you like recursion! Try it out for yourself at
https://codepen.io/zachernuk/full/oNGWZgG
RT carl schooff
Want the upper hand in this week's @CodePen Bounce challenge? Use @greensock's CustomEase. Crazy flexible. Notes in thread 🧵
Demo:
Challenge:
#javascript #webdesigner #frontend #CodepenChallenge
https://codepen.io/snorkltv/pen/xxXqXMK?editors=0010
https://codepen.io/challenges/2021/december/
RT Ben Evans
Oh gosh I hate the sound of my own voice! But this was a lot of fun to do. I hope I said something vaguely interesting at some point. I'm not sure I can listen back! 🙈🙉
Thank you so much @chriscoyier and @CodePen!
https://blog.codepen.io/radio/
RT CSS Challenges
💡 CSS Tip!
Make your container fill all the screen height
✅ No cascading `height:100%`
✅ No side effects of the `100vh`
✅ Works with the default margin of
<body>
✅ No overflow issue. The height will grow to fit the content.
Demo:
#CSS
https://codepen.io/t_afif/pen/oNGZjvL
</body> https://twitter.com/ChallengesCss/status/1471128244720181258
We're very sorry but the AWS US-West-2 outage is affecting CodePen.
CodePen might not load, or may be very slow for some of our members right now
https://status.aws.amazon.com/
RT Louis Hoebregts
Bing bang boom, what is that sound?
It's my @CodePen x @greensock challenge participation for this week's theme "Bounce"! #CodePenChallenge 🏀💥
https://codepen.io/Mamboleoo/pen/poWROJb
RT Chrome Developers
Create your own container query demo and tag it with #Designcember to see it featured at the end of the month! ❄️
Use this @CodePen starter (which already includes the polyfill) to get going and make it work today across modern browsers! 🎉🥰
https://codepen.io/web-dot-dev/pen/LYzxgxP
RT Chris Coyier
Yanking one corner of `border-radius` off makes it kinda speech-bubbly in a fun way.
And might as well do it with logical properties.
@CodePen:
https://codepen.io/chriscoyier/pen/OJxWvYG?editors=1100
RT Tucker Massad
New codepen for all my at-home athletes
https://codepen.io/tuckermassad/pen/xxXgdRo
RT Bence
I'm terrible at baking cookies but you can have one. Which one do you pick?
Chocolate Cookies 🍪 (549 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/zYENWgz
RT GreenSock
Re 🎾 This week's @CodePen challenge is 'Bounce'
Enter to win club GreenSock memberships and unlimited access to GreenSock training from Creative Coding Club.
Submit your entry by tagging @GreenSock on Twitter with a link to your submission!
https://codepen.io/challenges/2021/december/
Underrated follow just saying
https://codepen.io/ponycorn
It's week two of the December #CodePenChallenge!
This week, let's bounce! 🏀
Your host @cassiecodes from team @greensock shows you how to make a bouncy animation using a classic technique, the "squash and stretch". The rest is up to you!
https://codepen.io/challenges/2021/december/2
RT Adam Kuhn
been a minute since I've put a demo together but since I'm not a Spotify user I wrapped my own mostly responsive top 10 list over at @CodePen using @greensock ScrollTrigger w/ some animated text & offset-path tricks
thanks for lookin'
https://codepen.io/cobra_winfrey/full/MWEKRpR
https://twitter.com/cobra_winfrey/status/1469402049733439496
Build, test, and discover front-end code 👩🏽💻