-
Book Overview & Buying
-
Table Of Contents
Designing Next Generation Web Projects with CSS3
By :
What we're going to create is basically a slideshow where each slide is placed in a 3D space and the animation moves from one slide to the other. A basic slide structure can be as simple as:
<div data-sequence="1">
<div data-slide>
Hello,
</div>
</div>We need two nested
div tags to define this structure; the first one will cover 100 percent of the window area, and the second div tag will have the necessary properties to hold its content in the center of the screen. Plus, we need to set up each slide so that they will be piled up one above the other because we need them all in the center before we start to move them in the 3D space.
We can use the flexbox CSS property to achieve this result. In fact, flexbox has properties to define both vertical and horizontal alignment.
Let's define a basic HTML structure based on what we have seen so far:
<!doctype html> <html> <head> <title>Movie Trailer</title> ...
Change the font size
Change margin width
Change background colour