Text can be Shrinked or condensed using some HTML and CSS properties, you can use this animation in your websites as headings or sub-headings, the below sections will guide you on how to create the desired effect.
HTML Code: In this section we have simple div element which contains the text separated with span tags.
CSS Code: In this code fisr we design the div element using basic CSS properties and then to create the shrink effect we use the nth-child() Selector and set the letter spacing to -1em when we hover over the text.
Final Code: It is the combination of the above two code sections.
- How to Create a Summary Element that can Expands but never Shrink using HTML ?
- CSS | flex-shrink Property
- How to spin text on mouse hover using HTML and CSS?
- How to rotate a text 360 degrees on hover using HTML and CSS?
- How to Skew Text on Hover using HTML and CSS?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- How to Shake Text on hover using HTML and CSS?
- How to Shift Inline Elements When Text Bold on Hover using CSS ?
- How to create long shadow of text without using text-shadow in HTML and CSS ?
- How to make container shrink-to-fit child elements as they wrap?
- Text Animation with changing the color of the text using HTML & CSS
- How to create Skewed Background with hover effect using HTML and CSS?
- How to create paper corner fold effect on hover by using HTML and CSS?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- Shake a Button on Hover using HTML and CSS
- How to Create Image Overlay Hover using HTML & CSS ?
- How to Zoom an Image on Mouse Hover using CSS ?
- How to zoom an element on Hover using CSS ?