Lucas Vogel
@vogelino.bsky.social
Swiss-Chilean interface designer and software developer based in Santiago (Formerly @CityLAB Berlin), specialising in UI/UX design and Frontend Development, currently working Freelance. Portfolio on lucasvogel.click
New post on instagram for the website of the Paris-based architecture practice a-roh, founded by architects Agathe Sautet & Matthieu Friedli. Check it out:
www.instagram.com/reel/DMSlnMY...
www.instagram.com/reel/DMSlnMY...
Login • Instagram
Welcome back to Instagram. Sign in to check out what your friends, family & interests have been capturing & sharing around the world.
www.instagram.com
July 19, 2025 at 1:17 PM
New post on instagram for the website of the Paris-based architecture practice a-roh, founded by architects Agathe Sautet & Matthieu Friedli. Check it out:
www.instagram.com/reel/DMSlnMY...
www.instagram.com/reel/DMSlnMY...
Reposted by Lucas Vogel
how long til we see a browser come out of OpenAI??
July 8, 2025 at 6:37 PM
how long til we see a browser come out of OpenAI??
This video was generated using remotion.dev. It allows the generation of motion graphics using React.
Using it is a total blast! I took advantage of it to promote the revamp of my portfolio. Check it out at lucasvogel.click!
Using it is a total blast! I took advantage of it to promote the revamp of my portfolio. Check it out at lucasvogel.click!
June 30, 2025 at 7:36 PM
This video was generated using remotion.dev. It allows the generation of motion graphics using React.
Using it is a total blast! I took advantage of it to promote the revamp of my portfolio. Check it out at lucasvogel.click!
Using it is a total blast! I took advantage of it to promote the revamp of my portfolio. Check it out at lucasvogel.click!
The Web Platform Status is a great resource for knowing the browser support of web features, their baseline status, and adoption among web developers. It provides an API, which can be helpful for automating compatibility issue detection.
webstatus.dev
webstatus.dev
Web Platform Status
webstatus.dev
June 30, 2025 at 10:40 AM
The Web Platform Status is a great resource for knowing the browser support of web features, their baseline status, and adoption among web developers. It provides an API, which can be helpful for automating compatibility issue detection.
webstatus.dev
webstatus.dev
Run tests for web vitals and resource budgets on each deployment or on a schedule with this very useful GitHub action:
github.com/treosh/light...
github.com/treosh/light...
GitHub - treosh/lighthouse-ci-action: Audit URLs using Lighthouse and test performance with Lighthouse CI.
Audit URLs using Lighthouse and test performance with Lighthouse CI. - treosh/lighthouse-ci-action
github.com
June 27, 2025 at 10:27 AM
Run tests for web vitals and resource budgets on each deployment or on a schedule with this very useful GitHub action:
github.com/treosh/light...
github.com/treosh/light...
Reposted by Lucas Vogel
#CSS scroll-state() container queries:
the "stuck" query
```css
@container scroll-state(stuck: top) {
box-shadow: var(--shadow-5);
border-radius: var(--radius-3);
margin: var(--size-5);
}
```
article coming soon!
(currently in Canary experiments)
the "stuck" query
```css
@container scroll-state(stuck: top) {
box-shadow: var(--shadow-5);
border-radius: var(--radius-3);
margin: var(--size-5);
}
```
article coming soon!
(currently in Canary experiments)
December 5, 2024 at 12:55 AM
#CSS scroll-state() container queries:
the "stuck" query
```css
@container scroll-state(stuck: top) {
box-shadow: var(--shadow-5);
border-radius: var(--radius-3);
margin: var(--size-5);
}
```
article coming soon!
(currently in Canary experiments)
the "stuck" query
```css
@container scroll-state(stuck: top) {
box-shadow: var(--shadow-5);
border-radius: var(--radius-3);
margin: var(--size-5);
}
```
article coming soon!
(currently in Canary experiments)
Reposted by Lucas Vogel
One of my favourite UI patterns is using `backdrop-filter` to create a “frosted glass” effect.
When I see this effect in the wild, though, it’s almost never as lush and realistic as it could be. There’s an important optimization that nobody makes.
✨ I share the secret sauce in my brand-new post:
When I see this effect in the wild, though, it’s almost never as lush and realistic as it could be. There’s an important optimization that nobody makes.
✨ I share the secret sauce in my brand-new post:
Next-level frosted glass with backdrop-filter • Josh W. Comeau
Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most reali...
joshwcomeau.com
December 2, 2024 at 6:18 PM
One of my favourite UI patterns is using `backdrop-filter` to create a “frosted glass” effect.
When I see this effect in the wild, though, it’s almost never as lush and realistic as it could be. There’s an important optimization that nobody makes.
✨ I share the secret sauce in my brand-new post:
When I see this effect in the wild, though, it’s almost never as lush and realistic as it could be. There’s an important optimization that nobody makes.
✨ I share the secret sauce in my brand-new post:
Reposted by Lucas Vogel
CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜
li {
animation: bright;
animation-range: calc(50% - 1lh) calc(50% + 1lh);
animation-timeline: view();
scroll-snap-align: center;
}
@keyframes bright { 50% { opacity: 1; }}
line-height units are a gift 🎁
li {
animation: bright;
animation-range: calc(50% - 1lh) calc(50% + 1lh);
animation-timeline: view();
scroll-snap-align: center;
}
@keyframes bright { 50% { opacity: 1; }}
line-height units are a gift 🎁
December 3, 2024 at 8:15 AM
CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜
li {
animation: bright;
animation-range: calc(50% - 1lh) calc(50% + 1lh);
animation-timeline: view();
scroll-snap-align: center;
}
@keyframes bright { 50% { opacity: 1; }}
line-height units are a gift 🎁
li {
animation: bright;
animation-range: calc(50% - 1lh) calc(50% + 1lh);
animation-timeline: view();
scroll-snap-align: center;
}
@keyframes bright { 50% { opacity: 1; }}
line-height units are a gift 🎁
Reposted by Lucas Vogel
I got to write about one of my favorite HTML attributes.
It's a sharp knife, but it can make a world of difference for the user experience.
It's a sharp knife, but it can make a world of difference for the user experience.
On day 2 @kilianvalkhof.com tells us where the autofocus attribute shines.
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
Starting off right: Where autofocus shines - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 2, 2024 at 7:43 AM
I got to write about one of my favorite HTML attributes.
It's a sharp knife, but it can make a world of difference for the user experience.
It's a sharp knife, but it can make a world of difference for the user experience.
Reposted by Lucas Vogel
Reposted by Lucas Vogel
〰️ CSS Spring Easing Generator
by Kevin Grajeda @k_grajeda
#css #SpringEasing #Bounce #webdev
www.kvin.me/css-springs
by Kevin Grajeda @k_grajeda
#css #SpringEasing #Bounce #webdev
www.kvin.me/css-springs
October 31, 2024 at 4:29 PM
〰️ CSS Spring Easing Generator
by Kevin Grajeda @k_grajeda
#css #SpringEasing #Bounce #webdev
www.kvin.me/css-springs
by Kevin Grajeda @k_grajeda
#css #SpringEasing #Bounce #webdev
www.kvin.me/css-springs
After impactful years at @citylab and @technologiestiftung Berlin, I'm venturing into freelance life. Explore my latest code and design portfolio at vogelino.com. Your insights and thoughts are valued—let's keep the conversation going for future collaborations!
Welcome – Vogelino
Interface design and development portfolio of Lucas Vogel
vogelino.com
December 9, 2023 at 12:29 PM
After impactful years at @citylab and @technologiestiftung Berlin, I'm venturing into freelance life. Explore my latest code and design portfolio at vogelino.com. Your insights and thoughts are valued—let's keep the conversation going for future collaborations!
In Figma, you can show different languages using variables, allowing you to have different writing styles, phone numbers, addresses, or even multiple currencies in your quotes or invoices. Create a different mode for each language and easily translate your designs!
www.linkedin.com/posts/vogeli...
www.linkedin.com/posts/vogeli...
October 22, 2023 at 10:37 AM
In Figma, you can show different languages using variables, allowing you to have different writing styles, phone numbers, addresses, or even multiple currencies in your quotes or invoices. Create a different mode for each language and easily translate your designs!
www.linkedin.com/posts/vogeli...
www.linkedin.com/posts/vogeli...
“If I saw my neighbor’s daughter playing with intestines, I’d call the cops.
But if only those happy children of yore could see me lavishing on their dying planet.”
Well said Taylor…
taylor.town/pigs-bladder
But if only those happy children of yore could see me lavishing on their dying planet.”
Well said Taylor…
taylor.town/pigs-bladder
October 5, 2023 at 12:27 PM
“If I saw my neighbor’s daughter playing with intestines, I’d call the cops.
But if only those happy children of yore could see me lavishing on their dying planet.”
Well said Taylor…
taylor.town/pigs-bladder
But if only those happy children of yore could see me lavishing on their dying planet.”
Well said Taylor…
taylor.town/pigs-bladder