Sue Brandreth's Learning Resources

Gasston, P. (2014) The Book of CSS3 – A Developer’s Guide to the Future of Web Design, Second Edition, No Starch Press

Download eBook PDF (PDF 9,446KB)
Download Source Code (ZIP 7,056KB)
Companion website: http://thebookofcss3.com/

Goldstein, A (2013) Learning CSS3 Animations and Transitions – A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframe Animations, and JavaScript

Download eBook (PDF 14,176KB)
Download Code Source (ZIP 2,349KB)

For web developers building rich web and mobile applications, standards-based CSS3 offers powerful advantages over traditional Flash-based approaches – and since Apple’s immensely popular iPad and iPhone don’t support Flash, moving to CSS3 has become even more urgent. However, most CSS3 guides focus primarily on the basics, frustrating web developers who want to do sophisticated work. Learning CSS3 Animations and Transitions is the first book focused entirely on creating production-quality rich animations and transitions with CSS3. Leading web development trainer Alexis Goldstein covers everything web developers need to know, teaching through solid examples that help web professionals build their skills one step at a time. Readers will learn how to: *

• Create 2D transforms that serve as the foundation for CSS3 animations
• Use transitions to make changes come alive
• Master essential keyframing techniques
• Combine transitions, transforms, and parallax scrolling in immersive web experiences
• Transform in 3D, and animate 3D transforms
• Creating increasingly complex and Flash-style animations
• Build powerfully effective interactive infographics with CSS3 and HTML5
• And much more…

Table of Contents
1. Working with CSS3 Animations   
Intro to CSS3 Animations  
Summary of CSS3 Animation Tools    
HTML5 Boilerplate
Tools for Generating Vendor Prefixes
-prefix-free
Tools for Reviewing Browser Support
The Modernizr Library
Leveraging the Modernizr Library
CSS Fallbacks via Modernizr
The Default Message for Unsupported Browsers
Repeated CSS Property Definitions
Hardware Acceleration
Viewing Hardware-Accelerated Layers in Chrome
Viewing Hardware-Accelerated Layers in Safari
A Final Word on Working with CSS3 Animations

2. Building a Foundation with Transforms
Introducing Transforms 
Browser Support for transform
The transform Syntax
Transform Functions   
The Effect of Transform Functions on Surrounding Elements
rotate
scale
skew
translate
Adding a Fallback Message for Older Browsers
matrix
Building a Bicycle in CSS3 
Laying Out the Basic Skeleton
Creating Bicycle Wheels with border-radius
Drawing the Spokes
Drawing the Frame
Finishing the Bike with a Seat and Handlebars
Adding a Fallback Message for Older Browsers
Summary
Challenge

3. Animating Elements with Transitions 
Introduction to Transitions
Browser Support for transition
Creating a Simple Transition
The transition Shorthand Property
Triggering a Transition Animation with Hover Events
Transitioning Changes to the Background Color
Transitioning Changes to transform Values on Hover
Triggering a Transition Animation with Click Events    
Triggering the background-color Transition in a Mobile Environment
Triggering the translateX Transition in a Mobile Environment
Transition Properties    
transition-property
transition-duration
transition-timing-function
transition-delay
Spinning the Bike Wheels    
Animating the Bike to Move Across the Screen    
Spinning the Wheels as the Bike Moves
Triggering the Animation
Summary    
Challenge

4. Keyframe Animations    
Introduction to Keyframe Animations 
Browser Support for Keyframe Animations
Creating a Basic Keyframe
The Components of a Keyframe
Setting animation Properties
Using Percentages in Keyframe Selectors
Controlling a Keyframe Animation with Properties   
animation-fill-mode
animation-iteration-count
animation-direction
animation-delay
animation-play-state
The animation Shorthand Property
Animating a Recoiling Spring    
Creating the Keyframes for the Spring’s Compress and Recoil
Controlling the Animation’s Playback
Adding Additional Compress and Recoil Keyframes
Animating a Floating Balloon  
Applying Multiple Keyframe Animations to a Single Element
Adding a Fallback Message for Older Browsers
Summary    
Challenge

5. Creating 3D Effects with Parallax Scrolling    
Introduction to Parallax Scrolling    
A Three-Layer Parallax Scrolling Animation    
Creating the Background
Animating the Midground Sprite
Animating a Foreground Sprite
Animating Several Scenes with Parallax Scrolling    
The Animation’s Layout and Basic Styles    
The Animation’s Core HTML
Base Styles for the Page
Scene 1: Creating a Skateboarding Robot
The Background for Scene 1
Styling Scene 1’s Sprites
Moving Scene 1’s Elements Across the Screen
Triggering the Transitions via JavaScript
Scene 2: Moving Between Landscapes
Scene 2’s HTML and CSS
Scene 2’s JavaScript
Scene 3: Making the Robot Walk    
Scene 3’s HTML and CSS
Scene 3’s JavaScript
Summary   
Challenge

