CSS   67

flipbook style css

Guest on 22nd June 2022 02:34:39 PM

  1.  
  2. .flipbook-overlay{
  3.     position: fixed;
  4.     top: 0;
  5.     bottom: 0;
  6.     left: 0;
  7.     right: 0;
  8.     background: url('../images/overlay_lightbox.png') repeat;
  9. }
  10. .flipbook-wrapper{
  11.     /*position: absolute;*/
  12.     /*top: 0;*/
  13.     /*bottom: 0;*/
  14.     /*left: 0;*/
  15.     /*right: 0;*/
  16.     position: absolute;
  17.     width: 100%;
  18.     height: 100%;
  19.     -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  20.     -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  21.     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  22.     text-shadow: none;
  23.  
  24.     -webkit-border-radius: 4px;
  25.     -moz-border-radius: 4px;
  26.     border-radius: 4px;
  27.  
  28.     background: #ffffff;
  29.     /*background: url('../images/overlay_lightbox.png') repeat;*/
  30. }
  31. .flipbook-wrapper-transparent{
  32.     /*position: absolute;*/
  33.     /*top: 0;*/
  34.     /*bottom: 0;*/
  35.     /*left: 0;*/
  36.     /*right: 0;*/
  37.     /*position: absolute;*/
  38.     width: 100%;
  39.     height: 100%;
  40.     background:none;
  41. }
  42. .main-wrapper {
  43.     /*position: relative;*/
  44.     position: absolute;
  45.     top: 0;
  46.     left: 0;
  47.     right: 0;
  48.     bottom: 0;
  49.     width: 100%;
  50.     height: 100%;
  51.     overflow: hidden;
  52.     /*background-color: #252525;*/
  53.     /*background: url('../images/patterns/woven.png');*/
  54.     background: url('../images/patterns/retina_wood2.png');
  55.     /*background: url('../images/overlay_lightbox.png') repeat;*/
  56. }
  57. .flipbook-bookLayer{
  58.     position: absolute;
  59.     /*top: 0;*/
  60.     /*left: 0;*/
  61.     /*right: 0;*/
  62.     /*bottom: 0;*/
  63.  
  64.     width: 100%;
  65.     height: 100%;
  66.  
  67.     overflow: auto;
  68.     perspective:6000px;
  69.     -webkit-perspective:6000px; /* Safari and Chrome */
  70.     -moz-perspective:6000px;
  71. }
  72. .flipbook-book{
  73.     position: relative;
  74.     perspective:6000px;
  75.     -webkit-perspective:6000px; /* Safari and Chrome */
  76.     -moz-perspective:6000px;
  77.     /*top:-20px;*/
  78.     /*top:-20px;*/
  79.     -webkit-transform-style: preserve-3d;
  80.     -moz-transform-style: preserve-3d;
  81.     -o-transform-style: preserve-3d;
  82.     -ms-transform-style: preserve-3d;
  83.     transform-style: preserve-3d;
  84. }
  85. .flipbook-page{
  86.     overflow: hidden;
  87.     position: absolute;
  88.  
  89.     -webkit-transform-style: preserve-3d;
  90.     -moz-transform-style: preserve-3d;
  91.     -o-transform-style: preserve-3d;
  92.     -ms-transform-style: preserve-3d;
  93.     transform-style: preserve-3d;
  94.  
  95.     backface-visibility:hidden;
  96.     -webkit-backface-visibility:hidden; /* Chrome and Safari */
  97.     -moz-backface-visibility:hidden; /* Firefox */
  98.     -ms-backface-visibility:hidden; /* Internet Explorer */
  99. }
  100. .flipbook-shadowLeft{
  101.     position: absolute;
  102.     top:0;
  103.     left: 0;
  104.     -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  105.     -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  106.     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  107. }
  108. .flipbook-shadowRight{
  109.     position: absolute;
  110.     top:0;
  111.     right: 0;
  112.     -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  113.     -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  114.     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  115. }
  116. .flipbook-currentPage {
  117.     position: absolute;
  118.     left: 0;
  119.     bottom: 0;
  120.     padding: 10px;
  121.     z-index: 999999;
  122.     background: none !important;
  123.     border: none !important;
  124.  
  125. }
  126.  
  127. .flipbook-currentPage:focus {
  128.     outline: none;
  129. }
  130.  
  131. .flipbook-menuWrapper {
  132.     /*position: relative;*/
  133.     /*bottom: 40px;*/
  134.     position: absolute;
  135.     bottom: 0;
  136.     z-index: 99999;
  137.     left: 0;
  138.     right: 0;
  139.     margin: 0;
  140.     padding: 0;
  141. }
  142. .flipbook-menu:hover{
  143.     /*opacity: 1;*/
  144. }
  145. .flipbook-menu {
  146.     position: relative;
  147.     text-align: center;
  148.     margin: 0;
  149.     padding: 5px;
  150.     z-index: 99999;
  151.  
  152.     -webkit-transition: all .3s ease-out;
  153.     -moz-transition: all .3s ease-out;
  154.     -o-transition: all .3s ease-out;
  155.     transition: all .3s ease-out;
  156. }
  157.  
  158.  
  159.  
  160. .flipbook-menu-btn {
  161.     display: inline;
  162.     cursor: pointer;
  163.     background: none;
  164. }
  165.  
  166. .flipbook-thumbHolder{
  167.     -webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .5);
  168.     box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .5);
  169.  
  170.     -webkit-transition: all .3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
  171.     -moz-transition: all .3s ease-out;  /* Firefox 4-15 */
  172.     -o-transition: all .3s ease-out;  /* Opera 10.50 */
  173.     transition: all .3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
  174. }
  175.  
  176. .flipbook-toc{
  177.     position: relative;
  178. }
  179.  
  180. .flipbook-tocHolder{
  181.     position: absolute;
  182.     top:0;
  183.     /*left: 0;*/
  184.     height: 100%;
  185.     width: 300px;
  186.     /*bottom: 50px;*/
  187.  
  188.     -webkit-transition: all .3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
  189.     -moz-transition: all .3s ease-out;  /* Firefox 4-15 */
  190.     -o-transition: all .3s ease-out;  /* Opera 10.50
  191.     transition: all .3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
  192. }
  193.  
  194. .flipbook-tocItem{
  195.  
  196.     display: block;
  197.     padding: 10px 20px;
  198.     text-align: justify;
  199.     cursor: pointer;
  200.     font-size: .9em;
  201.  
  202. }
  203. .flipbook-tocItem .right{
  204.     float: right;
  205. }
  206.  
  207. .flipbook-tocTitle{
  208.     display: block;
  209.     padding: 20px;
  210.     text-align: left;
  211.     text-transform: uppercase;
  212. }
  213.  
  214. .invisible{
  215.     opacity: 0;
  216.     pointer-events:none;
  217. }
  218.  
  219. .transition{
  220.     -webkit-transition: all .3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
  221.     -moz-transition: all .3s ease-out;  /* Firefox 4-15 */
  222.     -o-transition: all .3s ease-out;  /* Opera 10.50*/
  223.     transition: all .3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
  224. }
  225.  
  226. .flipbook-shareButtons{
  227.     width: 41px;
  228.  
  229.     position: absolute;
  230.     /*right: 0;*/
  231.     /*top: 0;*/
  232.     bottom:45px;
  233.     /*-webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .5);*/
  234.     /*box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .5);*/
  235.     max-width: 100%;   max-height:100%;
  236.     overflow: hidden; /* Aligns Vertically - Remove for Horizontal Only */    /* Aligns Horizontally - Remove for Vertical Only  */;
  237.     padding: 10px 0;
  238.     /*margin-right: 10px;*/
  239. }
  240.  
  241. .flipbook-shareBtn{
  242.     display: inline-block;
  243.     cursor: pointer;
  244.     margin-top: 10px;
  245.     margin-bottom: 10px;
  246. }
  247.  
  248. img{
  249.     -webkit-transform: translateZ(0);
  250.     -moz-transform: translateZ(0);
  251.     -ms-transform: translateZ(0);
  252.     -o-transform: translateZ(0);
  253.     transform: translateZ(0);
  254. }
  255.  
  256. /*Icon font*/
  257.  
  258. @font-face {
  259.     font-family: 'icomoon';
  260.     src:url('../fonts/icomoon.eot');
  261.     src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  262.     url('../fonts/icomoon.woff') format('woff'),
  263.     url('../fonts/icomoon.ttf') format('truetype'),
  264.     url('../fonts/icomoon.svg#icomoon') format('svg');
  265.     font-weight: normal;
  266.     font-style: normal;
  267. }
  268.  
  269. .icon-facebook:before,
  270. .icon-twitter:before, .icon-googleplus:before,.icon-flickr:before, .icon-vimeo:before, .icon-linkedin:before,
  271. .icon-youtube:before, .icon-youtube-2:before, .icon-vimeo-2:before,
  272. .icon-vimeo2:before, .icon-google-plus:before, .icon-google-plus-2:before, .icon-twitter-2:before, .icon-twitter-3:before, .icon-feed:before,
  273. .icon-feed-2:before,
  274. .icon-flickr-2:before, .icon-flickr-3:before, .icon-picassa:before, .icon-picassa-2:before, .icon-dribbble:before, .icon-dribbble-2:before,
  275. .icon-forrst:before,
  276. .icon-forrst-2:before, .icon-deviantart:before, .icon-deviantart-2:before, .icon-steam:before, .icon-steam-2:before, .icon-wordpress:before,
  277. .icon-wordpress-2:before,
  278. .icon-blogger:before, .icon-tumblr:before, .icon-tumblr-2:before, .icon-yahoo:before, .icon-code:before, .icon-soundcloud:before, .icon-soundcloud-2:before,
  279. .icon-lastfm:before,
  280. .icon-lastfm-2:before, .icon-delicious:before, .icon-stumbleupon:before, .icon-stackoverflow:before, .icon-pinterest:before, .icon-xing:before,
  281. .icon-flattr:before,
  282. .icon-foursquare:before, .icon-paypal:before, .icon-facebook-2:before, .icon-facebook-3:before, .icon-paypal-2:before {
  283.     font-size: 1.3em;
  284.     margin: 5px 5px;
  285.     padding: 5px;
  286. }
  287.  
  288. .icon-share:before, .icon-minus:before, .icon-plus:before, .icon-arrow-left:before, .icon-arrow-right:before,
  289. .icon-layout:before, .icon-list:before, .icon-cross:before,  .icon-resize-enlarge:before, .icon-resize-shrink:before,
  290. .icon-arrow-left-2:before, .icon-arrow-right-2:before, .icon-zoom-out:before, .icon-zoom-in:before {
  291.     font-size: 1.9em;
  292.     margin: 5px 3px;
  293.     padding: 0;
  294. }
  295.  
  296. .icon-general{
  297.     font-family: 'icomoon';
  298.     speak: none;
  299.     font-style: normal;
  300.     font-weight: normal;
  301.     line-height: 1;
  302.     -webkit-font-smoothing: antialiased;
  303. }
  304.  
  305. .icon-share:before {
  306.     content: "\e002";
  307. }
  308. .icon-minus:before {
  309.     content: "\e003";
  310. }
  311. .icon-plus:before {
  312.     content: "\e004";
  313. }
  314. .icon-arrow-left:before {
  315.     content: "\e005";
  316. }
  317. .icon-arrow-right:before {
  318.     content: "\e006";
  319. }
  320. .icon-facebook:before {
  321.     content: "\e007";
  322. }
  323. .icon-layout:before {
  324.     content: "\e009";
  325. }
  326. .icon-list:before {
  327.     content: "\e00a";
  328. }
  329. .icon-cross:before {
  330.     content: "\e00b";
  331. }
  332. .icon-twitter:before {
  333.     content: "\e000";
  334. }
  335. .icon-googleplus:before {
  336.     content: "\e001";
  337. }
  338. .icon-resize-enlarge:before {
  339.     content: "\e008";
  340. }
  341. .icon-resize-shrink:before {
  342.     content: "\e00c";
  343. }
  344. .icon-flickr:before {
  345.     content: "\e00d";
  346. }
  347. .icon-vimeo:before {
  348.     content: "\e00e";
  349. }
  350. .icon-linkedin:before {
  351.     content: "\e00f";
  352. }
  353. .icon-arrow-left-2:before {
  354.     content: "\e010";
  355. }
  356. .icon-arrow-right-2:before {
  357.     content: "\e011";
  358. }
  359. .icon-zoom-out:before {
  360.     content: "\e012";
  361. }
  362. .icon-zoom-in:before {
  363.     content: "\e013";
  364. }
  365. .icon-youtube:before {
  366.     content: "\e014";
  367. }
  368. .icon-youtube-2:before {
  369.     content: "\e015";
  370. }
  371. .icon-vimeo-2:before {
  372.     content: "\e016";
  373. }
  374. .icon-vimeo2:before {
  375.     content: "\e017";
  376. }
  377. .icon-google-plus:before {
  378.     content: "\e018";
  379. }
  380. .icon-google-plus-2:before {
  381.     content: "\e019";
  382. }
  383. .icon-twitter-2:before {
  384.     content: "\e01a";
  385. }
  386. .icon-twitter-3:before {
  387.     content: "\e01b";
  388. }
  389. .icon-feed:before {
  390.     content: "\e01c";
  391. }
  392. .icon-feed-2:before {
  393.     content: "\e01d";
  394. }
  395. .icon-flickr-2:before {
  396.     content: "\e01e";
  397. }
  398. .icon-flickr-3:before {
  399.     content: "\e01f";
  400. }
  401. .icon-picassa:before {
  402.     content: "\e020";
  403. }
  404. .icon-picassa-2:before {
  405.     content: "\e021";
  406. }
  407. .icon-dribbble:before {
  408.     content: "\e024";
  409. }
  410. .icon-dribbble-2:before {
  411.     content: "\e025";
  412. }
  413. .icon-forrst:before {
  414.     content: "\e022";
  415. }
  416. .icon-forrst-2:before {
  417.     content: "\e023";
  418. }
  419. .icon-deviantart:before {
  420.     content: "\e026";
  421. }
  422. .icon-deviantart-2:before {
  423.     content: "\e027";
  424. }
  425. .icon-steam:before {
  426.     content: "\e028";
  427. }
  428. .icon-steam-2:before {
  429.     content: "\e029";
  430. }
  431. .icon-wordpress:before {
  432.     content: "\e02a";
  433. }
  434. .icon-wordpress-2:before {
  435.     content: "\e02b";
  436. }
  437. .icon-blogger:before {
  438.     content: "\e02c";
  439. }
  440. .icon-tumblr:before {
  441.     content: "\e02d";
  442. }
  443. .icon-tumblr-2:before {
  444.     content: "\e02e";
  445. }
  446. .icon-yahoo:before {
  447.     content: "\e02f";
  448. }
  449. .icon-code:before {
  450.     content: "\e030";
  451. }
  452. .icon-soundcloud:before {
  453.     content: "\e031";
  454. }
  455. .icon-soundcloud-2:before {
  456.     content: "\e032";
  457. }
  458. .icon-lastfm:before {
  459.     content: "\e033";
  460. }
  461. .icon-lastfm-2:before {
  462.     content: "\e034";
  463. }
  464. .icon-delicious:before {
  465.     content: "\e035";
  466. }
  467. .icon-stumbleupon:before {
  468.     content: "\e036";
  469. }
  470. .icon-stackoverflow:before {
  471.     content: "\e037";
  472. }
  473. .icon-pinterest:before {
  474.     content: "\e038";
  475. }
  476. .icon-xing:before {
  477.     content: "\e039";
  478. }
  479. .icon-flattr:before {
  480.     content: "\e03a";
  481. }
  482. .icon-foursquare:before {
  483.     content: "\e03b";
  484. }
  485. .icon-paypal:before {
  486.     content: "\e03c";
  487. }
  488. .icon-facebook-2:before {
  489.     content: "\e03e";
  490. }
  491. .icon-facebook-3:before {
  492.     content: "\e03f";
  493. }
  494. .icon-paypal-2:before {
  495.     content: "\e03d";
  496. }

Raw Paste


Login or Register to edit or fork this paste. It's free.