HTML5 and Advanced CSS3

This course is included in our On-demand training solution.

Overview

CSS3 provides a rich environment for manipulating images and text using animation and transforms. CSS3 with HTML5 can accomplish many graphical transforms and animations that used to require Javascript or other third party libraries. In this course, you’ll learn to work with different transforms and animations provided by CSS3; for example, to rotate, skew, and scale HTML5 objects.

Target Audience

Web designers at all levels who need or want to use the advanced animation and transformation techniques of CSS3 in HTML5 documents

Prerequisites

None

Expected Duration

150 min.

Course Objectives

Course Introduction

Rotating Objects Using the Transform Property

  • apply a transform to rotate an object in an HTML5 document
  • Distorting Objects Using the Transform Matrix

  • distort an object using the transform matrix in an HTML5 document
  • Applying 3D Transformations

  • describe how to apply a 3D transformation to an object in an HTML5 document
  • Positioning Objects Using Transform

  • use a transform to position an object in HTML5
  • Scaling Objects Using Transform

  • add scaling to an object using a transform in HTML5
  • Skewing Objects Using Transform

  • apply a transform to skew an object in HTML5
  • Adding Perspective Using Transform

  • use a transform to add a perspective to an object in an HTML5 document
  • Creating Animation with CSS3

  • describe how to use CSS3 to create an animation in HTML5
  • Animating a Picture Using CSS3

  • create an animated picture using CSS3 in an HTML5 document
  • Using CSS3 Animation Keyframes

  • describe how CSS3 animation keyframes are used in HTML5
  • Cycling the Color of a DIV Using CSS3 Animation

  • cycle the color of a div using CSS3 animation in an HTML5 document
  • Rotating Objects Using CSS3 Animation

  • rotate objects using CSS3 animation in an HTML5 document
  • Using Advanced CSS3 Animation Techniques

  • describe some of the advanced CSS3 animation techniques available in HTML5
  • Changing a Website’s Background Color Using CSS3

  • use CSS3 to change a web site’s background color in an HTML5 document
  • Changing a Website’s Background Image Using CSS3

  • use CSS3 to change a web site’s background image in an HTML5 document
  • Modifying Background Images Using CSS3 Styles

  • describe how to use CSS3 styles to modify background images in an HTML5 document
  • Creating Columns and Flow Text Using CSS3

  • apply CSS3 styles to create columns and flow text in an HTML5 document
  • Using Image Alignment

  • describe how and when to use image alignment in HTML5
  • Using CSS3 Pseudo Selectors

  • describe CSS3 pseudo selectors in HTML5
  • Adding CSS3 Pseudo Selectors

  • apply CSS3 pseudo selectors to an HTML5 document
  • Creating Drop Shadows Using CSS3

  • use CSS3 drop shadows in an HTML5 document
  • Creating Linear Gradients Using CSS3

  • apply CSS3 linear gradients in an HTML5 document
  • Creating Radial Gradients Using CSS3

  • create radial gradients in CSS3 in an HTML5 document
  • Creating Gradient Text Using CSS3

  • create gradient text using CSS3 in an HTML5 document
  • Making Items Transparent Using CSS3

  • add transparency to objects in HTML5 using CSS3
  • Changing the Range Slider Style Using CSS3

  • use CSS3 to change the range slider style in an HTML5 document
  • Drawing Triangles Using CSS3

  • draw triangles using CSS3 in HTML5
  • Exercise: Creating HTML5 Animations with CSS3

    MONTHLY SUBSCRIPTION

    $129/month
     

    ANNUAL SUBSCRIPTION

    $1295/year

    Multi-license discounts available for Annual and Monthly subscriptions.