@It's the last week of the color harmonies #CodePenChallenge!
Let's wrap it up with a monochromatic palette 🎨
Thanks @wethetweet for sponsoring (they're hiring!)
https://codepen.io/challenges/2021/march/4
RT Alex Hart ☀️
My #CodePenChallenge submission of the week: Tetradic spinner
https://codepen.io/ahart814/pen/YzpbKwJ
https://twitter.com/alexandrahart/status/1372930613695643653
RT Adam Argyle
LET CSS PICK AN ACCESSIBLE COLOR!
`color-contrast()` will automatically pick a color that passes contrast ratios, just give it a list to choose from. aka: throw colors at it!
```#css
body {
background: var(--blue2);
color: var(--onblue2);
}
```
Adam Argyle: Red won!
```#css
color-contrast(black vs blue, red, green)
```
This function returns the color which contrasts the most with the 1st color.
⚠️ LET CSS ENSURE YOU PASS CONTRAST SCORES ⚠️
RT Ryan Mulligan
For this week's Color Harmonies #CodePenChallenge, I built this web version of a favorite childhood game on @CodePen. Half the fun was creating custom pad sounds. Who knew finding the right boops would be such a daunting task!
What level can you reach?
https://codepen.io/hexagoncircle/full/xxRNRwP
https://twitter.com/hexagoncircle/status/1372518794233528322
Might be cool to link up one Pen as a resource on all these with a bunch of --custom-props in it for colors so they could all be changed again by updating one Pen!
Johan Karlsson: ✨I took a bunch of my old Pens and changed to a Teal and Orange color theme. This is my new @CodePen profile:
#creativecoding #tealandorange
https://codepen.io/DonKarlssonSan
Web Components are cool, but what if you want 1) reactive state and lifecycle events 2) efficient re-rendering 3) templating niceness
HEY NICE one @youyuxi:
Demo:
https://github.com/yyx990803/vue-lit
https://codepen.io/chriscoyier/pen/ExNzeXV
RT ycw
40. rand tetradic color scheme @CodePen
#threejs #codepenchallenge
https://codepen.io/ycw/full/vYywdNz
RT Adam Argyle
🆕 mix colors in CSS in Firefox Nightly today!
```#css
background: color-mix();
```
draft spec Firefox is prototyping with
🕹 play with a **working** light/dark theme in this Codepen 💯
https://drafts.csswg.org/css-color-5/#color-mix
https://codepen.io/argyleink/pen/WNoWadG
RT Sophia Wood
Day 43 - fullBalloonRising for tetradic color challenge on codepen.
https://codepen.io/fractalkitty/pen/MWbRJWB
https://fractalkitty.com/101-days-of-creative-coding-docc/day-43-of-101-docc/
RT Stephan Nijman
Small #css tip: Instead of using pixels or rems you can also use css viewport units (vw, vh, vmin, vmax) to make your websites more responsive. #100DaysOfCode #DEVCommunity
👇Check out the CodePen below.
RT Mehdi Vasigh
Some more colorful looks 🟣🔵🔴 check out on @CodePen:
#svg #creativecoding #js #generative #generativeart
https://codepen.io/vasighm/full/MWbxVRg
RT sparklingman
Exp: Tetradic Color Palette
https://codepen.io/sparklingman/pen/jOVRmzm
RT Ana Tudor 🐯
See me code a pure CSS infinity roll loader with Houdini magic 🎩🐇✨ in under 30 min (half of it is prettifying)
Live on @CodePen
Can you figure out how I did it before checking?
https://www.patreon.com/posts/video-pure-css-48813065
https://codepen.io/thebabydino/pen/LYbaGdr
RT Johan Karlsson
✨I took a bunch of my old Pens and changed to a Teal and Orange color theme. This is my new @CodePen profile:
#creativecoding #tealandorange
https://codepen.io/DonKarlssonSan
https://twitter.com/DonKarlssonSan/status/1371574343067701250
RT Smashing Magazine
Colors on the web are confusing — but they don’t have to be. About HSL: a color format for humans.
About HSL
Demo on CodePen
https://cloudfour.com/thinks/hsl-a-color-format-for-humans/
https://codepen.io/phebert/pen/MWbqYvL
RT Jhey 🐻🛠
"yarn add kitty 🧶😹"
Enjoying creating the newer SVG animations with Figma 👍
⚒️ @greensock && @figmadesign
👉
https://codepen.io/jh3y/pen/VwmRZGL
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
