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-rn1. Vertically Align With Flexbox-rnAligning 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: And the related CSS: .align-vertically { background: #13b5ea; color: #fff; display: flex; align-items: center; height: 200px; }rndisplay: flex specifies a Flexbox layout for element and align-items: center manages the vertical centering. 2. Hover effect-rnThis 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{rnfont-size:36px;rncolor:#000;rnfont-weight:800; } .entry h2:hover{ color:#f00; }rnIt 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-rnThe CSS property Shape-outside allows geometric shapes to set so as to define an area for text to flow around. .shape {rnwidth: 300px;rnfloat: left;rnshape-outside: circle(50%); }rn4. Gradients and Gradient Text-rnPrior 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{rnbackground: linear-gradient(to right,#000,#0575e6);rntext-align: center; }rnA 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; }rn5. CSS Animations-rnKnow more at - https://solaceinfotech.com/blog/7-best-advanced-css-tricks-that-saves-your-time/