Designing Next Generation Web Projects with CSS3
eBook:
$26.99
Formats:
Formats:
$22.94
save 15%!
save 15%!
Print + free eBook + free PacktLib access to the book:
$71.98
Print cover: $44.99
$44.99
save 37%!
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
| Also available on: |
|
- 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 : EnglishPaperback : 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
Table of Contents
PrefaceChapter 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
Index
- 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
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
+
=
50% Off
the eBooks
the eBooks
Buy both these recommended eBooks together and get 50% off the total price
- 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
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.
