Designing Next Generation Web Projects with CSS3

Designing Next Generation Web Projects with CSS3
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • 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

Book Details

Language : English
Paperback : 288 pages [ 235mm x 191mm ]
Release Date : January 2013
ISBN : 1849693269
ISBN 13 : 9781849693264
Author(s) : Sandro Paganotti
Topics and Technologies : All Books, Web Development, Web Development

Table of Contents

Chapter 1: No Sign Up? No Party!
Chapter 2: Shiny Buttons
Chapter 3: Omni Menu
Chapter 4: Zooming User Interface
Chapter 5: An Image Gallery
Chapter 6: Parallax Scrolling
Chapter 7: Video Killed the Radio Star
Chapter 8: Go Go Gauges
Chapter 9: Creating an Intro
Chapter 10: CSS Charting
  • 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

                      Sandro Paganotti

                      Sandro Paganotti is a web developer, a Google Developers Expert in HTML5, a technical writer, and an HTML5/CSS3 teacher with a passion for Ruby and cutting-edge frontend technologies. He enjoys finding clever and pragmatic solutions to ambitious projects at Comparto Web, the company he co-founded in 2012. He's also a funding member of WEBdeBs, a local community of web enthusiasts, and a speaker at local and national conferences.
                      Sorry, we don't have any reviews for this title yet.

                      Code Downloads

                      Download the code and support files for this book.

                      Submit Errata

                      Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

                      Sample chapters

                      You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                      Frequently bought together

                      Designing Next Generation Web Projects with CSS3 +    Node Cookbook: Second Edition =
                      50% Off
                      the second eBook
                      Price for both: $39.00

                      Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                      What you will learn from this book

                      • 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.


                      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.

                      Code Download and Errata
                      Packt Anytime, Anywhere
                      Register Books
                      Print Upgrades
                      eBook Downloads
                      Video Support
                      Contact Us
                      Awards Voting Nominations Previous Winners
                      Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                      Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software