Category Archives: CSS3

How to create equal height columns


<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>


.row {
    display: flex;
}
.col {
    flex: 1;
}

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id nisi risus. Maecenas eu quam tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam sed dolor sit amet orci porttitor fermentum sit amet id velit. Suspendisse consectetur ornare dictum.
Vivamus a sem mollis, bibendum ante et, tempus eros. Maecenas in rutrum libero.

How to create Pulse Animation effect with CSS

I’m creating an animation effect with CSS. Just use the below CSS properties. I hope it’s helpful to you.


.pulse {
  animation: pulse 3s infinite;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

Example:

How to center a DIV horizontally and vertically

After trying a lot of tricks I found this perfect solution to keep the element or DIV horizontally and vertically center.
This is worked for me and it’s working in all the main browsers. I’d personally recommend to use the below CSS rules. It’s very simple to apply.


.center{ 
  height: 300px;
  position: relative;
  border: 3px solid #fff000; 
}

.center div {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


<div class="center">
  <div>Lorem ipsum dolor sit amet adipiscing elit.</div>
</div>

Example:

Lorem ipsum dolor sit amet adipiscing elit.