Загрузка видео...

Не удалось загрузить видео

На главную

We're getting closer 🤏 input, textarea { field-sizing: content; } Auto-resizing text inputs with one line of CSS 🚀

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,233 subscribers

207,921 просмотров • 2 лет назад •via X (Twitter)

ОбразованиеИскусствоНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Pacorro
Pacorro2 лет назад

that border thing detail

Фото профиля Kaspar Püüding
Kaspar Püüding2 лет назад

Wow, only multi-line truncation left and the web is perfect?

Фото профиля Jon Sutherland
Jon Sutherland2 лет назад

Will max height work for it to then scroll?

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈2 лет назад

Yep – You can constrain it with a max number of lines and then set up the scrollbar for it 🤙

Фото профиля Kyle TechSquidTV
Kyle TechSquidTV2 лет назад

That's magic.

Фото профиля Christian Williams
Christian Williams2 лет назад

much needed, I have wrote this a million types in js

Фото профиля Justin
Justin2 лет назад

I need this now

Фото профиля Jikku Jose
Jikku Jose2 лет назад

I was thinking it requires JS!

Фото профиля Bug Buster 🐞 CLONE
Bug Buster 🐞 CLONE2 лет назад

How did you create that border effect, @jh3yy ?

Фото профиля Bug Buster 🐞 CLONE
Bug Buster 🐞 CLONE2 лет назад

Do you have a YouTube channel?

Похожие видео

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇
1:31

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,170 просмотров • 2 лет назад

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:
1:04

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:

Wes Bos

203,517 просмотров • 2 лет назад

TIL about `field-sizing: content` in css
0:35

TIL about `field-sizing: content` in css

Jonnie Hallman

150,898 просмотров • 1 год назад

¡POR FIN se puede hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "field-sizing: content" Soporte del 72% en navegadores. Mira la demo:
0:27

¡POR FIN se puede hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "field-sizing: content" Soporte del 72% en navegadores. Mira la demo:

Miguel Ángel Durán

111,424 просмотров • 10 месяцев назад

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)
0:39

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

Adam Argyle

92,826 просмотров • 6 месяцев назад

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇
0:39

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jhey ʕ•ᴥ•ʔ

43,591 просмотров • 1 год назад

very cool – scale text to fit width w/ 1 line of css 🧑‍🍳 a { text-grow: per-line/consistent scale; } great for link blocks, hero text, etc. [flagged in Chrome ⛳]
0:26

very cool – scale text to fit width w/ 1 line of css 🧑‍🍳 a { text-grow: per-line/consistent scale; } great for link blocks, hero text, etc. [flagged in Chrome ⛳]

jhey ʕ•ᴥ•ʔ

51,106 просмотров • 6 месяцев назад

🔥 3 CSS tips for styling <textarea> you probably didn't know about
2:18

🔥 3 CSS tips for styling <textarea> you probably didn't know about

Wes Bos

111,616 просмотров • 2 лет назад

We're getting closer to launch day. Be first in line for Ethereum's first Supermarket 👀
0:32

We're getting closer to launch day. Be first in line for Ethereum's first Supermarket 👀

Superseed

17,878,804 просмотров • 3 месяцев назад

GLM-4.6V can accept multimodal inputs of various types and automatically generate high-quality, structured image-text interleaved content.
0:28

GLM-4.6V can accept multimodal inputs of various types and automatically generate high-quality, structured image-text interleaved content.

Z.ai

13,655 просмотров • 6 месяцев назад

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }
0:25

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

51,127 просмотров • 1 год назад

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌
1:00

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

Wes Bos

23,420 просмотров • 1 год назад

messin' with text using CSS + SVG 🤌
0:26

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 просмотров • 1 год назад

✨We're getting closer and closer! #BlueProtocolStarResonance #StarResonance #BPSR
1:52

✨We're getting closer and closer! #BlueProtocolStarResonance #StarResonance #BPSR

Star Resonance Database

19,515 просмотров • 11 месяцев назад

we're getting closer inches away..
1:44

we're getting closer inches away..

🥯

15,994 просмотров • 2 лет назад

We're getting closer to a Mario Kart with 101 players... #nintendo #mariokartworld
2:12

We're getting closer to a Mario Kart with 101 players... #nintendo #mariokartworld

Hat-Loving Gamer

24,521 просмотров • 1 год назад

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.
0:25

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

111,954 просмотров • 1 год назад

works great on blocks of text too 🤙 .text { --duration: calc(var(--text-length) * 0.12s); animation: shimmer var(--duration) infinite; } @​keyframes shimmer { 0% { background-position: 100% 0; } } animation-duration maps to the text length using CSS custom properties 🚀
0:39

works great on blocks of text too 🤙 .text { --duration: calc(var(--text-length) * 0.12s); animation: shimmer var(--duration) infinite; } @​keyframes shimmer { 0% { background-position: 100% 0; } } animation-duration maps to the text length using CSS custom properties 🚀

jhey ʕ•ᴥ•ʔ

100,165 просмотров • 1 год назад

One step closer. 🚀🚀🚀🚀🚀🚀🚀🚀
1:00

One step closer. 🚀🚀🚀🚀🚀🚀🚀🚀

Mark Federschmidt

32,762 просмотров • 1 месяц назад

Bark Text-to-Audio Model Full Text Input: "Why was six afraid of seven?" Ignore Bark's "I'm done with this input" token and tell Bark to just keep generating more audio anyway.
1:47

Bark Text-to-Audio Model Full Text Input: "Why was six afraid of seven?" Ignore Bark's "I'm done with this input" token and tell Bark to just keep generating more audio anyway.

Jonathan Fly 👾

461,799 просмотров • 3 лет назад