CSS3 ESSENTIALS

Course Overview

Students wanting to attend this training course should already be familiar with CSS and HTML and are looking to expand their knowledge with the new CSS3 standard. CSS3 is rapidly being implemented into all well known browsers including Internet Explorer, Firefox, Safari and Google Chrome and will ultimately become the corner stone of all web development. Web designers can fast track their learning in this area by attending the CSS3 Essentials course.

Course Prerequisites

Students should have completed the CSS Essentials training course or have equivalent experience. Although it's not a requirement it is strongly recommended that participants have CSS and JavaScript experience prior to attending the CSS3 Essentials course.

Raising the Bar

1300 937 782

www.rtb.com.au

Introducing CSS3

What's New in CSS3
CSS3 Integration Overview
Using CSS3 For Your Website
Browser Support For CSS3
Web Browser Market Share
Progressive Enhancement Overview
Advantages of Progressive Enhancement
Benefits of Using CSS3
Reducing Maintenance and Development time
Increasing Page Performance
Better Search Engine Placement
Increasing Accessibility and Usability
A Case Study: Before and After CSS3 Implementation
Browser or Vendor Prefixes
Working with Non-compliant Browsers
IE Filtering Using Conditional Comments
Client Education With Progressive Enhancement
Managing The Client's Expectations

CSS3 Speech Bubbles

Managing Long Text
Graphic Effects With Sans Graphics
Rounding Corners
Adding the Bubble's Tail
Semitransparent Backgrounds Using RGBA or HSLA
Adding Image-free Gradients
Applying Image-free Drop Shadows
Applying Image-free Text Shadows
Transforming Content With Avatars
What are CSS3 Transforms?
Rotating An Avatar

CSS3 Notebook Paper

Beyond the Basic Background
Scaling the Background Image
Multiple Background Images for a Single Element
Applying a Graphic Border Image
Applying a Drop Shadow
Unique Font Embedding
Using @font-face to Embed Fonts
Choosing A Font
Converting Fonts

Styling Images and Links by Type

Understanding Attribute Selectors
Indicating File types with Dynamically Added Icons
Alternative Icon Ideas
Styling Full-size Photos and Thumbnails
Understanding the Troubles with Classes
Using Attribute Selectors to Target by Type

Using Pseudo-classes to Improve Efficiency

Target Specific Elements Without Using IDs or Classes
New Structural Pseudo-classes
Alternating Colors
Random Rotation of Images
Dynamically Highlighting Page Sections
The CSS3 :target Pseudo-class
Adding a Table of Contents
Changing Background Colour
Animating with Pure CSS

Different Design for Different Screen Sizes

Understanding Media Queries
Change Layout for Various Screen Sizes
Changing Horizontal Nav Bar to Vertical Menu
Text in Multi-columns
Change Layout for Small Screens
Change Layout for Mobile Devices
Understanding Device Width
Images on High-resolution Displays
Viewpoint Meta Tag
Working with Non-supporting Browsers

Flexing your Layouts

Create a Multi-column Layout Without Positioning and Floats
Making Block Content Flex
Working with Columns
Reordering Columns
Equal Height Columns
Horizontal and Vertical Centering
Create Flexible Form Layout
Static Footers
Flexible Box Model Alternatives
The CSS box-sizing Property
Future Layout Systems