6. Adding Depth with 3D Transforms   
Introduction to 3D Transforms    
3D Transform Properties
Defining Transforms on All Three Axes
Browser Support for 3D Transforms
Drawing a 3D Cube    
Creating a Containing Element for the Scene
Rendering Nested Elements in 3D Space
Rotating the Faces of the Cube
Changing Depth with translateZ
Changing the Camera Angle with perspective-origin
Creating a House of Cards
Styling the Containing Element for the House of Cards
Positioning and Styling the Cards
Transforming the Cards
Adjusting the Ordering of the Stacked Cards
Adding a Pattern to the Card Backs
Summary    
Challenge   

7. Animating 2D and 3D Transforms    
Basic 3D Transform Animations with Transitions  
Adding HTML5 Sliders to Control Rotation
Rotating a 3D Object as the Slider Changes
Adding Basic Styles
Optimizing Performance   
Using Transitions Instead of Keyframe Animations to Improve Performance
Leveraging Hardware Acceleration with translate3d and translateZ
Blowing in the Wind: Animating Dandelion Seeds   
The Base HTML
Animating the Stem Blowing in a Gust of Wind
Placing and Animating the Seeds
Adding More Seeds
Animating Groups of Seeds
Summary    
Challenge  

8. Using Transitions and Transforms to Animate Text    
Introduction to the Typewriter Example    
The Animation’s Layout and Basic Styles   
The Animation’s Core HTML
Using a Custom Font with @font-face
Styling the Typewriter Roller and Paper Elements
Scene 1: Making the Quote Rise Up the Screen
Using Keyframe Animations to Move the Quote Upward
Chaining Together Multiple Keyframe Animations
Using JavaScript to Trigger the Animation
Revealing the Letters One at a Time with JavaScript and Keyframe Animations
Determining the Post-Typing Timing
Scene 2: Making Text Fall
Animating Falling Words
Triggering Scene 2’s Animation
Scene 3: Scrolling Text    
Scene 4: Growing Text   
Scene 5: Continuing the Animation
Moving the Second Part of the Quote Upward
Repeating the Turn of the Roller
Setting Up the Timing for the Rest of the Animation
Summary    
Challenge    

9. Building Flash-Style Animations with Keyframe Animations    
Introduction to the Meow Street Fat Cat Animation    
The Animation’s Layout and Basic Styles
The Basic HTML Elements for the Animation
The Basic Elements and Styling for Morgan the Cat
Setting Up Morgan’s Newspaper
Staggering the Scenes of the Animation with JavaScript
Scene 1: Moving the Newspaper    
Scene 2: Reading the Newspaper   
Combining Animations on Two Separate Elements
The Effect of Transforms on the Stacking Context and Containing Block
Scene 3: Moving to and Reading Page 2    
Scene 4: Moving the Animation Outside 
Zooming Out to a Larger Scene
Shrinking Morgan Down as You Zoom Out
Scene 5: Adding Murphy, the Toughest Cat Cop on the Beat   
HTML and Styling for Murphy the Police Cat
Using transform-origin to Align Pieces of Murphy
Scene 6: Knocking on Morgan’s Door    
Scene 7: Animating a Spinning Newspaper  
Hiding the Previous Scenes
Styling the Final Scene’s Newspaper
Spinning the Newspaper and Scaling It Up
Avoiding Pixelation by Scaling the Newspaper Down Initially
Support for Opera 12   
Defining Two Selectors for Each 3D Scene
Applying Further Fallbacks for Opera 12
Summary    
Challenge    

10. Creating Animated Infographics    
What Are Infographics?    
Image-Based Infographics
CSS3-Driven Infographics
Visualizing Data for Mixed Drinks 
The Base HTML for the Infographic
Creating the Base Page Styles
Base HTML for the First Drink Graphic
Default Drink Styles
Styling the Initial Ingredient
Animating the Ingredients Being Poured In
Styling the Remaining Ingredient
Fading in the Ingredients Labels
Adding a Second Drink
Adding the Remaining Drinks
Citing Data Sources
Supporting Older Browsers with Modernizr
Summary    
Challenge 

11. Building Interactive Infographics    
Creating an Element to Hold the Drink Recipes    
Styling the Drink Recipes
Hiding the Ingredients by Default
Unveiling the Recipe Page
Sliding in the Recipe Page
Making the Recipe Visible When the User Clicks a Drink
Determining the Recipe for the Selected Drink
Hiding an Old Recipe When a New Drink Is Clicked
Adjusting the recipes Element Placement for the Second Row of Drinks
Fading in the Recipe Text
Highlighting the Selected Ingredient  
Animating Changes to the Selected Ingredient
Triggering the Ingredient Highlight via jQuery
Ensuring Compatibility in Older Browsers
Changing the Cursor
Summary    
Challenge   

