Bill A. Llach

UI Animation/Interaction Rebuild 2: Untitled Folder: Interactive This one is sort of a recreation from The Brand Identity Store after effects template I saw this on a @codrops.bsky.social animation roundup and I thought about building something like it Codepen: codepen.io/tony_code/pe... SDG

UI Animation/Interaction Rebuild 2: Untitled Folder: Interactive This one is sort of a recreation from The Brand Identity Store after effects template I saw this on a @codrops.bsky.social animation roundup and I thought about building something like it Codepen: codepen.io/tony_code/pe... SDG

Just launched my new portfolio site/blog! 🎉 After a lot of thinking and procrastination haha I finally released my personal portfolio out there in the World Wide Web This is the first blog I truly own and I feel very happy to share the things I've learned in that way The styles are very minimal 👇

how to do that effect of having the text color be the inversion of its background? 🎨 Only CSS is needed: ``` mix-blend-mode: difference; ``` On the parent element that defines the color ✌️ SDG

Weird Scrollbar in your announcements banner of your #Shopify store? 🟢 Not an issue anymore I found this beautiful designed Shopify store for Detour Coffee Roasters detourcoffee.com But I noticed they had this annoying scrollbar in their announcement bar and I decided to do smth about it 👨‍💻 👇👇👇

The fix is very easy! just add `overflow-y: hidden` to the overflowing container How do you know which one is the "overflowing container"? Well, you can inspect and see the one that has a width bigger than the page width or the one that has a `overflow` property set 👇👇👇

Recreation of the Market Vision Website in code! 🏢 Done with @gsap-greensock.bsky.social Codepen link: codepen.io/tony_code/pe... At first, I thought this was a matter of scale(x) but the image looked awfully blurred in Safari The solution: transform the `width` instead!! More 👇👇👇

Outlines not showing up when tabbing to it? 🙅 Having outlines when the user tabs to an interactive element is very important to make websites #a11y (accessible) This especially important for links At work, I had this task where I needed to add focus outlines on a link block (card) Continue 👇

It was a strange situation because the outlines were actually set in the element ``` a:focus-visible { outline: 2px solid Highlight; } ``` Still, the outlines didn't show up when focusing by keyboard After inspecting and googling, I discovered the issue Parent element with `overflow: hidden`

Hero with shrinking title interaction 🔵 Made using @gsap-greensock.bsky.social and #Webflow! The new GSAP visual editor in Webflow is so nice 🤌 It finally helped me understand how the start/end setting from Scrolltrigger worked! Link in the next one 👇👇

Hero with shrinking title interaction 🔵 Made using @gsap-greensock.bsky.social and #Webflow! The new GSAP visual editor in Webflow is so nice 🤌 It finally helped me understand how the start/end setting from Scrolltrigger worked! Link in the next one 👇👇

New Web CSS Design Tip! ✌️💻 Use environment variables in CSS for changing the display of your web elements depending on the browser navigation bar (for iOS expecially) The vars are: env(safe-area-inset-top); env(safe-area-inset-right); env(safe-area-inset-bottom); env(safe-area-inset-left);

How to Show the Blogs page in your #Shopify storefront So, I've seen merchants struggling with the fact that after they create their blog posts, they can't see it in their Shopify site Thankfully, the solution is simple This steps can be replicated in almost any theme 1. Go to Content

6. Give it the name you want and in "Link", look for Blogs > The name of the blog you want to publish

How to Show the Blogs page in your #Shopify storefront So, I've seen merchants struggling with the fact that after they create their blog posts, they can't see it in their Shopify site Thankfully, the solution is simple This steps can be replicated in almost any theme 1. Go to Content

4. Now, to display it publicly to your site visitors, go to Content > Menus

How to Show the Blogs page in your #Shopify storefront So, I've seen merchants struggling with the fact that after they create their blog posts, they can't see it in their Shopify site Thankfully, the solution is simple This steps can be replicated in almost any theme 1. Go to Content

2. Blog Posts The default blog that all Shopify stores have is called "News"

Make sure your scrollable containers are focusable If you have a scrollable horizontal section — pretty popular nowadays — please, make that container focusable

! It is unaccessible to have a scrollable element that can’t be focused by keyboard Continue in the next thread... #a11y