正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Got inspired by Resend's keyboard component, made something similar using pure CSS. This way, its configurable during runtime, so you can change the text and colour to your liking.

balint

2,694 subscribers

185,581 次观看 • 1 年前 •via X (Twitter)

科学技术教育艺术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

dot matrix tricker component made with css and canvas inspired by Marijana Pavlinić's wonderful portfolio → (still wip)

dot matrix tricker component made with css and canvas inspired by Marijana Pavlinić's wonderful portfolio → (still wip)

Maxime

14,670 次观看 • 1 年前

Build UI interactions in Rive like this smooth, responsive disclosure inspired by Nitish Khagwal. Using the Layout direction feature (in Early Access), it just takes a single property to add support for RTL languages and you can populate your text dynamically at runtime.

Build UI interactions in Rive like this smooth, responsive disclosure inspired by Nitish Khagwal. Using the Layout direction feature (in Early Access), it just takes a single property to add support for RTL languages and you can populate your text dynamically at runtime.

Philip Chung

31,612 次观看 • 1 年前

This octopus-camouflage inspired polymer can change colour and texture.

This octopus-camouflage inspired polymer can change colour and texture.

nature

26,511 次观看 • 9 个月前

Made a random projects during the end sem : Make your retro photos using it and post it on Twitter 😋 - you can add different filters in your image - can change the background colour - can download the png - mobile responsive too Here is the link:

Made a random projects during the end sem : Make your retro photos using it and post it on Twitter 😋 - you can add different filters in your image - can change the background colour - can download the png - mobile responsive too Here is the link:

Sam ☕

24,636 次观看 • 11 个月前

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Surjith S M ✪

169,711 次观看 • 3 年前

there is something off about this design - it's the vertical text alignment this new CSS feature just made aligning text 100x easier

there is something off about this design - it's the vertical text alignment this new CSS feature just made aligning text 100x easier

Wes Bos

45,245 次观看 • 9 个月前

made typo - a typing test website inspired by this cool keyboard link in comments do checkout and lemme know your scores :)

made typo - a typing test website inspired by this cool keyboard link in comments do checkout and lemme know your scores :)

Khushi🪐

29,883 次观看 • 7 个月前

Row-level actions + confirmation toast. Interaction design made entirely in Figma using component states and some keyboard hacks 😁

Row-level actions + confirmation toast. Interaction design made entirely in Figma using component states and some keyboard hacks 😁

virgil pana

15,506 次观看 • 1 年前

Trying out Omarchy by DHH and there is something incredibly fulfilling (and scary!) being table to change your OS just by talking to it in plain English. Since Omarchy is keyboard-centric I've changed the OS so it shows keyboard shortcut every time I DON'T use it. Very helpful.

Trying out Omarchy by DHH and there is something incredibly fulfilling (and scary!) being table to change your OS just by talking to it in plain English. Since Omarchy is keyboard-centric I've changed the OS so it shows keyboard shortcut every time I DON'T use it. Very helpful.

Jano Suchal

19,091 次观看 • 2 个月前

New timeline component pushes CSS grid to its absolute limit 🥵

New timeline component pushes CSS grid to its absolute limit 🥵

Caleb Porzio ⚡️

152,076 次观看 • 8 个月前

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,591 次观看 • 1 年前

Built a modular and dynamic CHUNK type system component in Framer using React and pure CSS. I created a responsive construction system first, then hand crafted every single letter and number in CSS so each glyph has its own structure, balance and character. As the frame changes, the typography reshapes rather than just scales. Part font, part layout engine, part self-inflicted obsession.

Built a modular and dynamic CHUNK type system component in Framer using React and pure CSS. I created a responsive construction system first, then hand crafted every single letter and number in CSS so each glyph has its own structure, balance and character. As the frame changes, the typography reshapes rather than just scales. Part font, part layout engine, part self-inflicted obsession.

Lee Black

10,580 次观看 • 6 个月前

To get to the endgame, sometimes you have to change the game. Introducing the CSTM80: an enthusiast keyboard with an ultra-impressive spec sheet—and a never-before-seen customizable component:

To get to the endgame, sometimes you have to change the game. Introducing the CSTM80: an enthusiast keyboard with an ultra-impressive spec sheet—and a never-before-seen customizable component:

DROP

13,515 次观看 • 3 年前

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source

Om Patel

154,230 次观看 • 6 个月前

lol used the wrong svg function. updated it so you can still set text color with css (and have transparent backgrounds)

lol used the wrong svg function. updated it so you can still set text color with css (and have transparent backgrounds)

Mark Hurrell

41,264 次观看 • 2 个月前

ok.. this is crazy OpenAI 4o now can generate and edit image with text prompt, you can change small detail like text, logo and.. it's super accurate 100% AI. 10 examples: 1. design a name card for Elon Musk, and change logo, name, phone number and colour

el.cine

319,509 次观看 • 1 年前

Created by the best, vetted by your favorites, the ALIENWARE Pro Line will change the way you play🏆 Get ready to #BreakThroughYourGame with the Alienware Pro Wireless Mouse & Keyboard 👽

Created by the best, vetted by your favorites, the ALIENWARE Pro Line will change the way you play🏆 Get ready to #BreakThroughYourGame with the Alienware Pro Wireless Mouse & Keyboard 👽

Team Liquid

192,800 次观看 • 2 年前

CSS Tip! ✨ You can make your component styles portable with container queries 😎 Change a card layout based on size 🔥 Remove button text when it's small 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} CodePen.IO link below 👇

CSS Tip! ✨ You can make your component styles portable with container queries 😎 Change a card layout based on size 🔥 Remove button text when it's small 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

311,706 次观看 • 3 年前

1. Convert UI design to front-end code Prompt: Convert this design into a react component using tailwind css

1. Convert UI design to front-end code Prompt: Convert this design into a react component using tailwind css

Robin Delta

41,075 次观看 • 2 年前