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:
.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-**
Know more at- https://solaceinfotech.com/blog/7-best-advanced-css-tricks-that-saves-your-time/
#css #design #web #design-pattern
