HTML5 and CSS3 Transition, Transformation, and Animation

Book description

This book will help you unlock the power of HTML5 and CSS3 to create complex animations and transformations that are surprisingly easy to achieve. Assuming little prior knowledge, it takes you from the basics to advanced concepts.

  • Discover the semantics of HTML5 and Microdata
  • Understand the concept of the CSS3 Flexible Box model
  • Explore the main features of HTML5 such as canvas, offline web application, geolocation, audio and video elements, and web storage
  • Master the tools and utilities in HTML5 and CSS3

In Detail

HTML5 and CSS3 are the way for the future. Prior to HTML5 and CSS3, it was difficult to design complicated animations and transformations. With the advent of HTML5 and CSS3, web design has become much simpler, and the new features that are now available help us design complex web pages with ease. These cool new features will be the standard for the future; hence, it is imperative to learn about them now.

HTML5 and CSS3 Transition, Transformation, and Animation will help you take advantage of the real power behind HTML5 and CSS3 and will give you a good grounding for using it in your own web pages. Each and every code sample and concept is explained in detail, and you will be provided with all the information you need to take your web pages to the next level – before all your competitors do!

The book starts by covering the basic concepts of HTML5 and CSS3 such as semantics, Microdata, and the Flexbox model. You will then quickly progress to intermediate concepts such as form elements and some exciting features with JavaScript APIs. The code samples provided in this book will give you a solid base by which you will then be able to understand, write, and execute your own HTML/CSS projects with transition and animations.

Instead of wading through loads of theory, the concepts in this book are explained in a practical manner using code samples to demonstrate the new features of HTML5 and CSS3. The code samples are such that you can copy the code (the entire code is written instead of code snippets) and execute it for better understanding. Transition, transformation, and animation are also explained in a lucid manner, and there is a gradual increase in the difficulty level throughout the book.

By the end of the book, you will be thoroughly acquainted with HTML5 and CSS3, enabling you to design a web page using the included code samples with ease.

Table of contents

  1. HTML5 and CSS3 Transition, Transformation, and Animation
    1. Table of Contents
    2. HTML5 and CSS3 Transition, Transformation, and Animation
    3. Credits
    4. About the Authors
    5. About the Reviewers
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Introduction to HTML5
      1. Standardizing HTML
      2. Differences between HTML 4 and HTML5
      3. Why we must start using HTML5
      4. Myths about HTML5
      5. Summary
    9. 2. Using the New Markup to Build a Semantic Page
      1. Easier and faster syntax
        1. Header
        2. Footer
        3. Nav
        4. Article
        5. Aside
      2. Microdata
      3. Summary
    10. 3. Flexible Box Model in CSS3
      1. Understanding Flexbox
      2. Flex Container properties
        1. flex-direction
        2. justify-content
        3. align-items
        4. flex-wrap
      3. Properties of Flex Items
        1. Order
        2. Flex
      4. Summary
    11. 4. Web Forms in HTML5
      1. New form attributes in HTML5
        1. placeholder
        2. autofocus
        3. required
        4. datalist
      2. Understanding new input types in HTML5
        1. search
        2. email and url
        3. date
        4. week
        5. month
        6. color
      3. Summary
    12. 5. Advanced Features of HTML5
      1. Audio and video
      2. Drag-and-Drop
      3. Geolocation
      4. Webstorage
        1. sessionStorage
        2. localStorage
      5. Offline web applications
      6. Canvas
        1. beginPath
        2. closePath
        3. moveTo
        4. stroke and fill
        5. arc
        6. lineTo
        7. Gradients
        8. save and restore
        9. Transformations
          1. translate
          2. rotate
          3. scale
        10. Animation
      7. Summary
    13. 6. CSS3 Animations
      1. CSS3 transitions
        1. The transition-duration property
        2. The transition-timing-function property
        3. The transition-delay property
      2. CSS3 transforms
        1. rotate
        2. scale
        3. translate
        4. skew
        5. translate (3D)
        6. rotate (3D)
        7. preserve-3d
      3. CSS3 animation
        1. @keyframes
        2. animation-name
        3. animation-duration
        4. animation-delay
        5. animation-timing-function
        6. animation-iteration-count
        7. animation-direction
        8. animation-play-state
      4. Summary
    14. 7. Tools and Utilities in HTML5 and CSS3
      1. Modernizr
      2. Liveweave
      3. HTML KickStart
      4. HTML5 Boilerplate
      5. The CSS3 Cheat sheet
      6. Summary
    15. Index

Product information

  • Title: HTML5 and CSS3 Transition, Transformation, and Animation
  • Author(s):
  • Release date: November 2013
  • Publisher(s): Packt Publishing
  • ISBN: 9781849519946