Showing posts from September, 2016

Prevent hover on touch screen devices

There are 2 simple ways to check for touch support with JavaScript:
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.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"; }

CSS3 box-shadow Inset bottom only

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


<div class="box"></div>
 CSS {     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; }