Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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.

BalintFerenczy's profile picture

balint

2,694 subscribers

185,581 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitimSanat
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

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

Maxime

14,670 görüntüleme • 8 ay önce

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

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

nature

26,459 görüntüleme • 6 ay önce

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:
1:35

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 görüntüleme • 7 ay önce

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

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,689 görüntüleme • 3 yıl önce

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

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 görüntüleme • 6 ay önce

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

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

Khushi🪐

29,883 görüntüleme • 3 ay önce

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

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

virgil pana

15,506 görüntüleme • 11 ay önce

I made a midi controller with Svelte. This thing can be played by your computer keyboard, top two rows for keys, bottom row for chords. In locked key mode, you can change the key and play all chords within that key.
0:24

I made a midi controller with Svelte. This thing can be played by your computer keyboard, top two rows for keys, bottom row for chords. In locked key mode, you can change the key and play all chords within that key.

Scott Tolinski - Syntax.fm

30,503 görüntüleme • 1 yıl önce

New timeline component pushes CSS grid to its absolute limit 🥵
0:22

New timeline component pushes CSS grid to its absolute limit 🥵

Caleb Porzio ⚡️

151,296 görüntüleme • 4 ay önce

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!
0:27

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 görüntüleme • 1 yıl önce

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.
0:41

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 görüntüleme • 3 ay önce

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
0:40

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

152,549 görüntüleme • 3 ay önce

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 👽
0:47

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 görüntüleme • 2 yıl önce

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
0:23

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

317,766 görüntüleme • 1 yıl önce

If you have an asset in Figma and you'd like to change it's colour to your perferred colour (quick and efficient way), layer the colour over the image in "Fill" properties and apply a *colour* mix-blend mode to it. Exporting it as an asset has a different workflow.
0:45

If you have an asset in Figma and you'd like to change it's colour to your perferred colour (quick and efficient way), layer the colour over the image in "Fill" properties and apply a *colour* mix-blend mode to it. Exporting it as an asset has a different workflow.

seyi

16,832 görüntüleme • 2 yıl önce

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 👇
0:28

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,452 görüntüleme • 2 yıl önce

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

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

Robin Delta

41,075 görüntüleme • 2 yıl önce

This is text to video Burning Man I made today. A video made just by writing text! Made using Runway and #Gen2 Music isA.I. generated with Mubert.
0:39

This is text to video Burning Man I made today. A video made just by writing text! Made using Runway and #Gen2 Music isA.I. generated with Mubert.

Kris Kashtanova

340,604 görüntüleme • 3 yıl önce

It’s the little things… something so simple yet done wrong so often can change the way you hit the baseball… but are you paying attention to details?
1:49

It’s the little things… something so simple yet done wrong so often can change the way you hit the baseball… but are you paying attention to details?

Jonah Artiles

19,564 görüntüleme • 8 ay önce