CSS3 page flip animation

In the bourgeoisie, I spied on the page turning technique implemented in CSS3. Very impressive! Based on this technique, I decided to make my example a demonstration of such a CSS3 book with page turning animation.
This technique is based on CSS3 properties such as transform And transition as well as non-standard use of the tag input with a checkbox. The implementation turned out to be crooked, because browsers still do not fully support the most spectacular CSS3 properties in their direct form. But, thanks to, we can try to use these properties now.
It turned out spectacularly, I am glad that perhaps in the near future browsers will begin to understand the new CSS3 standards and webmasters will be able to safely implement such beauty on their sites, it has become possible to flip pages on CSS3.
The example is best viewed in a browser Mozilla Firefox latest version- everything works without problems. In Safari and Chrome, the example works, but with a creak. Opera eats up the processor during animation, so on weak computers the example simply will not pull. IE is IE for fun and you can watch it.
We look with the browser Mozilla Firefox- do not spoil the impression!

Recently I found a wonderful program on the Internet to create photo albums. And not just photo albums, but flash albums, in which there is Such an album can be posted on Youtube in the format swf and to your site html page, you can create a file from it - exe etc... What can I say, look what happened to me, for some 20 minutes!

Just click on the picture to view:

Flip Album- a program that modifies ordinary photos into great ones flash albums+ page flip effect! Now you can create amazing online photo albums from your collection of photos and images.

Since the program is based on "know-rush" I present a small guide to action:

1. After starting the program, press "Background"(background), select "Select from background..."- if we use the built-in background of the program.

If you have your own background, choose "Select from your computer".And insert your photo.

2. Click "photo" and add the photo we need. It can be stretched, reduced and rotated.

3. Pressing "Mask" choose one of the framing effects.

4. By clicking "text" you can add a caption to the photo by checking the box "Shadow" add shadow to text

We get the first finished page.

5. In the same way, we add as many pages as we need. Next, click on "publish"

6. We get into a new window, under the inscription "Templates" select a template, in the settings (Options) you can change the quality of photos, etc. Next, click "Convert To Flipping Book"

7. In the conversion window, select the output file format, for example EXE. Select the save folder, file name and click "Convert"

That's basically it...

Developer: Flip PDF Studio
Platform: Windows XP/Vista/7
Interface language: English
File size: 17.05MB

Hi all! I often visit one blog here, and once there was a talk about special program to create textbooks, I emphasize textbooks. And with some skill, it can also be used to create simple e-books. So, word for word, a certain bet arose, well, the bet is not a bet, but a dispute.

I argued, and still argue, that it is possible to create an e-book using standard program Word from the package Microsoft office. Yes, not just a book, but with content, pagination, well, various other things, up to turning pages, as well as inserting sound and video.

In fairness, I must say that all this can be done in Word, well, except for flipping. Flipping is another technology that requires other programs. So I confess, I was wrong ... And with some skill, it turns out to be quite such a beautiful e-book with flipping.

Work examples

Look what happened
View book in PDF

Download and watch the book with flipping

Well, how? Have you downloaded and looked? What did you think of it? If it didn’t work out to download, well, you never know, the antivirus swears, for example, then I suggest looking at a few more options for this book:

Flash book article in html using iframe

The same article using a special service

Online service for creating flash books and flash magazines. For those who are interested, you can read an overview of this service

Custom books:

Cafe Ravenna Menu – Italian Cuisine

Ravenna cafe menu — Russian cuisine

choose Auto-assembled table of contents and that's it, the table of contents is ready. You can check, when you click on the page number, you should be taken to the heading on the page indicated in the table of contents.

So the book is ready with a beautiful title page and a convenient table of contents. It remains only to make a PDF file out of it.

Step two. Create a PDF file

Well, everything is simple here, by the way, I already wrote about how to create a PDF file using Word 2007 tools, which you can read about here. But for the latest version of Word, it's still easier. Go to the File tab and select Export

Click on the Create PDF button and enter a file name in the window that opens.

And here it is important to check the box Create bookmarks using Headers

Voila! It took five clicks to get it done. Who needs a book, electronic, with content and navigation?!! Not expensive, almost free! Well, I'm just kidding, in fact, it remains to make a flash book from a PDF book with turning over and the ability to share it on social networks.

Step three. Final, create a flash book

