O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Designing Next Generation Web Projects with CSS3

Book Description

A practical guide to the usage of CSS3 - a journey through properties, tools, and techniques to better understand CSS3

  • 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

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.

Table of Contents

  1. Designing Next Generation Web Projects with CSS3
    1. Table of Contents
    2. Designing Next Generation Web Projects with CSS3
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. No Sign Up? No Party!
      1. HTML structure
        1. Reset stylesheet and custom fonts
      2. Creating the form
        1. Misplaced labels
      3. Basic styling
        1. Defining properties
      4. Marking required fields
      5. The checked radio buttons trick
        1. Displaying icons within radio button labels
      6. Counting and displaying invalid fields
        1. Implementing the counters
      7. Balloon styling
      8. Graceful degradation
      9. Summary
    9. 2. Shiny Buttons
      1. Creating a coin-operated push button
      2. The :before and :after pseudo-selectors
      3. Gradients
        1. The gradient syntax
      4. Avoiding experimental prefixes
        1. Upcoming syntax changes for CSS3 gradients
      5. Shadows
      6. Adding labels
      7. Handling mouse clicks
      8. Small changes in CSS, big results
      9. Creating an ON/OFF switch
        1. Creating a mask
      10. The active state
      11. Adding the checked state
      12. Adding colors
      13. Supporting older browsers
      14. Supporting IE10
      15. Summary
    10. 3. Omni Menu
      1. Setup operations
      2. Styling the first-level items
        1. Using the inline-block display
        2. Using new pseudo-selectors
        3. Completing the first level
      3. Styling submenus
      4. Moving parts
      5. Adding transitions
      6. Introducing animations
      7. Adding colors
      8. Media queries
      9. Styling the mobile version
        1. Handling the new layout on desktop browsers
        2. Final adjustments
      10. Improving speed
      11. Implementing in older browsers
      12. Summary
    11. 4. Zooming User Interface
      1. Infographics
      2. Implementing Flexible Box Layout
      3. Defining the basic structure
      4. Adding Polyfills
      5. Embedding SVG
      6. Taking advantage of Modernizr
      7. The :target pseudo-selector
        1. Adding some anchors
      8. CSS3 transforms
        1. Applying transformations
        2. Flashing issues
      9. Adding a mask
      10. Targeting SVG with CSS
      11. Graceful degradation
      12. Summary
    12. 5. An Image Gallery
      1. Preparing the structure
        1. Applying the basic CSS
        2. Styling the bullets
      2. Implementing opacity transition
      3. Implementing slide transition
      4. 3D transformations
      5. Adding the slideshow mode
      6. Previous and next arrows
      7. CSS preprocessors
        1. Handling special cases
      8. Support for older browsers
      9. Summary
    13. 6. Parallax Scrolling
      1. Discovering perspective
        1. Creating a cube
        2. The perspective-origin property
      2. CSS 3D parallax
        1. Implementing parallax scrolling in WebKit
        2. Implementing parallax scrolling in Gecko
        3. Implementing parallax scrolling in Internet Explorer
      3. Adding some randomness to the gallery
      4. Rotating the images
      5. A 3D panorama
      6. Dealing with older browsers
      7. Summary
    14. 7. Video Killed the Radio Star
      1. The HTML5 video element
      2. Masks
        1. More advanced masking
      3. Implementing the project
        1. Animating masks
      4. WebKit-specific properties
      5. Masking with text
      6. Filters
        1. Grayscale filter
      7. Summary
    15. 8. Go Go Gauges
      1. A basic gauge structure
      2. Installing Compass
      3. CSS reset and vendor prefixes
      4. Using rem
      5. Basic structure of a gauge
        1. Gauge tick marks
        2. Dealing with background size and position
      6. Creating the arrow
        1. Moving the arrow
      7. Animating the gauge
      8. Overall indicator
        1. Reducing the size of the CSS
      9. Adding some trembling
      10. Displaying the gauge value
      11. Graceful degradation
      12. Implementing the gauge in Internet Explorer 8
      13. Compass and Internet Explorer 10
      14. Summary
    16. 9. Creating an Intro
      1. Project description
      2. Creating an HTML structure
        1. Creating the slide
      3. The new Flexible Box Model
        1. Creating a sample layout
      4. Disposing the slides
      5. Moving the camera
      6. Fun with animations
        1. Step animations
      7. Final touches
      8. Summary
    17. 10. CSS Charting
      1. Creating a bar chart
      2. Subdividing the space
        1. Adding Internet Explorer 8 and 9 support
      3. Creating bar labels
      4. Designing the bars
      5. Beautifying the chart
        1. Chart lines
      6. Chart series
        1. Adding some animations
        2. Internet Explorer 8 and 9
      7. Rotating the chart
      8. Creating pie charts using only CSS and HTML
      9. Summary
    18. Index