Нужный градиент в середине флип-книги плагина turnjs

Question

В градиентах плагина turnjs всегда установлено значение true по умолчанию.

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

Но градиент не отображается в переводе. В середине книги должен быть градиент. И еще есть некоторые классы из div страниц (страницы флип-книги). нечетный и даже класс слева и справа от соответствующей страницы также отсутствует. но эти классы действительно важны для стилизации. И любой намек на то, чтобы сделать флип-книжку turnjs отзывчивым ..

Фактически я видел в свою очередь.js плагин код формы внутри есть какой-то градиент класс производится. и вариантов, как вы видите, я инициализацию gradeints в плагин, но он не работает ..

note: using third release of turnjs 

Answer 1

Действительно там отсутствуют дивы в целом (примеры пересекают сеть), однако, для добавления градиента просто Div с класс с именем, что внутри DIV страницы, я буду мимо всей структуры, что я использую, который работает отлично:

<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> 

и CSS для градиента будет:

#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

Это то, что я использую:

#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; 
}