Free Sample
+ Collection

Designing Next Generation Web Projects with CSS3

Starting
Sandro Paganotti

A practical guide to the usage of CSS3 – a journey through properties, tools, and techniques to better understand CSS3
$13.50
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849693264
Paperback288 pages

About This Book

  • CSS3 properties and techniques have been applied to complete web projects
  • Explains tools to deal with CSS increasing in complexity, such as experimental vendor prefixes
  • Fast and concise style focused primarily on practical aspects like implementation techniques and fallback strategies

Who This Book Is For

This book is designed for you if you are a frontend web developer; it requires a solid knowledge of CSS syntax and of the most common CSS2 properties and selectors.

Table of Contents

Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
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
CSS3 transforms
Adding a mask
Targeting SVG with CSS
Graceful degradation
Summary
Chapter 5: 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
Chapter 6: Parallax Scrolling
Discovering perspective
CSS 3D parallax
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
Implementing the project
WebKit-specific properties
Masking with text
Filters
Summary
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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

What You Will Learn

  • Style form fields in response to their validation stage
  • Create realistic buttons enhanced with data-* attributes with a single element
  • Define media queries that activate CSS rules on specific device properties
  • Code a complete image slider with multiple transition effects without using JavaScript
  • Implement CSS3 features like border-radius and transform on old browsers using polyfills
  • Create a parallax effect by taking advantage of 3D transforms
  • Use the new pseudo-selectors to respond to user interaction
  • Apply effects to HTML5 videos such as blur and grayscale using CSS filters and SVG

In Detail

CSS3 unveils new possibilities for frontend web developers: things that would require JavaScript, such as animation and form validation, or even third party plugins, such as 3D transformations, are now accessible using this technology.

"Designing Next Generation Web Projects with CSS3" contains ten web projects fully developed using cutting edge CSS3 techniques. It also covers time saving implementation tips and tricks as well as fallback, polyfills, and graceful degradation approaches.

This book draws a path through CSS3; it starts with projects using well supported features across web browsers and then it moves to more sophisticated techniques such as multi polyfill implementation and creating a zooming user interface with SVG and CSS.

React to HTML5 form validation, target CSS rules to specific devices, trigger animations and behavior in response to user interaction, gain confidence with helpful tools like SASS, learn how to deal with old browsers and more.

"Designing Next Generation Web Projects with CSS3" is a helpful collection of techniques and good practices designed to help the implementation of CSS3 properties and features.

Authors

Read More

Recommended for You

Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
$ 26.99