Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

jhey ʕ•ᴥ•ʔ

146,233 subscribers

207,921 görüntüleme • 2 yıl önce •via X (Twitter)

Eğitim Sanat Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

10 Yorum

Pacorro profil fotoğrafı

Pacorro2 yıl önce

that border thing detail

Kaspar Püüding profil fotoğrafı

Kaspar Püüding2 yıl önce

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

Jon Sutherland profil fotoğrafı

Jon Sutherland2 yıl önce

Will max height work for it to then scroll?

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈2 yıl önce

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

Kyle TechSquidTV profil fotoğrafı

Kyle TechSquidTV2 yıl önce

That's magic.

Christian Williams profil fotoğrafı

Christian Williams2 yıl önce

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

Justin profil fotoğrafı

Justin2 yıl önce

I need this now

Jikku Jose profil fotoğrafı

Jikku Jose2 yıl önce

I was thinking it requires JS!

Bug Buster 🐞 CLONE profil fotoğrafı

Bug Buster 🐞 CLONE2 yıl önce

How did you create that border effect, @jh3yy ?

Bug Buster 🐞 CLONE profil fotoğrafı

Bug Buster 🐞 CLONE2 yıl önce

Do you have a YouTube channel?

Benzer Videolar

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

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

TIL about `field-sizing: content` in css

TIL about `field-sizing: content` in css

Jonnie Hallman

150,898 görüntüleme • 1 yıl önce

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

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

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

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

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

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

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

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

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

messin' with text using CSS + SVG 🤌

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 görüntüleme • 1 yıl önce

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

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

Star Resonance Database

19,515 görüntüleme • 11 ay önce

we're getting closer inches away..

we're getting closer inches away..

🥯

15,994 görüntüleme • 2 yıl önce

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

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

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

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

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

Mark Federschmidt

32,762 görüntüleme • 1 ay önce

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