Skip to content

Latest commit

 

History

History
39 lines (31 loc) · 1.15 KB

README.md

File metadata and controls

39 lines (31 loc) · 1.15 KB
Raw

Module 7 - Advanced Graphics

Using Vector Icons

  • Importing font-awesome as CSS
  • Importing material-icons as CSS
  • Displaying icons without using magic characters
  • Understanding the path language of SVG, and the various fill rules
  • Understanding the limitations that apply on font SVGs

Advanced Backgrounds and Gradients

  • The background-image property
  • Using linear-gradient to create an "image" on the fly
  • Other gradient functions
  • Defining gradient stops
  • Setting the background size and position
  • Setting Background repeat
  • The background-clip property (Surprise!!!)

Transformations

  • The transform property
  • scale, rotate and translate transitions
  • The transform-origin property

Transitions

  • The transition property
  • Applying transitions on specific properties
  • Easing functions

Animations and Keyframes

  • The @keyframes rule
  • Defining the state on each keyframe
  • Applying the animation on an element
  • Setting the animation duration and easing function
  • Setting the fill behavior of the animation

Example: Creating an animated glow effect on icon

Example: Creating a repeating gesture animation