7 Best Advanced CSS Tricks That Saves Your Time

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-

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:

<div class="align-vertically">
  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{
.entry h2:hover{

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-

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, 

  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-

You can use > to select the direct children of element. For instance,

#footer > a

It selects and styles all active link elements that are just under Footer ID. It will not select anything that is past the active element or anything contained in the footer. 

Specific Child Elements-

This is great at styling lists. You have to just count the number of items down the elements that you want to style and apply that style.

li:nth-child(3) {
    color: red;

The above CSS focuses the second item in the list and makes it bold, underlined and red. Add an “n” after the number in parenthesis and you can target every 3rd list item. To style every line in table-style layout for easy reading, the CSS is-


7. Comma-Separated Lists-

Bullet lists are widely used because it provides a way to show information in a clear and succinct manner. The following CSS snippets adds commas on each item of unordered list, excluding the last one. 

This is carried out by using :not(:last-child) to ensure that comma will be applied to all items excluding last one.

ul > li:not(:last-child)::after {
  content: ",";

Final Words-

These are some advanced css tricks for web designers. There can be few others too. Use of these tricks will surely help you to design the best as per your requirement and also it will reduce the efforts and time required. 

If you are looking to design a website for your business, then you’re at the right place. Solace is there to help you. Connect with Solace and get a free quote for web design and development. We will be happy to help you.

Related Post