Class: .own-size: Difference between revisions
Jump to navigation
Jump to search
Line 39: | Line 39: | ||
</div> | </div> | ||
<div class="own-size"> | <div class="own-size"> | ||
Page | Page 3 with own size | ||
</div> | </div> | ||
</div> | </div> |
Latest revision as of 04:57, 19 July 2012
Customizes the size of a page. The CSS rules width and height can be added directly to the page selector or using the style parameter. For example:
<div id="flipbook"> <div>Page 1 with default size</div> <div class="own-size" style="width:100; height:100px;"> Page 2 with own size </div> </div>
Using CSS
#flipbook { width:700px; height:600px } #flipbook .page-wrapper{ -webkit-perspective:2000px; -moz-perspective: 2000px; -ms-perspective: 2000px; perspective: 2000px; } #flipbook .p2, #flipbook .p3{ width:300px; height:500px; }
<div id="flipbook"> <div class="fixed hard">Page 1 with default size</div> <div class="own-size"> Page 2 with own size </div> <div class="own-size"> Page 3 with own size </div> </div>
In this sample the 1st page will have a size of 350x600, meanwhile page 2 and 3 the customized size. Notice that the first page uses the classes fixed and hard.
<yambe:breadcrumb>Turn CSS</yambe:breadcrumb>