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 Maxew futur dev
#divtober 12 : shadow
Have you watched "the birds" ?
via @CodePen :
#CSS
https://codepen.io/maxew33/pen/gOzZdMY?editors=0100
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 Tom Hinton
#mathober2022 - Fundamental
https://codepen.io/TomHinton/pen/jOxXWva
RT ilithya 🎃
Also, replay sessions #curiouslyminded from season 2 of @iamelizasj & I jamming alone, & w/ amazing guests doing shaders like @anushkatr (patterns, perspective, architecture) and @sableRaph (movement, layers, blend modes) are up in our YouTube channel 🔥
https://www.youtube.com/c/curiouslyminded/videos
https://twitter.com/ilithya_rocks/status/1579791926613590016
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
RT Wakana Y. K.
I tried using Groundprojected.
@CodePen #codepen #threejs #ammojs #groundprojected
https://codepen.io/wakana-k/pen/vYjgyjL
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Turn your best images into a fancy carousel 🤩
✅ Minimal HTML (<img>s inside a container)
✅ No duplicated images
✅ Works with any number of images
✅ Optimized with Sass
Demo:
#CSS
http://codepen.io/t_afif/full/PoedrGY
https://twitter.com/ChallengesCss/status/1578391818634465281
RT 👻 jheyQuery v6.6.6 🔨🎃✨
Re Here's that @CodePen link! 🚀
The performance of CSS :has() is pretty incredible. There's another demo I'll share where it does some pretty "extra" stuff and it handles it like a champ 💪
https://codepen.io/jh3y/pen/JjvapBM
RT Greg Robleto
Day 7 of #divtober is "wonder"
I was trying for the Library of Alexandria, one of the Seven Wonders, but I see now I made the lighthouse of Alexandria here, and I'm realizing they may not be the same place.🤷♂️
Code on @CodePen
#css #cssart #singlediv
https://codepen.io/robleto/pres/YzLjYvr
RT Chris Coyier
Re WE DID THIS.
Thanks for all the questions, folks.
https://blog.codepen.io/2022/10/05/387-codepen-co-founders-ama/
Build, test, and discover front-end code 👩🏽💻