7 Best Advanced CSS Tricks That Saves Your Time

As time passes by, CSS is turning out to be more powerful and these days it offers bunches of conceivable outcomes to make visually stunning websites. Do you know all the features of CSS technology? There is a large pool of hidden tricks in the CSS technology. Learning those tricks will help you to compete with the modern development industry. Here are some of the important CSS tricks that you must know.

Advanced CSS Tricks To Know In 2020-

1. Vertically Align With Flexbox-
Aligning the text or element at the center has always been a complicated task for most of the developers. As per the CSS3 specification, using display: flex property/value eases the way to vertically align any element.

Consider the following HTML:

I am vertically centered!

And the related CSS:

.align-vertically {
background: #13b5ea;
color: #fff;
display: flex;
align-items: center;
height: 200px;
}
display: flex specifies a Flexbox layout for element and align-items: center manages the vertical centering.

2. Hover effect-
This effect is used for icons, buttons, text links, block sections of site and so on. Whenever you have to change colors when someone hovers mouse through it, use the same CSS, but add :hover to it and change styling.

Here’s an example:

.entry h2{
font-size:36px;
color:#000;
font-weight:800;
}
.entry h2:hover{
color:#f00;
}
It changes the color of h2 tag from black to red when someone hovers through it. Best thing about using :hover is- if font size and weight is not changing then, you will not need to declare font-size or weight again. It will change only the specified thing.

3. Curve Text Around a Floating Image-
The CSS property Shape-outside allows geometric shapes to set so as to define an area for text to flow around.

.shape {
width: 300px;
float: left;
shape-outside: circle(50%);
}

4. Gradients and Gradient Text-
Prior to CSS3, a web designer or web developer could create a gradient background with creating and image photoshop and then display it on a website using background-image property. But since CSS specification, web designer or web developer can create gradients in HTML/CSS which results in fast load time and better user experience. Use the following CSS to create a gradient-

body{
background: linear-gradient(to right,#000,#0575e6);
text-align: center;
}
A function linear-gradient() creates a linear gradient and sets it as the background image for the body. Function takes 3 arguments- a direction or an angle and 2 color stops. It is possible to apply the gradient to a text by using CSS gradients and WebKit specific properties,

h1{
font-family: Arial;
font-size: 50px;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

5. CSS Animations-
Since CSS3, you can natively animate HTML elements in pure CSS. You can use the following code-

@keyframes example {
from {background-color: green;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: green;
animation-name: example;
animation-duration: 4s;
}
As shown in the above, code starts with @keyframes example: , which creates an animation to apply to any HTML element.

The use of animation-name specifies which animation to use, and animation-duration defines- how long the animation should run. As the animation is finished, the element changes back to its original state.

6. Direct Children-
Know more at- [https://solaceinfotech.com/blog/7-best-advanced-css-tricks-that-saves-your-time/]