CSS3 Essentials Course

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