CSS is Cascading Style Sheets and used as a way of describing your content on the webpage. It is one of the essential things that every web developer learns. The Level of CSS can be basics, and to show the things you built on the web, you need knowledge of CSS. The looks of the website matter in the eye of viewers.
Although people think that CSS can only do a few things like giving our HTML code colors, background images, etc. but CSS can do more than that. In the past year, CSS has become powerful and able to create animation, create art, which brings art and life to the stunning website as we saw on the internet.
Many of us try to learn and master the CSS and learn popular properties. So it is worth it to know some unique properties to CSS that can help you in creating a stunning website.
In this article, I will talk about a few CSS properties that will change the way of using CSS. Let's Start!!!!
1. Centering Element using grid
Have you ever struggled with the Centering of your elements on the page? There are many ways to center your elements. In this section, I will go through the easiest one I found for myself. Since the grid Layout Model came in the CSS, It changed the way of making layout and became very popular. But we can also use the grid Box model to change alignment fast and easy. There is a property in the grid by the name place-items Let's take a code example to see this property centering the element because it aligns both horizontally and vertically to center the element since the grid is based on the idea of two-dimension.
Isn't that easy? I used display: grid,place-items in the parent, and it centers the element.
2. 3-D Transform
Have you ever thought of giving the third dimension to the element or images? CSS can do much cool stuff like this. These properties also help in creating animation like a card-flip effect. You can rotate your element in 3-D using the perspective, which creates the 3-D space by affecting the distance between Z-plane and user. Let's take the example of code to see the effect in the image.
In the code above, we have given the parent element as the property of perspective in terms of pixels to give the depth we want from the user. In children, I used the transform property to rotate in the 3-D dimension. You can rotate in the Y direction. Now let's check the possibility of rotating along the X-axis.
In this case, we can see the posture of our image changed since we change the rotation axis
Isn't this amazing What can we do with CSS?
3. Building Different Shapes using clip-path
Most of the time we want to be creative and want to build some shape like a triangle and star. We start thinking about SVGs, but now you can create these complex shapes in CSS using clip-path property in CSS which allows you to show the specific region of the element instead of showing the full area. This trick can be beneficial in creating CSS art. Let's take the example of code to see it in action!!
In this example, I used the clip-path polygon properties. I used the image as a background to cut the specific region and voila you have this excellent shape.
Stuck with writing those numbers, You can make your own clip-path using
website: Clippy
4. Changing the Text-Color using Background-Clip
This property can be excellent if you want to change the color of the text or want to come with a beautiful background in the text. This property clips a background to text and applies that background to the color of the text. To apply that, we need to set the color property to transparent. Let's take the example of the code to see this property in the action
I used the property -webkit-background-clip: text and set the color to transparent. In my case, I used the background as a linear gradient to change the color of the text. You can use other backgrounds as well.
5. Shape-Outside
This is also one of the unique properties in CSS. Sometimes when we want to wrap the text around some circular or some other shape, we get stuck. This property solves this problem, which is shape-outside. It controls how the element wraps around the floating element. It can take many shapes like a circle, polygon, and even the URL of the image to wrap the text around it. Let's see one example to understand this property
In this example, you can see that We positioned the image element using float property. We set the value of shape-outside to the circle at 50%. You can try giving other shapes as well.
Conclusion
We want to create amazing websites, and sometimes we find to apply these techniques difficult, which can be implemented using the little effort.
I hope you find this unique tricks and property helpful and hope it will be useful in the future journey. If you find any new CSS tricks, Share your favorite with me in comments and with social media. Feel free to leave a comment
Thank You and Have a nice day!!!
Top comments (0)