4 Awesome Css Tricks in 2020

4 Awesome CSS Tricks - I have learned the hard way

Published on

Sunday, Jan 12, 2020

I have been designing website and mobile app since 2008 and there are a lot of things I have learned over this time period and I am still learning.

In this video explained the CSS tricks which I wasn’t aware of and it took a lot of time to implement these css code in my working style.

I hope you will enjoy it.


Please download the source code from Github


.main {
padding: 20px;
@keyframes radial-pulse {
0% {
box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);

    100% {
      box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);

.box2 {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
width: 200px;
height: 200px;
margin: 10px;
color: white;
.box1 {
background: red;
animation: radial-pulse 1s infinite;
.box2 {
position: relative;
background: blue;
box-sizing: border-box;
.box2 div {
width: 90px;
height: 120px;
background: white;
color: black;
position: absolute;
left: 0;
top: 0;
padding: 5px;
box-shadow: 1px 1px 10px white;
.box2:hover {
border: 5px solid black;


<div class="main">
  <div class="box1">Content</div>
  <div class="box2">