Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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

jhey ʕ•ᴥ•ʔ

146,233 subscribers

207,921 Aufrufe • vor 2 Jahren •via X (Twitter)

Bildung Kunst Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Pacorro

Pacorrovor 2 Jahren

that border thing detail

Profilbild von Kaspar Püüding

Kaspar Püüdingvor 2 Jahren

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

Profilbild von Jon Sutherland

Jon Sutherlandvor 2 Jahren

Will max height work for it to then scroll?

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

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

Profilbild von Kyle TechSquidTV

Kyle TechSquidTVvor 2 Jahren

That's magic.

Profilbild von Christian Williams

Christian Williamsvor 2 Jahren

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

Profilbild von Justin

Justinvor 2 Jahren

I need this now

Profilbild von Jikku Jose

Jikku Josevor 2 Jahren

I was thinking it requires JS!

Profilbild von Bug Buster 🐞 CLONE

Bug Buster 🐞 CLONEvor 2 Jahren

How did you create that border effect, @jh3yy ?

Profilbild von Bug Buster 🐞 CLONE

Bug Buster 🐞 CLONEvor 2 Jahren

Do you have a YouTube channel?

Ähnliche Videos

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! 👇

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,151 Aufrufe • vor 2 Jahren

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

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 Aufrufe • vor 2 Jahren

TIL about `field-sizing: content` in css

TIL about `field-sizing: content` in css

Jonnie Hallman

150,898 Aufrufe • vor 1 Jahr

¡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:

¡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 Aufrufe • vor 10 Monaten

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

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

Adam Argyle

92,826 Aufrufe • vor 6 Monaten

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

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

jhey ʕ•ᴥ•ʔ

43,591 Aufrufe • vor 1 Jahr

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 ⛳]

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 Aufrufe • vor 6 Monaten

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

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

Wes Bos

111,608 Aufrufe • vor 2 Jahren

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

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

Superseed

17,878,804 Aufrufe • vor 3 Monaten

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

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

Z.ai

13,655 Aufrufe • vor 6 Monaten

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; }

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 Aufrufe • vor 1 Jahr

🔥 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 👌

🔥 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 Aufrufe • vor 1 Jahr

messin' with text using CSS + SVG 🤌

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 Aufrufe • vor 1 Jahr

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

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

Star Resonance Database

19,515 Aufrufe • vor 11 Monaten

we're getting closer inches away..

we're getting closer inches away..

🥯

15,994 Aufrufe • vor 2 Jahren

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

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

Hat-Loving Gamer

24,521 Aufrufe • vor 1 Jahr

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.

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 Aufrufe • vor 1 Jahr

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 🚀

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 Aufrufe • vor 1 Jahr

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

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

Mark Federschmidt

32,762 Aufrufe • vor 1 Monat

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.

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,796 Aufrufe • vor 3 Jahren