All about CSS3 for Absolute Beginners: Part 12
Hello future software engineers! I hope you're enjoying and admiring the power of advanced CSS. Let's get our hands on game-changing topics of CSS.
Clip Path Property
Have you ever wondered how to create complex shapes like triangles, ovals, and polygons in CSS? Till now, we have only been able to create a square or rectangular box. Clip path is a modern and advanced function in CSS that allows us to craft shapes of our choice.
Clip path does this by clipping parts of the element just like the overflow property equals clip would. You can pass the design in x and y coordinates.
.container {
clip-path: circle(30%);
}
This would clip 30% of the container div and turn it into a neat circle. A higher percentage will result in more clipping of the element, giving the final element a smaller size.
Instead of circle, you can type ellipse, polygon, oval or inset. For an ellipse, you can pass two values for x and y. For polygon, pass 8 values in percentage and for an inset pass values for each side. Try them out one by one and observe the behavior.
Perspective Property
This property is a bit hard to explain in words because it's a 3D effect. It makes the element appear far from the user. Try applying it and then you'll notice the difference with and without it. As always, take the container div, give it some dimensions, a background color and a border to make it a nice box, then apply a perspective of 100 pixels. Observe the change and slowly increase or decrease the value for a better idea.
CSS Animations with @keyframes
We can animate various elements in CSS with the help of the @keyframes function. Let's understand with the help of an example:
We wish to move an element 200 pixels to the right. For that, the most convenient will be the translate function.
transform: translateX(200px);
This code can easily move any element to the right. For left, use a negative value.
We want to make the element move when the page loads up and it should keep moving infinitely.
It will reach its destination (200 pixels to the right) and reset its position from where it started, then again reach its destination. This will result in an infinite loop. To create this animation, let's use @keyframes:
@keyframes moveRight {
From {
transform: translateX(0);
}
To {
transform: translateX(200px);
}
}
.container {
/* usual dimensions and background color for a representable box */
animation: animate 3s ease-in-out infinite;
}
Let’s break the code down for better understanding. First we define an animation named moveRight. You can give any name of your choice.
Then we define the from keyword. This lets CSS know about the starting point of the animation.
Finally we have the to keyword that tells CSS what should be the final state after the animation.
In this case, it starts with 0 pixels and ends on 200 pixels of movement.
The animation property defined in the container class triggers the animation on the element.
After the animate keyword, give the timing of the animation, let's say 3 seconds.
The ease-in-out is the behavior and speed of the animation. These values are very similar to the transition property.
Instead of infinite, you can also pass the number of times it will run, let's say 4.
To and from keywords are for basic animations that involve a starting and an ending state. However, if you want events to happen between them, then percentage values will help.
Let's say you want the box to move left when the animation is 25% done, then you want it to move downwards at 50%, left at 75% and finally top at 100%. Here is how it may look like:
@keyframes moveAccordingToPercentage {
0% {
transform: translateX(0px);
}
25% {
/* negative value for left */
transform: translateX(-100px);
}
50% {
transform: translateY(50px);
}
75% {
transform: translateX(-150px);
}
100% {
transform: translateY(-100px);
}
}
That's how your keyframes are likely going to look when using percentage. It gives more control over the animation.
Using Variables in CSS
Sometimes you may want to store some exact values and use them multiple times in your code.
Maybe a primary color of your brand is a HEX value and needs to be given to several elements and text in your webpage. In this way, your code will look repetitive and harder to maintain.
For example, if there is a need to change the primary color, you will have to go and locate all the elements it is applied to and then change it one by one. For convenience, the concept of variables is introduced in CSS.
With variables, you can store any value in it and give it a descriptive name. A variable in CSS starts with two hyphens and the variable name:
--primary-color: #424bf5;
You can store these variables in the root of your HTML. It is a pseudo class that makes your variables available to the whole stylesheet.
:root {
Here we have stored a primary color and a default space. Now whenever you give a margin or padding, you won't have to repetitively give the same value; instead, use the default space variable.
Always use hyphens to write multiple words in a variable; don't use a space.
When using the variable, simply use the var function and pass in the variable name. Like this:
background-color: var(--primary-color);
Wrapping up
I think it's enough for today and let's focus on practicing multiple times. Experiment as much as you can with these properties and their values. If you feel stuck, resources like Google or AI chatbots can be incredibly helpful.
If there's anything you feel like discussing with me, then feel free to leave a comment or just reach me via the contact us page and I will try my best to help out.