CSS Effects

With the help of CSS, we can define multiple type of effects to an element. Here are the list of some famous effects used on the web:

These effects are described in its separate tutorial. But for now, let me create an example that covers almost all these effects in simple and brief way:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .b, .c, .d, .e{background: linear-gradient(purple, green);
         width: 140px; height: 110px; margin: 0 auto 12px;}
      .b{box-shadow: 6px 12px 12px gray;}
      .c{opacity: 0.5;}
      .d{transform: rotate(45deg) skewX(45deg);}
      .e{transition: 2s; color: white; text-align: center; padding-top: 20px;}
      .e:hover{transform: rotate(45deg) skewX(45deg);}
      .f{position: relative; background: linear-gradient(purple, green);
         animation: fresherearth 3s infinite;}
      @keyframes fresherearth {
         0% {left: 0px; top: 0px; width: 50px; height: 50px;}
         25% {left: 220px; top: 0px; width: 100px; height: 100px; border-radius: 50%;}
         50% {left: 220px; top: 220px; width: 50px; height: 50px; border-radius: 0%;}
         75% {left: 0px; top: 220px; width: 100px; height: 100px; border-radius: 50%;}
         100% {left: 0px; top: 0px; width: 50px; height: 50px; border-radius: 0%;}
      }
   </style>
</head>
<body>

   <h2>CSS Gradient Effect</h2>
   <div class="a"></div>

   <h2>CSS Shadow Effect</h2>
   <div class="b"></div>

   <h2>CSS Opacity Effect</h2>
   <div class="c"></div>

   <h2>CSS Transform Effect</h2>
   <div class="d"></div>

   <h2>CSS Transition Effect</h2>
   <div class="e">HOVER ME</div>

   <h2>CSS Animation Effect</h2>
   <div class="f"></div>
   
</body>
</html>