CSS Hack Collection

1. Simulate a gap between the underline and the text

   http://jsbin.com

   .underline {
     text-shadow: -1px -1px 0 #FFF,1px -1px 0 #FFF,-1px 1px 0 #FFF,1px 1px 0 #FFF;
     background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #AAA 2px, #AAA 3px, rgba(0, 0, 0, 0) 3px);
   }
   

2. Life is too short with NO cursor

   Cursor disappeared here?

   .no-cursor {
     cursor: none!important;
   }
   

3. Vertical center elements

   Vericalize anything?

   .center-vertical {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
   }
   

4. Multiple shadows

   A picture should be missing here.

   .multiple-shadow {
     box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
   }
   

5. Element with a constant aspect ratio

   this content will have a constant aspect ratio that varies based on the width.

   .constant-ratio {
     width: 100%; 
     position: relative; 
     padding-bottom: 20%;
   }
   
   .constant-ratio-inner {
     position: absolute;
     left: 0; top: 0; right: 0; bottom: 0;
     background-color:yellow;
   }