Sandro Paganotti - Designing Next Generation Web Projects with CSS3 [2013, PDF/EPUB, ENG]

Preface

Chapter 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

Chapter 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

Chapter 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

Chapter 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

Chapter 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

Chapter 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

Chapter 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

Chapter 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

Chapter 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

Chapter 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