You'll be surprised, but CSS3 doesn't exist. Actually, this term is used to group a wide number of different specifications (see the the list at http://www.w3.org/Style/CSS/current-work), each of them with its own working team and completion state. Some are still Working Drafts while others are already Candidate Recommendations.
This book tries to present you with a snapshot of what can be done today with this technology. It is organized into 10 projects, each of them relying heavily on some of the new CSS features such as background gradients, Flexible Box Layout, or CSS filters.
All the projects have been developed and tested to work on the latest Chrome and Firefox browsers. The vast majority of them render and behave well even on Internet Explorer 10.
Wherever possible, a workaround to make things work even on older browsers is provided. In this way, different techniques and tools are introduced, such as feature detection with Modernizr, graceful degradation, fallback properties triggered with conditional comments, and a bunch of quality polyfill libraries.
The book also focuses on different kinds of tools, that are aimed at helping us while developing rather complex CSS documents. I'm talking about Sass and Compass, which provide us with a new syntax to better organize our project, and a bunch of useful functions that we'll see later in this book.
Dealing with vendor experimental prefixes is annoying. In this book, we'll discover how to use some libraries that do this task for us, either client or server side.
Well, there's nothing more to say here, I hope that you'll find the projects at least as interesting and fun to develop as I did, and that from them you'll learn new techniques, properties, and tools to help in your day-to-day job.
Chapter 1, No Sign Up? No Party!, will show you how to create a subscription form for your upcoming party. We use this chapter to discover how CSS3 features, such as some new pseudo-selectors, can enhance a form by adding specific styles to required fields or to valid/invalid ones.
Chapter 2, Shiny Buttons, will show you how to create some CSS3 enhanced buttons by using techniques such as rounded corners, multiple backgrounds, gradients, and shadows. Then we animate them using the classic :hover pseudo-selector with CSS3 transitions.
Chapter 3, Omni Menu, focuses on developing a menu that behaves differently according to the device we are using to view it. We achieve this goal using media queries and a nice feature detection library.
Chapter 4, Zooming User Interface, uses CSS3 transitions mixed with SVG graphics and the new :target pseudo-selector to create a fully functional zooming user interface that displays a cool infographic.
Chapter 5, An Image Gallery, will show you how to develop a pure CSS3 image slideshow with different transition effects such as fading, sliding and 3D rotation, and multiple navigation modes. Switching between different effects is made possible using the new :checked pseudo-selector. This chapter also introduces Sass, an extension of CSS3 that we can use to write cleaner, more readable, and smaller CSS files.
Chapter 6, Parallax Scrolling, focuses on building a real parallax effect triggered on page scroll. This is archived using 3D transform properties, such as transform-style and perspective.
Chapter 7, Video Killed the Radio Star, experiments with some cool video effects that can be archived using CSS3, including static and animated masks, blur, black and white, and so on. This chapter also deals with some interesting backward- and cross-browser compatibility issues.
Chapter 8, Go Go Gauges, shows how to take full advantage of the new CSS3 properties by creating an animated gauge that can be used as a widget in a webpage. This project also introduces the Compass: a Sass plugin that takes care of experimental prefixes, Reset stylesheet, and so on.
Chapter 9, Creating an Intro, takes CSS3 animations to another level by creating a 3D animation that uses a camera moving in a 3D scene.
Chapter 10, CSS Charting, will show you how to create bar charts and pie charts with CSS3 without the need for anything other than CSS and HTML. With the right polyfills we can then make these charts behave well even on older browsers.
To develop the projects provided with this book you need a text editor (for example, Sublime Text 2, Notepad ++, and so on), and a web server to run the code. If you have never installed a web server, you may want to use a pre-packaged solution such as MAMP for Mac (http://www.mamp.info/en/mamp/index.html) or WampServer for Windows (http://www.wampserver.com/). These packages also install PHP and MySQL, that are not required to run the projects of this book, so you can simply ignore them.
Once you have downloaded, installed, and started the web server, you can create the projects within the web server's document root.
This book is designed for frontend web developers. It requires a solid knowledge of CSS syntax and of the most common CSS2 properties and selectors.
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 are shown as follows: "We used the :after pseudo-selector to get access to the location just after the element with a label class."
A block of code is set as follows:
html{
height: 100%;
background: black;
background-image: url('../img/background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top left;
font-family: sans-serif;
color: #051a00;
}When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
#old_panel{
background: rgb(150,130,90);
padding: 9px 0px 20px 0px;
}Any command-line input or output is written as follows:
sass scss/application.scss:css/application.css
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: "Let's mark border-radius, box-shadow, CSS Gradients, and multiple backgrounds."
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 via 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 on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
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.