Since until now I didn’t need it, I didn’t really bother with what programs it was possible to create such books. But with the help of Uncle Gosha and some patience and perseverance, I found two programs that allow you to turn PDF files into flash books.

Program one. Flip Book Maker.

I will not dwell on this product for a long time, since I absolutely did not like the result of the conversion. The links in the book do not work, and somehow everything is crooked. Well, in general, I do not know, I did not like it. Maybe you will be able to do something in this program, then be sure to write to me in the comments. Although this program boasts some interesting functionality. For example, in her big choice pre-made templates...

View and download trial version You can visit the official website of the program.

And here is the next programmatic, just what you need.

The program is next. Flip PDF

Great program, easy to work with PDF files, allows you to insert or edit: links, images, videos, sound and much more ...

You can download a trial version.

I will make a reservation right away, the program is not free, and when creating a book, it spit its watermarks. But if you need this program for one time or just really need it - write to me, I will help.

The process of creating a beautiful book is quite simple and not intricate, despite the fact that it is in the bourgeois dialect. As usual, in such cases, we turn on the scientific poke method and everything will work out.

PDF book download

Run the program and see this window

Click on the button Import PDF and specify the path to our PDF-book

Next, specify the number of pages that you want to import. Since I need all the pages, I left All pages. You can also add a watermark, like those that are added to images, or in general, you can immediately make the watermark interactive and attach a link to the site to it.

In addition to specifying the path to the file, all other parameters can be left as they are. I press Import Now, I mean Import now, and see how the program lays out the file into pages.

A window appears with a future book.

Selecting and customizing a template

We noticed that in the previous screenshots there was one book template, and in the last screenshot there was already a different template. This is done using the menu. Templates

When you click on the arrow, a window like this will appear,

where you can choose your favorite template.

The left column lists the template sets. Templates differ not only in color and background picture but also in terms of functionality.

You can fine-tune the template above: add or remove buttons in the control panel, change the background color, change the color of links, adjust the location of the book itself relative to the window borders, and much more (turn on the poke method, be sure to come in handy).

I will not describe everything, but I want to draw your precious attention to a few points:

First moment. If you make any changes to the template, then to see what happened, click on the button apply change. It will blink red when you change any parameter.

Second moment. In the template settings, it is possible to specify an ID Google Analytics. If I'm wrong, then correct me. When specifying the ID, I have the opportunity to protect my creation from theft. Uncle Google will assign this book the authorship of my site, since my blog is registered in Google Analytics. Is this correct or am I wrong?

Third moment. Pay attention to the wonderful button Edit Pages. With this button you can insert additional materials into the book.

You can add sound, YouTube videos, just .flv videos, and add links, buttons, and slideshows, not to mention pictures. In general, a very useful thing.

Creating a book

And now, everything that could be configured, the template was chosen, only the last action remains: to create the book itself. The book can be created in several formats:

• HTML format (for inserting into a blog)
• ZIP format (the same html, but packed into an archive)
• EXE format (self-executing file that you could download at the beginning of the article)
• APP format (special format for Apple computers)

So everything is simple: choose the desired format, the path to the folder where the book will be stored and press the button convert.

That's all the necessary manipulations to create an interactive book. I made the book for the second time with a different template and in HTML format, and added it to some pages sound files and buttons.

conclusions

An excellent program for creating interactive books, extensive editing and insertion of various media files will well complement and emphasize the main content, but there are some disadvantages.

1. All programs that were used to create flash books are paid. except Adobe Reader, it's a free reader. But Word and Flip PDF are paid, although Flip PDF justifies the cost of one hundred green American rubles in full, and Word, in principle, beats back its money. Behind good program money is not a pity. By the way, Do you buy programs or use broken ones?

2. While fiddling with Flip PDF, I found some jambs and inconveniences

• video from YouTube is inserted crookedly, it works in the program, but not in the finished book
• when inserting sound and video files, these files are copied to the folder with the book, which significantly increases the volume of the book itself

I didn’t find more clumsiness, if you find it, write in the comments. As always, I wrote longer than the whole process takes. Well, how do you like the process and the result? Good luck to all!

Сodrops is the best web design blog. You can always find a lot of the most creative things for a web designer on it. A huge plus is that they also tell how to attach or make this or that effect. He is very popular abroad, but for some reason not so much on the Russian Internet. In general, a very useful site for a designer, there you can get a lot of inspiration and learn a lot, as there are really advanced CSS lessons.

