PacktLib: Designing Next Generation Web Projects with CSS3

Designing Next Generation Web Projects with CSS3

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

No Sign Up? No Party!

HTML structure

Creating the form

Basic styling

Marking required fields

The checked radio buttons trick

Counting and displaying invalid fields

Balloon styling

Graceful degradation

Summary

Shiny Buttons

Creating a coin-operated push button

The :before and :after pseudo-selectors

Gradients

Avoiding experimental prefixes

Shadows

Adding labels

Handling mouse clicks

Small changes in CSS, big results

Creating an ON/OFF switch

The active state

Adding the checked state

Adding colors

Supporting older browsers

Supporting IE10

Summary

Omni Menu

Setup operations

Styling the first-level items

Styling submenus

Moving parts

Adding transitions

Introducing animations

Adding colors

Media queries

Styling the mobile version

Improving speed

Implementing in older browsers

Summary

Zooming User Interface

Infographics

Implementing Flexible Box Layout

Defining the basic structure

Adding Polyfills

Embedding SVG

Taking advantage of Modernizr

The :target pseudo-selector

CSS3 transforms

Adding a mask

Targeting SVG with CSS

Graceful degradation

Summary

An Image Gallery

Preparing the structure

Implementing opacity transition

Implementing slide transition

3D transformations

Adding the slideshow mode

Previous and next arrows

CSS preprocessors

Support for older browsers

Summary

Parallax Scrolling

Discovering perspective

CSS 3D parallax

Adding some randomness to the gallery

Rotating the images

A 3D panorama

Dealing with older browsers

Summary

Video Killed the Radio Star

The HTML5 video element

Masks

Implementing the project

WebKit-specific properties

Masking with text

Filters

Summary

Go Go Gauges

A basic gauge structure

Installing Compass

CSS reset and vendor prefixes

Using rem

Basic structure of a gauge

Creating the arrow

Animating the gauge

Overall indicator

Adding some trembling

Displaying the gauge value

Graceful degradation

Implementing the gauge in Internet Explorer 8

Compass and Internet Explorer 10

Summary

Creating an Intro

Project description

Creating an HTML structure

The new Flexible Box Model

Disposing the slides

Moving the camera

Fun with animations

Final touches

Summary

CSS Charting

Creating a bar chart

Subdividing the space

Creating bar labels

Designing the bars

Beautifying the chart

Chart series

Rotating the chart

Creating pie charts using only CSS and HTML

Summary

Index