Szczegóły ebooka

Designing Next Generation Web Projects with CSS3. A practical guide to the usage of CSS3 – a journey through properties, tools, and techniques to better understand CSS3

Designing Next Generation Web Projects with CSS3. A practical guide to the usage of CSS3 – a journey through properties, tools, and techniques to better understand CSS3

Sandro Paganotti

Ebook
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.
  • 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
  • Tytuł: Designing Next Generation Web Projects with CSS3. A practical guide to the usage of CSS3 ‚Äì a journey through properties, tools, and techniques to better understand CSS3
  • Autor: Sandro Paganotti
  • Tytuł oryginału: Designing Next Generation Web Projects with CSS3. A practical guide to the usage of CSS3 ‚Äì a journey through properties, tools, and techniques to better understand CSS3
  • ISBN: 9781849693271, 9781849693271
  • Data wydania: 2013-01-21
  • Format: Ebook
  • Identyfikator pozycji: e_3cat
  • Wydawca: Packt Publishing