5 Unique CSS tricks and properties that you should know

Shubham Singh — Wed, 22 Apr 2020 22:36:10 +0000

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!!!

The Guide to Building the Sprite Animation🐕‍🦺

Shubham Singh — Mon, 13 Apr 2020 20:18:29 +0000

I was free today on the weekend, so I thought of trying Something new In the CSS. I got the idea from looking at the sprite of the pokemon, and it could be fun to put them in the motion using CSS. Here is how I did it.

Sprite Animation idea is to putting many images together in a single image and applying the CSS. To make it possible and combining all the images into the single frame, I used the photoshop to put up on the stack and combined it into a single image.

Here is how it looks

I wrote the basic HTML as short as possible my content which I was going to uses as a background animation

<div class="sprite"></div>

To Animate Using CSS, I used keyframes to define the animation for the user and give the primary position to see the animation. I used the background properties to insert my image in HTML. I fixed the position of the image at 0 0 and used the keyframe, which adjusts my position of the background when it goes from 0% to 100%.

Since the height of the image was 481px, and there are 8 images combined in the single image, which sums up to 3848px. Then I applied that animation in my .sprite class and using the animation-timing-function. The function allowed me to fix my step to switch the animation since, In my case, there were 8 images, Keep in mind that the no of images you increase in the single image the size increase as well. I wanted to run my animation in the loop So, I used the animation-iteration-count and set it to infinity and ran it for 2s which can be chosen as per the needs. Below is the code for the CSS that I used

.sprite {
    width:547px;
    height:481px;
    display:block;  
    background:white url(run.png) 0 0 no-repeat;
    margin:3rem auto;
    animation: run 2s steps(8) infinite;
    }
@keyframes run{
    0%{
        background-position: 0 0;

    }
    100%{
        background-position: 0 -3848px;
    }
}

As a result you will get a nice sprite animation which in my case was dog

Isn't that awesome way to play with CSS animation 😎😎

DEV Community: Shubham Singh