@RT Chris Heilmann [email protected]
Generated quotes in CSS with content: '"'; in a ::before always look naff. TIL that you can do open-quote which looks better. Remember to also create a content: no-close-quote; in the ::after, or CSS will consider it nested quotes.
Try it here: https://codepen.io/codepo8/pen/eYLzyYK
#CSS https://t.co/pDefWhLi9v
RT Ksenia Kondrashova
Re Following the Fire 🔥 animation with Water 🌊shader. Same GLSL noise with different parameters.
Sketch #2: On-Scroll WebGL Water
https://codepen.io/ksenia-k/full/PodzbNe
Made with @threejs and @greensock
Hosted on @CodePen https://t.co/318lfu4VKe
RT GreenSock
👀 GSAP API dive
Today's hidden treasure is clamp.
A super handy util that allows you to clamp a number between a given min and max
Docs →
Demo →
https://buff.ly/3Er9nCU
https://buff.ly/3kdwwlC
RT jhey 🔨🐻✨
Shrove Tuesday (Pancake day!) in the UK yesterday 🥞
Here's a fun little 3D animated SVG pancake using @greensock 😁
You can be the chef and tap to flip it! 🧑🍳
@CodePen link below 👇
RT Ana Tudor 🐯🖤🌻
For this week's #CodePenChallenge, a pure #CSS responsive infographic
On the how behind it, I wrote this @css article
https://codepen.io/thebabydino/pen/gOdPzEK
https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/
RT LukyVj - A$AP Luky
👋 Hello!
🔥😎
@CodePen
of the day:
CSS grainy gradient animation with editable text. 🤯
✨Features✨
- CSS Gradients ✅
- Text Gradient ✅
- data-encoded SVG for grain ✅
- NO JS ❌
🔗
Let me know what you think!
#css #webdev #FrontEndDeveloper
<div class="rsshub-quote">
Framer University: Quick Tip:
You can create these gradient texts in @framer with @benjaminnathan's component.
1. Grab it from
2. Paste it into your project
3. Customize via properties
It is a great workaround for the built-in gradient's constraints.
https://mask.framer.wiki/
</div>
https://twitter.com/LukyVJ/status/1627604137645932545
RT Ksenia Kondrashova
Playing with Simplex noise today
Sketch #1: WebGL Fire & On-Scroll Animation
Demo & source code:
Made with @threejs and @greensock
Hosted on @CodePen
https://codepen.io/ksenia-k/full/wvEMqNR
RT kotAndy 🐾
I couldn't resist the challenge 😅 and I've created a Penrose Triangle on @CodePen #Codepenchallenge
https://codepen.io/kotAndy/full/LYJGyrB
RT LukyVj - A$AP Luky
😎👋As promised, I've recreated it on @CodePen ✨
I loved making it & animating the gradients🌈
Using:
- CSS keyframes ✅
- CSS custom properties ✅
- CSS variables ✅
- NO JS ❌
Link:
CrossBrowser incoming ➡️
#css #FrontEndDev
<div class="rsshub-quote">
Aleks: Framer February → Day 1 ✨
A quick and easy way to add a smooth, animated, gradient border to a card in @framer. Let's get started ↓
</div> https://twitter.com/LukyVJ/status/1627255031492751360
The Shape #CodePenChallenge continues!
This week, we're working all the angles, from triangles to rhombicosidodecahedrons 😳
https://codepen.io/challenges/2023/february/3
RT Ana Tudor 🐯🖤🌻
Re @CodePen Another very simple pure #CSS one: busy cuboids
Random cuboids generated on the grid using Pug.
Inspired by this Shutterstock video
#CodePenChallenge
https://codepen.io/thebabydino/pen/BaWmobM
https://www.shutterstock.com/video/clip-1038265412-abstract-3d-render-background-made-rectangular-shapes
RT Callum Macrae
It's been a few weeks, but - it's Codepen friday!
An experiment with generative lightning and representing it as text characters 🌩
https://codepen.io/callumacrae/full/YzOPqNz
RT Matthias Hurrle
Cubes. Move the camera with your mouse and explore the swarm from different perspectives. It’s a fascinating and hypnotizing experience. Try it yourself
https://codepen.io/atzedent/pen/jOvPNaL
RT Gayane Gasparyan 🛸
Finally got time (willing) to make my personal website! (a bit lazy version though 😀)
You can check "About" page animation code here ➡️ @CodePen
https://gayane.dev/
https://codepen.io/gayane-gasparyan/pen/LYJEoZM
RT LukyVj - A$AP Luky
Hey there! 👋
Check out these #CSS 3D flipping cards! 🎴
A little help from #Javascript to get cursor position & toggle classes, the rest is pure CSS! 🎨
😎 It works on all major browsers!
Let me know what you think! #webdesign #webdev
🔗Codepen :
<div class="rsshub-quote">
Framer University: 🪄 Add flipping 3D cards to your @framer website.
Just found @JoshGuoSpace's component that makes it possible to add 3D cards on your website.
1. Grab it from
2. Paste it into your project
3. Customize via properties
🔁 Retweet to share it with others.
https://3dcard.framer.website/
</div> https://twitter.com/LukyVJ/status/1626145753881055232
RT Carl 💥 Creative Coding Club
Just fiddling around with a thought I had regarding #SVG pattern animations with @greensock. Not sure it's the best use of time or way to get this result. Was fun to play around with it though.
explore the @CodePen demo:
https://codepen.io/snorkltv/pen/RwYwLKr??editors=0010
RT Jonathan Neal
Want to try @lightningcss in @CodePen?
This template passively loads it in the background and updates your CSS as you write it, even before you save. CSS Nesting is already turned on.
https://codepen.io/pen?template=b001ae61c7379e85bbbbd47ab27161a8
RT Chrome Developers
A quick icon button overview by @argyleink: full of tips, tricks, and snippets.
Get the code →
#GUISnippet
http://goo.gle/3xoywds
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
