@RT ✨ Lawrie ✨
It's a bank holiday, so this 100% counts as a Sunday #animation: BURGER MENU🍔
Done in #GSAP in the amount of time it took me to make & drink a cup of tea, which is practically light-speed for me ☕
https://codepen.io/indextwo/full/YzNmdyr
RT Ana Tudor 🐯
If you have a couple of minutes, you can see me code this cubes pattern from scratch in a quick video:
Live on @CodePen:
Ana Tudor 🐯: And here's another simpler #cssChallenge2021: code this in under 200 bytes of CSS!
Palette:
- cube: e8122e f5ec07 0662f5
- background: 161125
RT Shadow Scientist
Created CSS Sketch Effect ✏️
@CodePen:
Inspired by @IMAC2's tweet, here is a good collaboration of CSS filters and mix-blend-mode property that produces a sketch effect. No DIVs included.
https://codepen.io/shadow-scientist/pen/gOgNBrb
https://twitter.com/ShadowShahriar/status/1388765568681926657
The May #CodePenChallenge starts today!
This month's theme is The Animal Kingdom 🦁
For week one, let's take flight with Birds 🦚
https://codepen.io/challenges/2021/may/1
RT Jhey 🐻🛠 (Exploring Opportunities ✨)
3D CSS Cuboid Generator ⚒️
Create responsive CSS cuboids that you can control with scoped CSS custom properties 💪
Leveraging scope is a neat way to keep things DRY 🤓
Hit the CodePen logo to edit on CodePen 😎
🧱 @reactjs && @prismjs
👉
http://codepen.io/jh3y/pen/MWJdqBo
RT David Fitzgibbon
Had a little fun trying to recreate "Twisted" by @junkiyoshi in #threejs I got close, but the original is way more polished!
CodePen:
https://codepen.io/loficodes/pen/ExZzdVO?editors=1000
RT Bence
Tinfoil Terrain ⛰ (424 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/BapeGmO
RT Pratham
Re 3️⃣ Headphones 🎧
Complete code:
https://codepen.io/prathkum/pen/wvgLaZP
RT Chris Coyier
I love this little UI tweak @shshaw slipped into @CodePen in our last round of Team Management improvements. As you change context between yourself and a team, your individual avatar remains, just smaller and within the team avatar.
RT carl schooff
(1/1) #Frontend Challenge Fun!
Can you take the starter demo linked below and make 9 orange boxes match the stacking order and layout shown in the image?
starter demo
#HTML #CSS #JavaScript #30DaysOfCode
see thread for more info
https://codepen.io/snorkltv/pen/XWpwYMy?editors=1000
RT Brent Morton
Is it🌑or🌕? When you stay up all night playing with a project that reminds you what time it every time you test it.... And still up working on it😅
@greensock fun on @CodePen
https://codepen.io/b1m1nd/pen/bGgEEqJ
RT Tanner Dolby
CSS Movie Camera 📽️ #codepenchallenge #CSS
Hide and reveal interaction by clicking on the movie camera for this weeks CodePen challenge!
@CodePen:
https://codepen.io/tannerdolby/pen/YzNgveQ
RT Adrian Roselli
Seeing lots of nifty designs in this week’s Hide & Reveal #CodePenChallenge.
If you want to really level up your pattern try an accessible disclosure:
Consider focus:
Avoid tool-tips in general?
https://adrianroselli.com/2020/05/disclosure-widgets.html
https://adrianroselli.com/2020/10/dialog-focus-in-screen-readers.html
https://sarahmhigley.com/writing/tooltips-in-wcag-21/
RT Mikael Ainalem
Using clip-path: path(...) to create an appear effect consisting of repeated shapes on @CodePen
https://codepen.io/ainalem/full/ZELZKwg
https://twitter.com/mikaelainalem/status/1387168679964692480
RT DEV Community 👩💻👨💻
Re @nickytonline and @coffeecraftcode will be joined again by @jh3yy today @ 1pm ET on thePracticalDev Twitch stream. Come hang out while we try to create a fun sloth animation for the Twitch stream! 🦥
https://dev.to/listings/events/pair-programming-with-jhey-1old
https://twitter.com/ThePracticalDev/status/1387436733101379590
RT Una Kravets 👩🏻💻
Don't forget to link your labels to your checkboxes and radio inputs!
https://codepen.io/una/pen/LYxvbqb
RT Elissavet Triantafyllopoulou 👩🏽💻
Double challenge today! #codepenchallenge and Day 2 of #100daysofcodechallenge!
For the @CodePen challenge with the prompt to create a microinteraction that hides or reveals content, I created this pen:
Thanks to @pluralsight for being a great sponsor.
https://codepen.io/elisavetTriant/pen/ExZJxpw
RT Hai Le
Just wanted to share something I had been working on, it is a recreation of the NES game Duck Hunt but in CSS (no images!) sprites are made up of individual elements with checkbox styles used to apply branching logic
https://codepen.io/hailedev/pen/MWJLGOq
https://twitter.com/MisfitDeveloper/status/1386265890895798272
RT Louis Hoebregts
You can now find my #AppleEvent animation in a step by step demo on @CodePen 🤓
I've added some comments in the code to help you understand it 💡
https://codepen.io/Mamboleoo/pen/qBRQXPN
RT Adam Kuhn
how it started: trying to recreate a @beesandbombs animation w/ SVG
how it's going:
https://codepen.io/cobra_winfrey/full/XWpGZYb
https://twitter.com/cobra_winfrey/status/1387030162076745734
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