Bradley, S. (2014) CSS Animations and Transitions for the Modern Web, Adobe

Download Sample Chapter 4 (PDF 1,230KB)
Download Source Code (ZIP KB)

Modern websites use a variety of animated effects not only to improve usability but also to delight and surprise users. Some of these effects require complex scripting or programming skills, but many are within the grasp of designers who are already familiar with CSS and HTML. CSS Animations and Transitions for the Modern Web shows designers how to add movement to web pages over time using CSS3 style definitions.
Author Steven Bradley begins as simply as possible and uses elementary skills as the basis for more advanced techniques. Conceptual explanation is combined with specific examples to give designers a solid foundation in
the art of creating dynamic and appealing websites. Steven’s examples are posted at peachpit.com so readers can see the animations in action and download the code files for further study. Instructions for access are in the “Getting Started” section.
With CSS Animations and Transitions for the Modern Web, you’ll learn how to make your websites more vibrant and compelling with user interfaces that are functional, reliable, and usable, as well as beautiful.

• Up-to-date information on current browser support for CSS animations and transitions
• An introduction to manipulating web page objects in both 2D and 3D space
• Techniques for creating smooth transitions between object states
• An overview of Disney’s principles for creating realistic animation and how they apply to web page designs

Chapter 1: Introduction

• Why CSS Animation is Important
• Critical and Non-Critical Visual Experience
• Tools: What you need

Chapter 2: Transforms

• Browser Support
• Fallbacks and PolyFills
• CSS Visual Formatting Model
• The Transform Rendering Model
• 2-Dimensional Transforms
  • transform property
  • transform-origin property
• 3-Dimensional Transforms
  • Perspective property
  • Perspective-origin property
  • Backface-visibility property
• Transform Functions
  • 2-Dimensional Functions
    • matrix()
    • translate()
    • translateX()
    • translateY()
    • scale()
    • scaleX()
    • scaleY()
    • rotate()
    • skew()
    • skewX()
  • 3-Dimensional Functions
    • matrix3d()
    • translate3d()
    • translateZ()
    • scale3d()
    • scaleZ()
    • rotate3d()
    • rotateX()
    • rotateY()
    • rotateZ()
    • perspective()
  • Combining Transforms

Chapter 3: Transitions

• Browser Support
• Fallbacks and PolyFills
• Transition Properties
  • Transition-property
  • Transition-duration property
  • Transition-timing-function property
    • ease
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • step-start
    • step-end
    • steps
    • cubic-bezier
  • Transition-delay property
  • Transition shorthand property
• Starting and Reversing Transitions
• CSS properties that can be transitioned
• Transition Events

Chapter 4: Animation

• Browser Support
• Fallbacks and PolyFills
• Keyframes
  • @Keyframes rule
• Animation Behavior
  • Differences between animation and transitions
• Animation Properties
  • animation-name property
  • animation-duration property
    • ease
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • step-start
    • step-end
    • steps
    • cubic-bezier
  • animation-timing-function property
  • animation-iteration-count property
  • animation-direction property
  • animation-play-state property
  • animation-delay property
  • animation-fill-mode property
  • Animation shorthand property
• CSS Properties that can be animated
• Animation Events
  • Animation-start
  • Animation-end
  • Animation-iteration

Chapter 5: Principles for More Realistic Animation

• When to use Transitions and when to use animation
• Disney’s Twelve principles of animation
  • Squash and stretch
  • Anticipation
  • Staging
  • Straight Ahead Action and Pose to Pose
  • Follow Through and Overlapping Action
  • Slow In and Slow Out
  • Arcs
  • Secondary Action
  • Timing
  • Exaggeration
  • Solid Drawing
  • Appeal

Chapter 6: Examples

End Matter

• Resources

Teague, J. R. (2013) CSS3: Visual QuickStart Guide, Sixth Edition, Peachpit Press, Pearson

Download eBook PDF (PDF 17,756KB)

