Скачать или смотреть line-height unit on background layers to emphasize multiple lines of text responsively! ⚡️

CSS Tip! ⭐️

You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️

h1 {
background: linear-gradient(white, white), grey;
background-size:
100% calc(var(--lines) * 1lh), 100% 100%;
background-clip: text;
color: transparent;
}

Here you emphasize the first two lines of the heading with white using a sized background-image layer

It has a size of 2lh ✨

Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎

Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙

Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥

Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo

Have a play with it and see what you can come up with!

#ytshorts #html #css #javascript #programming #trendingshorts #trend #youtubeshort #ytshort #yt #ytshortsindia #shortsvideo #shorts #shortsfeed #shortfeed #viral #trending #viral #ui #webdevelopment #website #webdesign #webdeveloper #webdesigner #web3 #html #html5 #codepen #css #css3 #javascript #jquery #angular #react #creative #creativity #video #videos #vlog #vlogs

🎯 SUBSCRIBE to get more amazing AI Videos!

► https://www.youtube.com/@3sdcode?sub_...