🧑🏽🎨 Designer who codes 🎨 CSS Art https://xitter.cf/t.co/JxZ0b1CGlH 💻 I retweet content about UI/UX, Design Systems, Figma, HTML and CSS 🇪🇸🇬🇧
Nayarit 🇲🇽
Joined July 2014
- Tweets2.1K
- Following597
- Followers408
- Likes15.4K
Pinned Tweet
I made a responsive animation only with css of a musical video that I like it. No SVG, no images, no js. You can view full it from anywhere device in @codepen
codepen.io/Jopzik/full/JjYyj…
Por fin Norte (Japanese Version) está en mis manos y no fue gracias a @thelittlejesus que no ha sacado más CDs, sino a una amiga que lo estuvo cazando
pd: ya saquen ESDC en CD 🫵🏽
Hey @masumparvej_ @huge_icons is it possible to keep outline option after close the plugin?
Alexiz Mora retweeted
UIデザインパターンを
全部1ページにまとめた
辞典サイトを作りました！
ハンバーガーメニュー、カンバン、OTP入力、ボトムシート…108種のUIパターンを「名称 × ミニチュア実物」で一覧できます。
「あのUI、名前なんだっけ？」
そんな疑問が一発で解決します。
検索・カテゴリ別表示・詳細モーダル付き
🔽 Webサイトはこちら
ui-design-dictionary.pages.d…
Alexiz Mora retweeted
table of contents marker w/ modern css 🧑🍳
.toc { scroll-target-group: auto; }
a:target-current { anchor-name: --active; }
.toc::after {
position-anchor: --active;
top: anchor(top);
}
fun progressive enhancement, no js 🤙
Day 15 of building cool ideas I love 🚀
Been super occupied, but I had some time to work on this blog post animation using CSS and JS
I am curious @jh3yy if this can be done with only css
Alexiz Mora retweeted
The new CSS heading selector is so good! This will make it much easier to style headings all at once.
ALT :heading { font-family: var(--geist-mono); text-wrap: balance; } :heading(1, 2, 3) { font-weight: 900; }
Alexiz Mora retweeted
Getting the screen dimension with a simple calc? Yes, it's possible!
css-tip.com/screen-dimension…
We are still waiting for Firefox to join the game, and the code below will become the favorite one of many developers!
(Until then, there is another method with better support)
ALT The following CSS code: :root { --w: calc(100vw/1px); --h: calc(100vh/1px); }
Alexiz Mora retweeted
JavaScript Tip ⭐️
Avoid setTimeout when dealing with element animations ⚠️
Use Element.getAnimations() and tap into the animation lifecycle instead of guessing 🙏 Great for unmount animations in React, etc.
Let your CSS be the source of truth 🥇
JavaScript && CSS Tip! 🎞️
Need to do something or detect when a bunch of CSS transitions/animations end? 📽️
You can use document.getAnimations() 🤙 and await the finished Promises of those animations 😎
const animations = document.getAnimations()
.map(a => a.finished)
await Promise.all(animations)
A handy but often overlooked JavaScript API 🤙
Pretty cool if you need to hook into some staggers or places where you aren't using WAAPI, etc. ✨
Take this demo. It's toggling an attribute on click. That could fire any transitions/animations defined in our CSS. We use getAnimations() to grab the animations and use a Promise so we know when they're all finished. You could even filter by the animation name, target, etc. ⚡️
Check the console out for the demo 👀
@CodePen link below! 👇
A refresh for my portfolio (and taking the opportunity to delete all the Tailwind code)
alexiz.design/
Alexiz Mora retweeted
The component audit widget is live!
It scans your Figma library, then:
– Shows components by page
– Shows components missing variables/styles
– Lists components without descriptions
– Lists components without links
– Print a summary frame for a log
figma.com/community/widget/1…
Hey @jh3yy there is a guy selling some or your Codepens on Buymeacoffe
buymeacoffee.com/andevweb/e/…
Alexiz Mora retweeted
💡 CSS Tip!
Do you know that One-Time password field? You can create it using only one input and a few lines of CSS.
The HTML: <input type="text" maxlength="6">
Code & Demo: css-tip.com/single-digit-inp…
You can control the number of characters by adjusting the maxlength attribute.
Alexiz Mora retweeted
Use CSS Grid to stack items, and visibility: hidden to hide/show spinner.
This approach allows the largest item to size the button, and keeps the button text accessible
