CSS can be annoying to deal with because sometimes HTML Elements don't just go in the flow that you want them to go. In This Article, we will talk about 5 unknown Useful properties I bet you do not know about e.g did you know that with one CSS property you can re-color images, and resize not only <textarea> but other elements plus much more. So Stay Tuned and enjoy.
1. The Filter Property
This is one of the most unknown but useful CSS property. The CSS Filter Property allows you to apply graphical effects on HTML Elements such as blur, brightness, contrast and so much more. This is incredibly useful because you can recolor images and adjust the rendering of backgrounds, and borders.
To know more about The CSS Filter Property Check out The Mdn docs.
2. The Visibility Property
This property is also unknown and also Useful. The Visibility property allows you to hide elements but keeps their space in the DOM. When you apply display:none it removes the element completely from the DOM but with the visibility property it hides it but the space is still there. in summary, it just makes the Element Invisible.
3. The Object Fit Property
We all know how images can be difficult and hard to make responsive, plus hard to maintain aspect ratios. There are different ways of controlling Images but that is an article for another day. The object fit property basically allows altering the alignment of HTML Elements such as <img> within the element's box. In Summary, you can stretch the image, scale-down the image, and treats images Like Background images. To know more check out Mdn
4.The Resize Property
This is also unknown but not that useful, the CSS resize property sets whether an element is resizable,
and if so, in which directions (vertical or horizontal or both). To make a regular div resizable just give it resize:both and make sure the overflow property is set to visible overflow: visible. The resize property does not apply to inline elements or block line elements that their overflow has been set to hidden. To learn more check out mdn
5.The Text-shadow Property
This is kind of like box-shadow for text, but this property is more precise and accurate at applying shadows to text. This property is super powerful so do not underestimate it, to learn more.
6. Bouns (The CSS Content Property)
A Lot of you might already know about the CSS property it just bascially allows us to replace an element with a generated value. There is a lot more to This powerful property I bet you do not know, did you know that you can change and src of an <img> with the content property? To learn more check out Mdn
Conclusion
in Conclusion, Thank you for reading, if you enjoyed it leave a reaction and comment down below on your best CSS property, and do not forget to follow me for better content coming up peace ✌🏽✌🏽.
Top comments (1)
The Filer and Visibility properties are two I would like to use more.