This post is also available, originally, in a Twitter thread and in Portuguese, on Tabnews
⭐ – WHAT WILL I SHOW?
In this Post, I’ll show you some AMAZING CSS PROPERTIES that you DEFINITELY don’t know about!
If you’re new here, I always post programming content on my Twitter! Feel free to follow and give suggestions!
✅ 1 – mix-blend-mode
This property allows you to control how an element blends with the content of its parent element and the background element.
With it, you can create UNIQUE overlay effects, among MANY other things!
✅ 2 – shape-outside
This one allows you to wrap content around a specific shape, like a circle, a triangle, a polygon, and MANY others.
This is GREAT for creating more interesting and creative layouts for your website.
✅ 3 – backdrop-filter
This property applies filtering effects, such as blur or color inversion, to the background of an element, including nested elements.
With this, you can create some visual effects that make the page INCREDIBLY more beautiful!
✅ 4 – scroll-behavior
You know when you want to automatically scroll to somewhere on your page? This property will save you!
With it, you can configure how the scroll will be, whether it will be fast, linear, smooth, HOWEVER you want!
✅ 5 – clip-path
With this property, you can cut elements IN ANY SHAPE YOU PREFER.
You can make a geometric shape, a star, ANYTHING, making your page UNIQUE and INCREDIBLY BEAUTIFUL.
✅ 6 – object-fit
This one’s for you who CAN’T DEAL with an image!
With this property, you can place an element HOWEVER YOU WANT over another, whether by filling it, cutting it to make a mask, ANYTHING.
✅ 7 – perspective
I KNOW you often want to create some 3D effect on your Website and always end up going for some library.
With THIS property, you define the user’s perspective in relation to the Z axis of the website, GREATLY IMPROVING any 3D you’re going to do!
✅ 8 – column-count AND column-gap
These two properties allow you to divide the content of an element into a specific number of columns and define the space between these columns.
With this, everything becomes MUCH more organized, it can SAVE a website!
Learn more about column-gap!
Learn more about column-count!
✅ 9 – image-rendering
You know when the image is on the website, but it looks a bit weird?
THIS PROPERTY allows you to DEFINE how an image will be rendered!
Whether it’ll be pixelated, with sharper edges, YOU CHOOSE.
✅ 10 – word-wrap
You know when that text of yours is ALL MESSED UP on the page, overflowing the container and everything?
Well, this property allows you to BREAK the sentence WHENEVER YOU NEED!
NO MORE MESSED UP SENTENCES, NO MORE BAD TEXTS, NEVER AGAIN!
⭐ BONUS – text-overflow
This property, just like the previous one, allows you to IMPROVE THAT MESSED UP TEXT by 100%
With it, you can put ‘…’ at the end of a sentence that doesn’t fit in the container, for example, and MUCH MORE.
THIS HAS SAVED ME A LOT
😄 – THANK YOU
The last thread didn’t reach as many people, but even if none of my threads yield results, I WILL ALWAYS CONTINUE POSTING.
Hope you enjoyed! Remember that this post is also available on TabNews and DevTo!
My last thread: https://twitter.com/Luciano655dev/status/1769868521863835956
Also check out my other projects!
better-format: https://github.com/luciano655dev/better-format
DayKeeper (in dev): https://github.com/luciano655dev/daykeeper
THANK YOU!
