Public
- Public
- Network
- Groups
- Popular
- People

Screenshot of my CodePen demo implementing this pattern of having a departure point and a destination as input fields and a button between them allowing to swap their values. In this case, the two inputs have a cutout where the round button in between them intersects them and a border following this cutout shape.

Download link

Screenshot of my CodePen demo implementing this pattern of having a departure point and a destination as input fields and a button between them allowing to swap their values. In this case, the two inputs have a cutout where the round button in between them intersects them and a border following this cutout shape.
https://files.mastodon.social/media_attachments/files/113/288/992/804/302/592/original/9cb61aa2435cee36.png

Notices where this attachment appears

Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Friday, 11-Oct-2024 23:01:58 JST Ana Tudor 🐯
in reply to

The third is something I quickly made to answer a question I saw on reddit https://reddit.com/r/css/comments/1fwm87i/comment/lqg11fl/
It's similar to something you can find on a lot of websites with a couple extra constraints:
✨ no extra elements, no pseudos
✨ working fine on top of image background
#CSS #cssGradient #mask #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

In conversation about a month ago from mastodon.social permalink