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

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

На главную

💡 2 CSS tips for textareas: 1️⃣ Use `field-sizing: content` to make the textarea auto-resize to its content 2️⃣ Use `lh` units to set the height in the font's computed line-height units

boltdotnew's profile picture

bolt.new

121,673 subscribers

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

Наука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

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

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

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

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }
0:14

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }

Gabriel

86,969 просмотров • 3 месяцев назад

Skip writing complex JavaScript to make form elements like textarea fit user input 🍝 The field-sizing CSS property is a newly available Baseline feature that lets form controls naturally adjust their sizing to fit their contents. Find the documentation here →
0:10

Skip writing complex JavaScript to make form elements like textarea fit user input 🍝 The field-sizing CSS property is a newly available Baseline feature that lets form controls naturally adjust their sizing to fit their contents. Find the documentation here →

Chrome for Developers

16,453 просмотров • 26 дней назад

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

78,350 просмотров • 1 год назад

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙
0:18

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

jhey ʕ•ᴥ•ʔ

46,904 просмотров • 1 год назад

Not uncommon to see checkbox implementations make use of align-items: center which results in some awkward input positioning when the label text wraps. Instead you can make use of baseline which will align nicely across different line-height implementations.
0:16

Not uncommon to see checkbox implementations make use of align-items: center which results in some awkward input positioning when the label text wraps. Instead you can make use of baseline which will align nicely across different line-height implementations.

Alex Carpenter

46,466 просмотров • 1 год назад

Use Qwen Code to parse the PDF document into markdown content, and then translate it. Follow us for more AI tips and updates!
0:18

Use Qwen Code to parse the PDF document into markdown content, and then translate it. Follow us for more AI tips and updates!

Alibaba Cloud

86,653 просмотров • 8 месяцев назад

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇
0:16

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇

jhey ʕ•ᴥ•ʔ

66,034 просмотров • 1 год назад

We're transitioning into the height of Summer ☀️ Here's some tips on how to get the most out of the season in #AssassinsCreedShadows. 🎨 Paint the legendary White Tanuki (only available in Summer). 🌊 Use bodies of water like ponds as camouflage. 🌿 More foliage to keep hidden.
0:19

We're transitioning into the height of Summer ☀️ Here's some tips on how to get the most out of the season in #AssassinsCreedShadows. 🎨 Paint the legendary White Tanuki (only available in Summer). 🌊 Use bodies of water like ponds as camouflage. 🌿 More foliage to keep hidden.

Assassin's Creed

34,698 просмотров • 1 год назад

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗
0:17

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗

Ahmad Shadeed

29,912 просмотров • 4 месяцев назад

Only a few days left to enter in the Pixels Creator Contest. 1️⃣ Create content announcing Pixels coming to Ronin 🙌🏼 2️⃣ Reply to the original post below with your content 3️⃣ Submit the link to the "Pixels Creator Contest" quest on Moku HQ
0:15

Only a few days left to enter in the Pixels Creator Contest. 1️⃣ Create content announcing Pixels coming to Ronin 🙌🏼 2️⃣ Reply to the original post below with your content 3️⃣ Submit the link to the "Pixels Creator Contest" quest on Moku HQ

Moku✨

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

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().
0:11

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

24,796 просмотров • 5 месяцев назад

‼️NEW FREE UNITS EVENT REVEALED Head to Cyclops on the new Krakoa social hub map and claim daily units for 7 days in a row, up to 300 units per day. Also, invite friends to the 'Tandem Tides' event to unlock limited-time rewards
0:12

‼️NEW FREE UNITS EVENT REVEALED Head to Cyclops on the new Krakoa social hub map and claim daily units for 7 days in a row, up to 300 units per day. Also, invite friends to the 'Tandem Tides' event to unlock limited-time rewards

Marvel Rivals Intel

342,998 просмотров • 3 месяцев назад

The Colossus of Constantine, reconstructed in its full 12-metre height, soon to go on display at the Capitoline Museums in Rome.
0:19

The Colossus of Constantine, reconstructed in its full 12-metre height, soon to go on display at the Capitoline Museums in Rome.

Wanted in Rome

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

The ultimate group hug. Sperm whales are incredibly social creatures that use touch and 'codas' (clicking sounds) to bond with their family units.
0:16

The ultimate group hug. Sperm whales are incredibly social creatures that use touch and 'codas' (clicking sounds) to bond with their family units.

Oceaiii🐋🐬

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

The content creator quickly use the victory mood to take a selfie with Lamine Yamal. 👋
0:19

The content creator quickly use the victory mood to take a selfie with Lamine Yamal. 👋

POOJA!!!

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

“Welcome to our trash revolution.” Mayor Adams introduces the new bin that buildings with 1-9 units will be required to use instead of loose bags of garbage
0:11

“Welcome to our trash revolution.” Mayor Adams introduces the new bin that buildings with 1-9 units will be required to use instead of loose bags of garbage

Liam Quigley

30,078,759 просмотров • 2 лет назад

Never underestimate colored lineart ✒️🎨 Make your coloring process faster with this auto action asset! 🔗 Download here: How to use: 1️⃣ Download & load the asset in Clip Studio Paint 2️⃣ Merge your coloring layers into one 3️⃣ Select the coloring layer & run the auto action 4️⃣ Place the generated clipping layer over your lineart ✨ Done!
0:12

Never underestimate colored lineart ✒️🎨 Make your coloring process faster with this auto action asset! 🔗 Download here: How to use: 1️⃣ Download & load the asset in Clip Studio Paint 2️⃣ Merge your coloring layers into one 3️⃣ Select the coloring layer & run the auto action 4️⃣ Place the generated clipping layer over your lineart ✨ Done!

CLIP STUDIO PAINT

27,543 просмотров • 1 год назад

$STRX Airdrop 💸 🥳 To participate… 1️⃣ Like, RP & Follow Tradestrike 2️⃣ Use cross-chain swaps in StrikeX Wallet 3️⃣ Use same-chain swaps in StrikeX Wallet Get the App 👉 #Airdrop
0:14

$STRX Airdrop 💸 🥳 To participate… 1️⃣ Like, RP & Follow Tradestrike 2️⃣ Use cross-chain swaps in StrikeX Wallet 3️⃣ Use same-chain swaps in StrikeX Wallet Get the App 👉 #Airdrop

Tradestrike

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