Designing Next Generation Web Projects with CSS3电子书

Designing Next Generation Web Projects with CSS3

Table of Contents

Designing Next Generation Web Projects with CSS3

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. No Sign Up? No Party!

HTML structure

Reset stylesheet and custom fonts

Creating the form

Misplaced labels

Basic styling

Defining properties

Marking required fields

The checked radio buttons trick

Displaying icons within radio button labels

Counting and displaying invalid fields

Implementing the counters

Balloon styling

Graceful degradation

Summary

2. Shiny Buttons

Creating a coin-operated push button

The :before and :after pseudo-selectors

Gradients

The gradient syntax

Avoiding experimental prefixes

Upcoming syntax changes for CSS3 gradients

Shadows

Adding labels

Handling mouse clicks

Small changes in CSS, big results

Creating an ON/OFF switch

Creating a mask

The active state

Adding the checked state

Adding colors

Supporting older browsers

Supporting IE10

Summary

3. Omni Menu

Setup operations

Styling the first-level items

Using the inline-block display

Using new pseudo-selectors

Completing the first level

Styling submenus

Moving parts

Adding transitions

Introducing animations

Adding colors

Media queries

Styling the mobile version

Handling the new layout on desktop browsers

Final adjustments

Improving speed

Implementing in older browsers

Summary

4. Zooming User Interface

Infographics

Implementing Flexible Box Layout

Defining the basic structure

Adding Polyfills

Embedding SVG

Taking advantage of Modernizr

The :target pseudo-selector

Adding some anchors

CSS3 transforms

Applying transformations

Flashing issues

Adding a mask

Targeting SVG with CSS

Graceful degradation

Summary

5. An Image Gallery

Preparing the structure

Applying the basic CSS

Styling the bullets

Implementing opacity transition

Implementing slide transition

3D transformations

Adding the slideshow mode

Previous and next arrows

CSS preprocessors

Handling special cases

Support for older browsers

Summary

6. Parallax Scrolling

Discovering perspective

Creating a cube

The perspective-origin property

CSS 3D parallax

Implementing parallax scrolling in WebKit

Implementing parallax scrolling in Gecko

Implementing parallax scrolling in Internet Explorer

Adding some randomness to the gallery

Rotating the images

A 3D panorama

Dealing with older browsers

Summary

7. Video Killed the Radio Star

The HTML5 video element

Masks

More advanced masking

Implementing the project

Animating masks

WebKit-specific properties

Masking with text

Filters

Grayscale filter

Summary

8. Go Go Gauges

A basic gauge structure

Installing Compass

CSS reset and vendor prefixes

Using rem

Basic structure of a gauge

Gauge tick marks

Dealing with background size and position

Creating the arrow

Moving the arrow

Animating the gauge

Overall indicator

Reducing the size of the CSS

Adding some trembling

Displaying the gauge value

Graceful degradation

Implementing the gauge in Internet Explorer 8

Compass and Internet Explorer 10

Summary

9. Creating an Intro

Project description

Creating an HTML structure

Creating the slide

The new Flexible Box Model

Creating a sample layout

Disposing the slides

Moving the camera

Fun with animations

Step animations

Final touches

Summary

10. CSS Charting

Creating a bar chart

Subdividing the space

Adding Internet Explorer 8 and 9 support

Creating bar labels

Designing the bars

Beautifying the chart

Chart lines

Chart series

Adding some animations

Internet Explorer 8 and 9

Rotating the chart

Creating pie charts using only CSS and HTML

Summary

Index