@
RT Elissavet 👩🏽💻
For this week's @CodePen challenge, I got to work on a portfolio demonstration page, featuring a #masonry grid gallery:
I used the
#codepenchallenge #FrontEnd #development
https://codepen.io/elisavetTriant/pen/bGMaEVp
https://github.com/desandro/masonry
RT Louis Hoebregts
Inspired by @Ayliean recent video, I made a pure #CSS version of the Cardioid (& more) shapes on @CodePen 💙🌈 Using @SassCSS 😊
Play with the options on the right to update the shape and hover each line to see where which number is connected to✨
Ayliean: Using straight lines to make curves…
Maths once again bending the rules beautifully✨
RT Chris Coyier
Whack the corners off of whatever.
clip-path: polygon(0 5%, 5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%)
Or better, for those non-zero and non-100's, use a fixed value and calc() to pull it down off 100, so they stay at 45-degree angles.
https://codepen.io/chriscoyier/pen/yvQQxM
RT James Grubb
GSAP's 'quickTo' method makes easing mouse events a lot easier
@PixiJS @greensock
https://codepen.io/limitedunlimited/pen/bGMaYxb
RT Cassie Evans
Re Stroke animation for funsies
https://codepen.io/cassie-codes/pen/ExLoLWR/5ad5a627e9be1e61b36f45df4adba63a?editors=0010
RT Louis Hoebregts
Sometimes when I'm bored I open a new @CodePen and start with a single element in the page.
This time I started with an input range and I made a slingshot from it to burst a bunch of inputs with @greensock ✨🎆
Completely pointless but it kept me busy 💁♂️
https://codepen.io/Mamboleoo/full/LYmOyEG
RT Google Fonts
In addition to its 2 variable axes, Nabla is also stacked with 7(!) customizable color palettes, making one of the most fun #colorfonts to play with. How fitting, since its design was inspired by isometric game design! Try out the palettes with this demo:
http://bit.ly/nablapalettes
It's the final week of the Fixer Uppers #CodePenChallenge!
This week, we're fixing up some portfolio problems 🛠
Thanks @balsamiq for sponsoring!
https://codepen.io/challenges/2022/september/4
RT JunesiPhone
CSS trick to "cut" out white items. Any children elements of the blend mode could be used to cutout any unwanted items. I used :after here incase the text was dynamic, then I would have the width.
https://codepen.io/junesiphone/pen/jOxLxBK
RT Yoav Kadosh
Generative gradient blobs!
Randomly generated & animated SVG blobs with vivid gradients.
Demo & code available on @CodePen
https://codepen.io/ykadosh/pen/XWqKyqg
RT Ana Tudor 🐯🖤🌻
Re Anyway, if you've ever wanted to create a couple of equally spaced handles on top of an element, you can do it without any extra elements or pseudos and with only one CSS gradient.
Answer to this SO question:
@CodePen live demo:
https://stackoverflow.com/a/73816622/1397351
https://codepen.io/thebabydino/pen/XWqawMd
RT Eri TSUKISHIRO / Hanegi Design Office
⚡️ Text Animation Practice.. ⚡️
#dailyexperience 001 Scale Text Animation
@CodePen
#css #html #javascript #DailyUI #codepen
#駆け出しエンジニアと繋がりたい
https://codepen.io/ozono_1031/pen/BaxdNdE
RT Jon Kantner
Changing Face Rating
https://codepen.io/jkantner/pen/YzLQoXM
RT Hyperplexed
Recreating the interactive image gallery effect from:
See it on #codepen:
3 min tutorial:
https://bridget.pictures/
https://cdpn.io/BaxROox
https://youtu.be/Jt3A2lNN2aE
RT GreenSock
💚 There's so many GSAP treasures on @CodePen to uncover.
Do you have any favourites for us to add to our collection?
We're loving this little draggable sausage dog from @natszafraniec
https://codepen.io/natszafraniec/pen/QWpprJJ
RT George Park
This week I challenged myself to learn something new so picked up @tailwindcss for this first time using out-the-box styles to build a decision tree component, check it out on @CodePen
https://cdpn.io/poVwZzP
RT Ana Tudor 🐯🖤🌻
Back to canvas a bit, so here's some canvas stuff I made over the years on @CodePen:
💫 circular trail
🌸 paper flower
🚗 retro tile me
🌟 neon hex (my most hearted 🥇 demo ever)
https://codepen.io/thebabydino/pen/avwKGw
https://codepen.io/thebabydino/pen/ZbKgbV
https://codepen.io/thebabydino/pen/gpZaMw
https://codepen.io/thebabydino/pen/zGmdep
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
