@📻 On the latest CodePen Radio, @chriscoyier chats with "sickeningly entertaining coding drag queen" @theannalytical about teaching code, drag, and what CodePen is (quickly!)
https://blog.codepen.io/2021/06/02/318-anna-lytical-on-what-codepen-is/
RT Chris Coyier
I heard through the Twitter that Chrome "rewrote tables" in v91.
I saw it dropped, upgraded, and did a quick test. HEY LOOK STICKY TABLE HEADERS AND FOOTERS.
@CodePen
(Works in Safari and Firefox too)
Aleks Totic: @aardrian @chriscoyier It is fixed in M91. We rewrote tables. Developer notes:
https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/edit?usp=sharing
The June #CodePenChallenge starts now!
This month is all about page layouts. Each week, we'll give you an unstyled HTML page and your challenge is to give it an interesting layout.
Let's get things cooking with a recipe!
https://codepen.io/challenges/2021/june/1
RT ➝
Phases 🌝 & 🌚
Light or Dark / Sunrise or Sunset
-
🌝 👉🏼
🌚 👉🏼
#codepen #svg #generativeart
https://codepen.io/johnwai_/full/zYZvVOB
https://codepen.io/johnwai_/full/gOmPzjP
RT Jon Kantner
Neumorphic Brick Phone
https://codepen.io/jkantner/full/MWpVEpj
RT Chris Coyier
For
<details>
that you just slug into inline content (like a "spoiler" UI or something) I like the idea of some kind of border or background showing where the content ends. Nice for nested details as well.
@CodePen
https://codepen.io/chriscoyier/pen/wvJmqjY
</details>
https://twitter.com/chriscoyier/status/1400593415818076160
RT Shaw
Had a ton of fun with @trostcodes yesterday on his @FrontendHorse Component Carousel stream. We made an awesome little Burger Builder using Matter.js physics!
You can watch the stream here:
And here's the @CodePen:
https://www.twitch.tv/videos/1043589334
https://codepen.io/shshaw/pen/eYveOdj
RT Chris Heilmann
Remember, if you want to do rainbow stuff in CSS/JS, HSL is great for that. Just loop the H value from 0 to 360 and use 100% and 50% for S and L.
https://codepen.io/codepo8/pen/yLMKgEq
RT Rachel Leggett
Do you prefer implicit or explicit labels for radio buttons and checkboxes?
Here's one reason I prefer explicit: I can use the `+ label` selector to grab the label when the input has focus and give it a fun style!
Check out the full code/demo at:
https://codepen.io/rmleg/pen/YzZaqpO
RT GreenSock
Re Bubbles!
This is an amazing one by Tom Miller. He makes some wonderful stuff but isn't on Twitter so flies under the radar a bit.
Go and check out his codepens!
https://codepen.io/creativeocean/pen/NvmgQj
RT Amit Sheen
Word
morphing
with
pure
#CSS
is
great!
Full code @CodePen:
https://codepen.io/amit_sheen/pen/xxqYzvm
RT Ryan Mulligan
The CSS `vmax` unit isn't something I use often but it's handy for rotating elements that fill the viewport. Come spend your summer in this @CodePen. Relax, take a break, soak in the colors 😎⛱️
https://codepen.io/hexagoncircle/full/abJEeXL
https://twitter.com/hexagoncircle/status/1400077889274535936
RT Yusuke Nakaya
CSSだけで建てられた、オフィス街のミニチュア🏙️ ビルも道路もランダムですが、薄目で見ると街に見えませんかね？😂
Only CSS: Miniature City
@CodePen
#css #css3d #cssart #webdevelopers
https://codepen.io/YusukeNakaya/pen/gOmaewZ
RT Jon Slater
Take on #SpaceInvaders using only CSS. It can be done.
https://codepen.io/jonslater204/pen/LYWQbMa
RT Ana Tudor 🐯
I coded a little pure CSS geometric thing on @CodePen:
Uses Houdini magic🎩✨🐇, so Chromium only.
A part of the Memorial collection
https://codepen.io/thebabydino/pen/LYWeOPP
https://codepen.io/collection/DqGWek
All y'all generative code artists out there, @yuanchuan23's
<css-doodle>
is a wonderland to play with. There is new stuff as of late last year that you may not have seen yet:
https://yuanchuan.dev/whats-new-in-css-doodle
</css-doodle> https://twitter.com/CodePen/status/1400106449125117955
RT Bence
Sweet summer is here!
Watermelon Skin 🍉 (422 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/xxqpmwR
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
