Wednesday, September 28, 2016

Prevent hover on touch screen devices

There are 2 simple ways to check for touch support with JavaScript:
  1. You can use Modernizr.js library. Latest versions of Modernizr (2.6.2 for sure) automatically checks for touch support and attaches a .no-touch class to HTML tag, if device doesn’t support touch.
  2. If you do not want to use Modernizr, you can add small piece of JavaScript below, which will do exactly the same thing.

//touch events support and if not supported, attach .no-touch class to the HTML tag.

if (!("ontouchstart" in document.documentElement)) {
   document.documentElement.className += " no-touch";
}

Tuesday, September 13, 2016

CSS3 box-shadow Inset bottom only

If you would like put the inner shadow only bottom box. you can use css3 to adjust shadow

HTML

<div class="box"></div>

 CSS

div.box {

    background:red;
    height:100px;
    width:200px;
    -moz-box-shadow: inset 0 -10px 10px -10px #000000;
    -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
    box-shadow: inset 0 -10px 10px -10px #000000;

}