Orange Digitals

4 Awesome Css Tricks in 2020

4 Awesome CSS Tricks - I have learned the hard way

Mukesh Joshi

Insta: @orangepreneur

Published on

Sunday, Jan 12, 2020

Next Chapter 👉

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.

Code

Please download the source code from Github

CSS

.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);
    }

}
.box1,
.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;
}
.box1:hover,
.box2:hover {
border: 5px solid black;
}

HTML

<div class="main">
  <div class="box1">Content</div>
  <div class="box2">
    <div>Content</div>
  </div>
</div>
Next Chapter 👉