9 CSS Tricks for you to create 66.6% more elegant styles! 😍😍😍
👇 Follow Thread 🧵
1. Use inset property instead of using top, bottom, left, right. It is a really convenient shortcut! 😌
2. Easily add commas for each item in the list with :not(:last-child)::after! 😊
3. Easily change text selection color with ::selection!
4. Use aspect-ratio for adjusting the ratio of elements automatically.
So you can add only width or height and CSS will calculate the ratio internally!
5. Use clamp() allows you to set a font-size, width, height, border, etc that grows with the size of the viewport, but doesn't go below a minimum value or above a maximum!
6. Use background-blend-mode with background-image property for creating an amazing mix of colors and images!
7. Use :first-letter to be able to style only the first letter in a paragraph!
Book-style with only one property!
8. The ::selection allows you to change styles for selected text on your website!
9. By using mask-image with background-image you can add very interesting shapes for your pictures with ease!
That's all folks! 🔥🧯
If you found this thread useful, please consider following @eugZolotarenko and retweeting the first tweet. 📢
Extra one!
Text containers not always need to be rectangular!
Just use shape-outside for your image to create different unusual shapes for texts!
Go to the Top of the Tweet 👇
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.