Need gradient in middle of the flip book of turnjs plugin

Question

In turnjs plugin gradients is always set to true by default.

$('#magazine').turn({gradients: true, acceleration: true});

But gradient is not appearing in flip book. There should be a gradient in middle of book. And further there are some classes from div of pages (pages of flip book) are missing too. odd and even class to left and right side of the page respective is also missing. but those classes are really important for styling. And any hint for making flip book of turnjs responsive..

actually i saw in turn.js plugin code form inside there is some gradient class is being made. and in options as you see am initializing the gradeints in plugin but it is not working..

note: using third release of turnjs

Answer 1

Indeed there is missing Divs in general ( examples cross the web), However, for adding the gradient just div with class named that inside the div of the page, I'm gonna past the whole structure that I'm using which is working perfectly:

<div class="zoom-viewport">
    <div class="container">
       <div id="flipbook">
          <div class="hard"><div class="gradient"></div></div> 
          <div class="normalPage"><div class="gradient"></div><img src="pages/00.jpg" /></div> 
       </div>
    </div>
</div>

and the css for gradient will be :

#flipbook .even .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -o-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
}

#flipbook .odd .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -o-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
}

Answer 2

This is what I'm using:

#magazine .page:not(.hard).odd {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
    box-shadow: inset 0 0 5px #666;
    border-left: 1px solid #ccc;
}

#magazine .page:not(.hard).even {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
    box-shadow: inset 0 0 5px #666;
}