5 CSS Tricks That Will Save You a Lot of Time

Working with CSS is always a nightmare for back-end developers. Here lets conspire against those front end dev's and lean some CSS tricks that even frontend developers miss.

1. Centering Trick in Flexbox

Let's start with the famous centering divs problem. Here we will make use of a flexbox. No need to set absolute positioning or work with margins, do this:

  .flex-center-demo {

    display: flex;

    justify-content: center;

    align-items: center;

  }

3. Adjacent Sibling Selector

This is useful when you have adjacent elements, elements that come after a heading for example author's name below the heading.

h2 + p {

    font-style: italic;

    color: blue;

  }

Here is an image:

5. Nail CSS animation like a pro

Getting CSS animations right around first time is a bit problamaic use these key-frame to simplify complex animations into a single rule that’s easy to adjust or reuse.

@keyframes fadeIn {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



.fade-in-demo {

  animation: fadeIn 3s forwards;

  background-color: #e67e22;

  color: #fff;

  padding: 1rem;

  text-align: center;

  border-radius: 4px;

}

I hope you find this article useful. My name is Sreedeep and I am working on a tool called LiveAPI - Helping people generate API docs efficiently with AI.