very rad!!!! 💫

Just finished my submission for the amazing Amply X Webflow Challenge

What do you think about the interactions in this one? 🧑‍🍳

This was done in #Webflow with the new @gsap-greensock.bsky.social interactions panel

#AmplyHolidayChallenge

very cool component @lailalalami.com

Sneak peek of my new @framer.com component

After some feedback from the Framer team, I'm adding a new field to make it more customizable

This free component will allow you to add 2 images and customize the pixel size, color, etc

SDG

This was done mainly on HTML and CSS only. With Javascript being used only for toggling a class name.

Original Instagram post: www.instagram.com/p/DLyt8qPCIxX/

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

Take a look here and let me know your thoughts!

billantony.com

Tech stack:
* Plain HTML 🟠
* Plain CSS 🔵
* Jekyll -> Static site generation 🔴
* No Javascript 🙅

I like this simple approach and hope to take this initial website design a lot further down the road

Great day! ✌️

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 👇

Figma design of the Sundae creative website

Learning to UI design by copying masterworks. Pt. 1.

I'm recreating the design made by Locomotive agency in the website sundaecreative.com/en

I chose this one because of the compelling design b but also you get what thee website is about just by looking at the hero section

✨ Been waiting for this one! ✨

24 layers on the cannon, 64 balls, and not a single inline variable. All powered by sibling-index() and sibling-count().

Working with multiple elements just got way easier! 🤩
(Currently on Chromium only)

🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

such a creative use case for it @amitsheen.bsky.social !!
Thanks for sharing ✨

Home We strategically connect lifestyle brands with audiences who provoke, inspire, and convert.

This is screenshot is from the beautiful (and well designed) website by #Locomotive agency sundaecreative.com/en

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

In this case, I knew this container was the one because it had a `overflow-x: hidden`

There you go! Fixed

One of my main goals is to help #Shopify merchants with their existing stores so they don't have this kind of bugs

So if you are one, feel free to reach out 👋

SDG

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

👇👇👇

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 👨‍💻

👇👇👇

oh, thanks @gsap-greensock.bsky.social ! I'll try that out :)

thanks @una.im and all the hard working chrome team!!!

Although transforming properties other than `transform` and `opacity` is not so great for performance really because by changing any other property will trigger repainting 🙃

But, this is the only choice for now 🎉

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 👇👇👇

How to solve:

Simply do

`overflow: visible`

on THAT parent element ✅

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`

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 👇

Link to the Webflow site: tinyurl.com/3cc2xsbf

This is a rebuild from the Market Vision Website marketvision.ca

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 👇👇

When you scroll up (in Safari on iOS) you'll see the browser bar in the bottom of the website, covering the content of the website 🙅
(See 1st image)

To prevent your content to be covered by the browser bar, use the env variable named safe-area-inset-bottom
(See 2nd image) ✅

SDG.

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);

2°C EARTH A visual guide that explores the ramifications of our increasingly warmer planet through five locations around the world whose natural and cultural heritage is threatened by climate change.

A beautiful website/message: www.2-c.earth