Download Source Code (ZIP KB) (Available from http://www.jasonspeaking.com/css3vqs)

Companion Web Site: http://www.jasonspeaking.com/css3vqs

CSS3 Video QuickStart (VLC Media Files .mp4)

001 – Getting the Right Tools (mp4 101,549KB) (File too large for upload)
002 – The HTML document (mp4 8,506KB)

003 – The Semantic Web (mp4 4,817KB)

004 – Adding Content (mp4 27,930KB)

005 – Adding Links, Navigation and Controls (mp4 25,564KB)

006 – Understanding Progressive Enhancement (mp4 13,094KB)

007 – Creating a Grid (mp4 26,624KB)

008 – Adding Space and Size (mp4 27,648KB)

embedded by Embedded Video
Download Video
009 – Controlling Typography (mp4 45,375KB)

010 – Adding Web Fonts (mp4 22,278KB)

011 – Adding a Splash of Colour (mp4 22,553KB)

012 – Styling borders and Backgrounds (mp4 28,617KB)

013 – Styling Links and Controls (mp4 21,093KB)

014 – Adding Transitions (mp4 14,228KB)

015 – Understanding Responsive Design (mp4 30,720KB)

016 – Using Contextual Styles (mp4 15,734KB)

017 – Using Media Queries (mp4 27,062KB)

018 – Planning an Adaptive Design (mp4 35,840KB)

019 – Choosing the Breakpoints (mp4 12,798KB)

020 – Adjusting Styles for Medium Screens (mp4 30,250KB)

021 – Adjusting Styles for Small Screens (mp4 57,263KB)

With CSS3: Visual QuickStart Guide, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS. Best-selling author Jason Cranford Teague takes readers through today’s CSS essentials and provides extensive coverage of CSS3 and CSS 2.1 techniques. The book outlines what can be done with CSS3 now and how the latest browsers have implemented many of the new features. Both beginning users, who want a thorough introduction to CSS, and more advanced users, who are looking for a convenient reference, will find what they need here in straightforward language and through readily accessible examples.

Table of Contents

Download eBook PDF (PDF 27,831KB)
Download Source Code (ZIP 4,123KB)

Lunn, I. (2013) CSS3 Foundations (Treehouse Book Series), John Wiley and Sons, Ltd.

Download eBook PDF (PDF 28,219KB)

Download Source Code (ZIP 20,822KB)

Companion Web Site: http://ianlunn.co.uk/portfolio/css3-foundations/

Gillenwater, Z. M. (2011) Stunning CSS3: A Project-Based Guide to the Latest in CSS (Voices That Matter), New Riders, Peachpit Press

Download eBook PDF (PDF 12,024KB)

Download Source Code: http://www.stunningcss3.com/code/index.html

Companion Web Site: http://www.stunningcss3.com/

CSS3 adds powerful new functionality to the web’s visual style language to help you create beautiful and engaging designs more easily than ever. With CSS3, you can create eye-catching visual effects such as semitransparent backgrounds, gradients, and drop shadows without using images; display text in beautiful, unique, non-web-safe fonts; create animations without Flash; and customize a design to the user’s unique device or screen size without JavaScript.

You’ll learn how to accomplish these effects and more by working through a series of practical yet cutting-edge projects. Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration. You’ll learn all of the most popular, useful, and well-supported CSS3 techniques, plus:

• How to use CSS3 to enhance your pages, not just in terms of looks, but also in terms of usability, accessibility, and efficiency

• When and how to provide workarounds and fallbacks for older, non-supporting browsers

• How to create stunning designs with unique typography and beautiful graphic details

• Advanced new selectors to streamline your markup and make it less prone to human errors

• New methods for creating multiple-column layouts

• How to quickly and easily create mobile-optimized web designs without using scripting

Table of Contents

Powers, D. (2012) Beginning CSS3 (Expert’s Voice in Web Development), Apress

Download eBook PDF (PDF 30,669KB)

Download Source Code (ZIP 2,120KB)

Beginning CSS3 teaches you how to style web pages using Cascading Style Sheets (CSS) the language of web design. Starting from first principles, you’ll learn through a series of practical exercises how to change the default look of HTML tags, adding color, backgrounds, and borders. The book demystifies core concepts, such as the CSS box model and selectors, giving you the confidence and knowledge to create innovative and flexible page layouts. You’ll also learn how to create rounded corners, drop shadows, and gradients without the need for images, using the latest CSS3 techniques. What you’ll learn Teaches how to style attractive and flexible web pages Hands-on exercises demonstrate how to combine style rules for different effects Comprehensive coverage of CSS2.1 and stable parts of CSS3 Who this book is for Beginning CSS3 is aimed at web designers who want to master the use of Cascading Style Sheets to style and lay out modern web pages. It teaches core concepts, such as the CSS box model and choosing the most appropriate selectors to apply styles efficiently. This makes it an excellent choice for both complete beginners and web designers who want to improve their understanding of CSS. Table of Contents Introducing CSS – the Language of Web Design Using Basic Selectors Specifying Sizes, Colors, and Files Styling Text Embedding Web Fonts Understanding Layout with the CSS Box Model Floating Elements for Layout Adding Backgrounds Adding Borders and Drop Shadows Styling Lists and Navigation Menus Positioning Elements Precisely Cross-Browser Layout Techniques Using Advanced Selectors Styling Tables Generated Content Creating a Print Style Sheet Targeting Styles at Different Devices with Media Queries Using CSS3 Multi-Column Layout Creating Gradients Without images 2D Transformations and Transitions Animating Elements with CSS Keyframes What Next?

Table of Contents