@RT Lynn Fisher
Based on a Henning Lederer animation.
#divtober 16: Hypnotic
😵💫
@CodePen
https://a.singlediv.com/
https://codepen.io/lynnandtonic/pen/JjvVYZK
The Halloween #CodePenChallenge continues!
This week, let's scare up some ghosts & ghouls 👻🧟💀
https://codepen.io/challenges/2022/October/3
RT Sikriti Dakua
isometric text w/ 2d cubes in a 2d canvas
@CodePen ->
#canvas #javascript
http://cdpn.io/yLjwBxR
RT Álvaro Montoro
#divtober 14: splash
💦
Demo on @CodePen:
We live-coded this small animation during a Twitch session earlier today. Thanks everyone for swinging by and saying hello!
Álvaro Montoro: #divtober 13: forever
♾
Demo on @CodePen:
(Tomorrow will be a busy day, so I made it today instead)
http://cssdrawings.com/
https://codepen.io/alvaromontoro/pen/vYjvzPO
https://twitter.com/alvaro_montoro/status/1580169647848304640
https://twitter.com/alvaro_montoro/status/1580938934208847877
RT Adam Kuhn
#divtober no. 13: 'forever'
one webkit only div (b/c box-reflect, text-clip, etc)
https://codepen.io/cobra_winfrey/pen/qBYgpoJ
https://twitter.com/cobra_winfrey/status/1580701944678518785
RT Louis Hoebregts
For this week @CodePen challenge I made a flocking simulation of bats using @threejs inspired by @thecodingtrain's video 🦇🦇
It's not super realistic, but I like how the bats randomly start spinning 😅 #codepenchallenge
https://youtu.be/mhjuuHl6qHM
https://codepen.io/Mamboleoo/pen/QWrzPLy
RT Andrew Walpole
One of those low-effort, high-value CSS things is transforming box-shadow.
A few changes to x/y shadow distance and colors makes all the difference here in faking the 3D look of this component.
https://codepen.io/walpolea/pen/mdLGmVK
RT A dumb gargoyle
fun use case for this new `lh` line-height unit:
gradient text effects that perfectly fit each line
try it in Canary with the experiments on
(or watch this video)
the codepen also has an `em` version fallback,
which is imperfect
Intent To Ship: Blink: Intent to Ship: CSS 'lh' Length Unit
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeRke__t9Piz-JRuy0qW_RNNao8CNS32F0XM_%3DcRYj6FYw%40mail.gmail.com
RT Adam Kuhn
#divtober no. 11: 'burger'
this flying burger will melt yr lappy b/c I've animated background-positions & box-shadows. probably don't do that.
https://codepen.io/cobra_winfrey/pen/JjvxPLd
https://twitter.com/cobra_winfrey/status/1580313213974958080
RT T. Afif @ CSS Challenges
🎨 Divtober #13: Forever
Demo:
#CSS #divtober
T. Afif @ CSS Challenges: 🎨 Divtober #12: Shadow
Demo:
#CSS #divtober
http://codepen.io/t_afif/full/RwyqLKZ
https://twitter.com/ChallengesCss/status/1579763526042025984
https://twitter.com/ChallengesCss/status/1580490618463457282
RT Ryan Mulligan
The @CodePen demo from the article visualizes how this CSS grid layout responds as the viewport expands and collapses 👀
Ryan Mulligan: Fresh off the press! 🎉
This article dives into my site's recent layout update and again reveals why CSS grid continues to sit at the very top of Time magazine's most influential CSS tools year after year*
*Time magazine doesn't do this but they should
https://ryanmulligan.dev/blog/layout-breakouts/
https://twitter.com/hexagoncircle/status/1579902054796967936
RT Una 👩🏻💻🇺🇦
Beautiful CSS art alphabet by @jiangyijie27
https://codepen.io/aragakey/pen/dyegEpv
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Use the :has() selector and style your container based on its number of elements (direct children)
Demo:
⚠️ It doesn't count text nodes. Only tags!
#CSS
http://codepen.io/t_afif/pen/ZEomRYP
https://twitter.com/ChallengesCss/status/1579560086485495809
RT GreenSock
⚡️ Most of the time, the best way to approach a ScrollTriggered animation is by leaving out ScrollTrigger until the end.
Get the animation right first, and then hook it up to scroll.
Sounds a bit upside down, but it works!
@cassiecodes will show you what we mean...
RT Adam Kuhn
#divtober no. 10: 'game'
no I didn't forget about divtober, just a lil behind is all. here's the best atari game ever made, fresh from the new mexico landfill
https://codepen.io/cobra_winfrey/pen/LYmMWZM
https://twitter.com/cobra_winfrey/status/1579963262946672644
RT Greg Robleto
Grills on!
Day 11 of #divtober is "burger"
Learned you can't use a mixin for multiple radial gradients in the same background, so did a lot with variable calcs to make those burger patties.
🏷️ #css #cssart #scss
https://codepen.io/robleto/pres/JjvmLme/5b5568647e5317c6986b95ca71261d5e
RT Ricardo Oliva Alonso
Halloween animation made with HTML & CSS - Designed by Hash Elias.
Live @CodePen :
#html #css #javascript #animation #Halloween2022 #forest #ghost #DiaDeMuertos
https://codepen.io/ricardoolivaalonso/full/RwyqraN
The Halloween #CodePenChallenge continues!
This week's prompt is Vampires 🧛🦇
https://codepen.io/challenges/2022/october/2
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
