Software Designer. Here to watch.
Colorado
Joined November 2008
- Tweets2K
- Following196
- Followers301
- Likes1.6K
Donya Inman retweeted
Had a small part as the Commentator in this film. Thank you Dean Cain for the opportunity. Looking forward to the release.
Donya Inman retweeted
curved scrollbar: completed it ✅
CSS + SVG to animate stroke-dashoffset combined with scroll-snap
This quoted post is unavailable.
Donya Inman retweeted
using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙
the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨
Donya Inman retweeted
#CSS linear() easing can be
soft, subtle and minimal
OR
firm, tense and loud
here's how I'm using it in a few areas of my site ❤️ so fun.
Donya Inman retweeted
Wildest #CSS media query I've written in a while
`@container (inline-size >= calc(100cqi - 120px))`
yep, `calc()` in a MQ!
WHY?
to re-anchor buttons to be "inside" when space is tight
video:
purple outline's are containers
nerdy.dev/carousel-adaptive-…
Donya Inman retweeted
Directional aware CSS button :hover w/ lh, text-shadow, and linear()
button:has(span:nth-of-type(2):hover) { --y: -1lh; }
button span:first-of-type {
translate: 0 var(--y);
transition: translate .875s var(--spring);
text-shadow: 0 1lh currentColor, 0 -1lh currentColor;
}
Donya Inman retweeted
💎 Notification Decision Tree
It will help you choose the right type of contextual notification depending on your goal
ALT Notification Decision Tree by Workday
Donya Inman retweeted
Today we have a fantastic tutorial on Codrops 🧑🏻🏫
@guilanier shows us how to use SDFs in Three.js to create a really beautiful interactive lens blur effect on simple shapes. Don't miss this!
Links below 👇
Thank you so much, Giom!❤️🔥
#threejs #webgl #frontend
Donya Inman retweeted
Playing with a grid animation concept based on @Daistudioo's work 🙌
Powered by CSS Grid and GSAP (Flip)!
Kudos to Rémi for this nice effect idea and for letting me code it up! 💙🙏
Links in the 🧵
Donya Inman retweeted
That `overlay` keyword is pretty wild.
steal this dialog and popover snippet #CSS
- transitions
- entry/exit
- backdrop included
ready for richer design system integration
try on Codepen
codepen.io/argyleink/pen/zYb…
![[popover], dialog, ::backdrop {
transition:
display 1s allow-discrete,
overlay 1s allow-discrete,
opacity 1s;
opacity: 0;
}
/* IN */
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
opacity: 1;
}
/* OUT */
@starting-style {
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
opacity: 0;
}
}](https://pbs.twimg.com/media/GOMWpmOa0AAw3zN.jpg?name=orig)
ALT [popover], dialog, ::backdrop { transition: display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s; opacity: 0; } /* IN */ :popover-open, :popover-open::backdrop, [open], [open]::backdrop { opacity: 1; } /* OUT */ @starting-style { :popover-open, :popover-open::backdrop, [open], [open]::backdrop { opacity: 0; } }
Donya Inman retweeted
calc()
var()
clamp()
fit-content(), repeat()
min(), max()
attr()
env()
color(), rgb(), hsl(), oklch()
circle(), polygon()
url()
translate(), scale(), rotate()
matrix()
invert()
sin(), cos(), tan(), pow(), hypot(), log()
steps()
scroll(), view()
def not a programming language
Donya Inman retweeted
Throwback to over a decade ago when playing with 3D in CSS was all the rage!
Remember interactive 3D books? 📚
So satisfying to watch and tinker with! Excited to see it back in fashion 🤩
Discover more 3D magic here (not just CSS): tympanus.net/codrops/demos/?…
Donya Inman retweeted
🎁 Designing Search UX In 2024. A free live 2h workshop on how people search and how we can design a first-class search UX today. Bring your friends! 🥳
📅 Thu, Feb 29
⏰ 9AM Pacific • 18:00 CET
📷 With video + slides
🎟️Reserve your spot (free!):
smashingconf.com/online-work…
#ux
ALT An illustration inviting attendees to join the workshop session, with a brief description, dates and a Smashing Cat trying to fetch a goldfish!
Donya Inman retweeted
Proof that the fundamentals of UI design have been forgotten 🤦♂️
Stack forms in a single column layout
✅ Efficient to complete
✅ Low interaction cost
✅ Consistent downward momentum
✅ Low cognitive load
📘 This is just 1 of 100+ design guidelines in my book @practicalUI
Donya Inman retweeted
🎉 Today we have some exciting news! We're merging frameworks! Angular and Wiz!
Keynote addressing the change here:
youtube.com/watch?v=nIBseTi6…
