RT Arden
Woah, finished the 'raging sea' lesson from @bruno_simon his threejs course and wow, custom shaders are awesome! On @CodePen
https://codepen.io/aderaaij/full/XWpMONO
RT Jhey 🐻🛠
CSS Tip! ✨
Use "clip-path: polygon()" to create shapes with CSS 😎
Need a drop shadow? Apply the "clip" to a pseudo-element 👍
Check this demo that's a "clip-path" version of the famous "The Shapes of CSS" article from @css
👉
http://codepen.io/jh3y/pen/RwKpLYg
RT Radu Mariescu-Istodor
I coded a Monster for a future game and it fits very well for the #codepenchallenge. What do you think :-) Does it have potential? Check out the code here:
#100DaysOfCode #learnjavascript #learnjs #physics #codingisfun
https://codepen.io/gniziemazity/pen/vYgGZox
RT Mia || Miriam
You can play with an early prototype of container queries in today's Chrome Canary updates! 🥳
1. Do the update
2. Go to chrome://flags
3. Search & enable "CSS Container Queries"
4. Restart the browser
Explainer:
Demos:
Thread: 🧵
https://css.oddbird.net/rwd/query/explainer/
https://codepen.io/collection/XQrgJo
RT Una Kravets 👩🏻💻
🚨 An experimental flag for container queries (@container) just hit Chrome Canary!
Yes, seriously!
Go to: chrome://flags in your URL bar and turn on enable-container-queries to try it out.
Here's a demo to help you see how they work (w/flag in Canary):
https://codepen.io/una/pen/LYbvKpK
RT Ricardo Oliva Alonso
😅Swag 😅
Designed by: Patswerk
Original image:
Live @CodePen:
#html #css #javascript #illustration #animation #web #cssart #chill #rap #2d
https://dribbble.com/shots/3349886-36-Days-of-Type-P
https://codepen.io/ricardoolivaalonso/full/bGgEQLL
RT Paulina Hetman
Monochromatic CSS illustration for this week #CodePenChallenge Night Working in hsl(260, 50%, and l ranging from 0 to 100%)
https://codepen.io/pehaa/pen/VwPavgK?editors=0100
RT Steve Gardner
I made a new @CodePen! A tearable image gallery using @threejs_org
https://codepen.io/ste-vg/full/rNjOgYv
If you make use of our custom editor snippets (tab triggers), you might enjoy that we now support multiple cursors, so you can specify a point where the cursor goes, even multiple times if you want.
https://blog.codepen.io/2021/03/25/custom-emmet-snippets-with-multiple-cursors/
If you use the CodePen console to `.console.log()` stuff, we've improved that a bunch just this week.
https://blog.codepen.io/2021/03/22/console-upgrades/
RT Jhey 🐻🛠
CSS Color Tip! 🪄
Use HSL to generate shades 😎
Store in CSS variables ✨
Preprocessor? Generate them with a loop! 🔥
Check this demo where you can generate and copy 🙌
Then apply! 💪
.element {
background: var(--shade-5);
}
👉
http://codepen.io/jh3y/pen/JjEjJjN
RT Mikael Ainalem
The tilt to make room for a menu is a nice effect and quite easy to accomplish with CSS transform and opacity transitions. The effect is similar to the mobile Safari tab experience. Demo on @CodePen
https://codepen.io/ainalem/full/MWJYqQE
https://twitter.com/mikaelainalem/status/1374439868881772544
RT Jon Kantner
So Much Unzipping
https://codepen.io/jkantner/pen/YzNPYWB
RT Chris Gannon
Micro-economics @CodePen
https://codepen.io/chrisgannon/pen/wvoXeWg
RT Christina Gorton
The first podcast I was ever asked to be on was @CodePen Radio. I was sooo excited to talk with Marie.
This week I get to do the interviewing and chat with @MMosley !!! Join us on Wednesday to talk CodePen, community and more!
https://dev.to/listings/events/walkthrough-wednesday-with-marie-mosley-4i6o
https://twitter.com/coffeecraftcode/status/1374093821445820421
RT Ana Tudor 🐯
Re All Pens in the article, whether they're illustrations, interactive explainer demos or examples or steps to building them... they can all be found in this @CodePen collection
https://codepen.io/collection/XEqKxZ
RT Yoav Kadosh
Interested in learning some new CSS tricks? I just published a detailed tutorial on how I made this realistic red switch using CSS only!
@ThePracticalDev #css #tutorial
https://dev.to/ykadosh/how-i-made-this-realistic-red-switch-pure-css-49g2
RT Elad Shechter
🤗 #CSS clip-path is easy to use and easy to animate with manipulating predefined coordinates
@CodePen:
https://codepen.io/elad2412/pen/gOLVEzb
RT Liam Egan
An awesome exercise in UX, designing and developing a simple tetradic colour picker. By @andyranged and @arielsaysmaybe
https://codepen.io/team/wtc/full/vYyoNaY
Build, test, and discover front-end code 👩🏽💻