Today I want to present you 15 cool lessons from this wonderful site. All "chips" are completely free and you can easily download them. Well, now let's take a closer look.

You will also be interested in this:

Dynamic grid with beautiful animation

This is a great solution for arranging your blocks on the site, and this grid can be easily used for images. This grid is made with pure CSS.

How to Make Cool Image Hover Effects with CSS

This tutorial will show you how to create super hover effects on an image. In the example, there are as many as 7 completely different examples, as well as instructions on how to make this miracle on CSS.

Great buttons with nice CSS effect

Lots of examples of CSS buttons with great hover effects, these buttons can be customized to your liking.

How to make a piano

An excellent lesson that tells how to make a real electronic piano for the site.

Nice hover effect for icons

There are 9 examples in this tutorial that have different styles when you hover over the icons, everything looks very stylish and modern. For example, you can freely use these effects for social bookmarking icons on the site.

Spectacular flipping for the block

Here you will learn how to using CSS effective flipping for the block. There are also as many as 5 completely different examples.

Cool CSS Animation Examples

Here are 4 examples that show in detail what CSS animation is capable of.

Unusual form of search

For example, I have not seen this yet, for example, you want to eat in a restaurant, respectively, you are looking for the desired restaurant in Google, enter the desired place in the search field. And now look how it can be implemented in a much more creative and convenient way.

How to show different images for different devices

Here you will learn how to implement the display different pictures, depending on which device your resource is being viewed on.

Making an adaptive menu with support for Retina displays

An excellent lesson in which you will learn how to make beautiful and adaptive menu on CSS with support for Retina screens.

Several CSS flip effects for pages

Beautiful effects with which you can implement full-screen page turning

We have already figured out how to flipping e-book, using the program , as a file exe. Let's now look at how to make the same flash book, only online, on your website.

To do this, you can use the same Flip PDF program. The principle of creating a book is the same, only you save it not as an exe file, but as html.

If you choose the html option, you will have a ready-made site in the folder where you will publish the book, which can then be moved to the hosting. It will consist of a file index.html, and the files and folders attached to it. All this must be placed in a separate folder, named this folder the same as your subdomain will be called, and sent to the Internet.

All this can be done not only with Flip PDF Professional. Not less than interesting program- FlippingBook Publisher Professional. You can download a demo version of the program on the website flippingbook.com. With the help of this program, you can also make wonderful electronic flash books, and you can even make them with sound. True, the program is more expensive - basic version The program costs $399. But you can use the trial version at first.

Working with this program is about the same as working with Flip PDF. You can customize the look of the background, book, flipping effects, add sound when turning pages, and so on.

For example, you want to make a book of poems for children, and not just a book, but a talking book, that is, one in which, when opening each page, the verses will be recited by voice.

This is done very easily in FlippingBook Publisher Professional. First you need to prepare materials: a PDF book, and audio files for each spread of the book. When used, you will get a very clear, high-quality voice recording. And by using , you can overlay light background music on the recording.

Now back to Flipping FlippingBook Publisher. You open it. If you are using the trial version, cancel the login and password entry form. When the program appears, press Import , and choose your PDF book. Click Open. You can then choose from several types of publication: magazine, document, hardcover book, photo album. The type of flash book publication you choose will depend on its appearance.

Press the button Begin. There is a conversion. and in the end you will see the created book with flipping to working area programs.

Now you need to add audio files to it. Bookmark on the right Pages You will see a window Page Properties . And in these properties you will find the item Page sound . Select your audio file for this page and open it. Repeat the same operation for the rest of the pages.

After the book is completed, click Publish , and choose in what form you want to receive this book - as a single exe file, or as a website. If you choose .exe file, then you need an item Offline, and if you choose a site, then this item In HTML .

If you select the second option, you will receive a folder in which the file will be located index.html, and related files and folders. Rename the common folder for them in the same way as the URL of your site will be, and throw it on the hosting.

Here, for example, what happened to me:, but in fact, everything can be made much more interesting using all the features of the program. An online flash e-book is best viewed in full screen mode. To go to it, you need to click on the quadrangle at the bottom middle.

You can get more detailed information in the sections "All courses" and "Utility", which can be accessed through the top menu of the site. In these sections, the articles are grouped by subject into blocks containing the most detailed (as far as possible) information on various topics.

You can also subscribe to the blog, and learn about all the new articles.
It does not take much time. Just click the link below: