@RT Tom Hinton
Quick little thing for @CodePen's
#CodePenChallenge: Round. @threejs , @greensock and some shader bits.
https://codepen.io/TomHinton/pen/dyjLmya
RT Mike-麥-Mai/index.html
I get asked about #typography a lot, so I put together this manual for anyone who is not a type snob.
Typography is a visual judgment so these guidelines could be very opinionated, but I live by them and I believe my type is beautiful.
#css @CodePen
https://codepen.io/mikemai2awesome/pen/qBygNwq
https://twitter.com/mikemai2awesome/status/1621649884292997120
RT Amit Sheen
The Exploding Cube
(#CSS only)
Live demo @CodePen:
https://codepen.io/amit_sheen/full/poZKRye
Good thing to know: the very first time you flip a Pen from Private to Public, *that's* the day it enters our feeds. So that's when you're friends start to see it in their Following feed and it starts being ranked for the Trending feed and all that.
The February #CodePenChallenge starts now!
This month, we're working with shapes 🔵🔶🟩
https://codepen.io/challenges/2023/february/1
RT ics-kitagawa
CSS trigonometry demo 2/3
menu UI
See demo on codepen↓
#css #trigonometry
https://codepen.io/ics-kitagawa/pen/eYjbwMq
RT T. Afif @ CSS Challenges
A nice "Pop out" hover effect featuring some CSS masters 😎 (@argyleink @shadeed9 @KevinJPowell )
Demo:
Want to know the secret behind?
Read my new @css article 👉
Share a demo with your own avatar 👇
#CSS
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 💡 CSS Tip!
Add a nice hover effect to your profile picture using a minimalist code
✅ No extra element (only the <img> tag)
✅ No pseudo-element
✅ Less than 20 declarations
✅ Optimized with CSS variables
Demo:
#CSS
http://codepen.io/t_afif/full/MWBjraa
</div> https://twitter.com/ChallengesCss/status/1621528175468748802
RT Fabio Ottaviani
Just created a sleek and smooth carousel of images on @CodePen ! Check it out - it works with drag and mousewheel and is built with pure #JavaScript and #CSS, no frameworks needed 🔥 #webdev #frontend #webdesign
Code:
https://codepen.io/supah/pen/xxJMbbg
RT jhey 🔨🐻✨
Lil CSS Tip for this one 🤏
You could use :has() to detect when a galaxy is being :hovered and set the custom cursor coordinates 🤔
:root:has(.galaxy:hover) .cursor {
--x: var(--gravity-x);
--y: var(--gravity-y);
}
@CodePen link below! 👇
<div class="rsshub-quote">
GreenSock: Oooh. This forum question is a fun little coding challenge 👀
https://greensock.com/forums/topic/35585-how-can-i-achieve-this-effect-in-codepen-effect-canvas-with-dom-elements-please-help-im-very-confused-about-the-working-of-the-code/
</div> https://twitter.com/jh3yy/status/1621240679874678784
"Genuary 4 - Intersections" by @stranger_intheq
https://codepen.io/strangerintheq/pen/vYaXVwL
RT GreenSock
👾 Such a great example of how to utilise Draggable to control animations.
Watch @Ryan_LaBar make it on the @FrontendHorse stream -
https://codepen.io/elegantseagulls/pen/eYRgXpd
https://frontend.horse/episode/animating-input-interactions-in-space
RT T. Afif @ CSS Challenges
🎨 CSS Pattern!
Demo:
More CSS-only patterns 👉
#CSS
http://codepen.io/t_afif/full/gOjZwbQ
http://github.com/Afif13/CSS-Pattern
https://twitter.com/ChallengesCss/status/1621147625532854282
RT Cassie Evans
Alright. go on, I'll bite.
SVG & @greensock
<div class="rsshub-quote">
Andreas Storm: This button is under high voltage ⚡️
https://dribbble.com/shots/20500124-Electro-Button
</div> https://twitter.com/cassiecodes/status/1621207188973752320
RT Kass 🦈
CSS Art ⭐️Nintendo Switch ⭐️
Code:
This one was surprisingly easy. Took about 3-4 hrs.
https://codepen.io/kassandrasanch/pen/mdPRyVx
https://twitter.com/KassandraSanch/status/1621176099152564229
RT Álvaro Montoro
10 Cool CodePen Demos (from January'23)
https://alvaromontoro.medium.com/10-cool-codepen-demos-january-23-85cc91743dc
https://twitter.com/alvaro_montoro/status/1620480266564435970
RT Jon Kantner
This plane takes off or lands when you toggle airplane mode!
https://codepen.io/jkantner/pen/rNrZqPV
RT Binadiegha.js 🥑
my attempt at coding it lol, Not the best work but it's the thought that counts I guess 🙂🥴 ... #HTML and #CSS
#code
Codepen:
<div class="rsshub-quote">
Andreas Storm: This button is under high voltage ⚡️
https://dribbble.com/shots/20500124-Electro-Button
</div> https://twitter.com/jbg4k/status/1620460576442028035
RT Max Swann
Who knows their RGB from their HWB?
I owe a pint to the first person that gets 5 "perfect" answers 🍻
Color Guessing Game #codepenchallenge
https://codepen.io/maxcswann/pen/XWBZQKm
RT Mike-麥-Mai/index.html
Typespecimen. A tribute to Matthew Carter, inspired by a t-shirt he gave me long ago.
#typography #css #design @CodePen
https://codepen.io/mikemai2awesome/pen/zYLLJzy
https://twitter.com/mikemai2awesome/status/1620058604958281729
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
