Class: .own-size: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
(2 intermediate revisions by the same user not shown) | |||
Line 9: | Line 9: | ||
</div> | </div> | ||
</pre> | </pre> | ||
==Using CSS== | |||
<pre class="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; | |||
} | |||
</pre> | |||
<pre class="xml"> | |||
<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> | |||
</pre> | |||
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 [[Class: .fixed|fixed]] and [[Class: .hard|hard]]. | |||
<yambe:breadcrumb>Turn CSS</yambe:breadcrumb> | <yambe:breadcrumb>Turn CSS</yambe:breadcrumb> |
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>