HTML5 and CSS3 technologies are changing the face of the web, they are making the way we build websites, add new features, and develop more immersive experiences much faster and accessible to the masses. Transitions, transformations, and animations have always required a specialized component, until now. Learn to harness the power of HTML5 and CSS3 to make your interactive and visually compelling designs a reality.
HTML5 and CSS3 Transition, Transformation, and Animation will introduce any developer or designer to this new, exciting, and world-changing technology. Using practical and easy-to-follow examples, create visually compelling and interactive websites without the overhead and previously time consuming external components.
This is your jumpstart in learning to develop and realize your vision with the power and flexibility of HTML5 and CSS3.
HTML5 and CSS 3 Transition, Transformation, and Animation is your kick start to developing beautifully elegant, interactive, and entertaining web pages. You will start with a gentle reminder of the evolution in HTML and CSS, and then jump straight in following along with this example-driven, fast-paced exploration to help you quickly develop these highly prized skills in HTML5 and CSS3. You will finish with multiple artifacts to twist and change to suit your wildest imagination.
Chapter 1, Introduction to HTML5, explains the evolution of HTML5 along with the myths and facts about HTML5.
Chapter 2, Using the New Markup to Build a Semantic Page, explains the semantic markup of HTML5 and how to use the new properties to build a semantic page. Microdata is also explained in detail.
Chapter 3, Flexible Box Model in CSS3, will explain the concept of the Flexible Box Model in CSS3. The properties of the Flex Container and Flex Items are explained in detail along with code examples for the same.
Chapter 4, Web Forms in HTML5, will explain the new web form elements of HTML5. You will learn about the new input types and the new input attributes used in HTML5.
Chapter 5, Advanced Features of HTML5, will explain a lot of modern concepts, such as offline web apps, Geolocation, drag-and-drop, Webstorage, and creating an audio and video player. HTML5 Canvas is explained in detail in this chapter.
Chapter 6, CSS3 Animations, will explain the transition, transformation, and animation features of CSS3. Code examples are used to describe all the prominent features used for the CSS3 animation purposes.
Chapter 7, Tools and Utilities in HTML5 and CSS3, will give examples of the various tools and utilities used in HTML5 and CSS3, which will make coding simpler.
You just need to use an editor, such as Notepad or Notepad++ to practice the code examples in this book. You can also use advanced editors for these examples. However, we recommend that you use a notepad to practice it. You can also change the code to understand the difference in the output. Hence, to understand the concept well, you can modify the code and practice it to understand the subtle nuances of HTML5 and CSS3.
Basic knowledge of HTML 4 and CSS is required to understand this book. If you are a web developer or designer and would love to learn and use the new technologies included within HTML5, this is the right book for you. Start at the beginning and learn some of awesome features around transitions, transformations, and animations. This book is for beginners with transitions, transformations, and animations that want a quick and simple kick-start using clear and reusable examples.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We will use the display property of CSS to explain the functionality. The display property is set to flex or inline-flex."
A block of code is set as follows:
<html>
<head>
<style>
#flex-container {
display: -webkit-flex;
display: flex;
width: 500px;
height: 500px;
background-color: Navy;
}
#flex-item {
background-color: Silver;
width: 200px;
height: 200px;
margin: 20px;
}
</style>
</head>
<body>
<div id="flex-container">
<div id="flex-item">Alpha</div>
<div id="flex-item">Beta</div>
</div>
</body>
</html>When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
#flex-item {
background-color: lime;
transition-property: background, border-radius;
-webkit-transition-property: background, border-radius;
transition-duration: 2s, 6s;
-webkit-transition-duration: 2s, 6s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
width: 200px;
height: 200px;
margin: 20px;
}New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "If we see the output, the Flex Item Dos was defined after Uno in the code. However, we assigned an order value of -1 to Dos, therefore, Dos was displayed first."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title through the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.