Course Summary
CSS3 covers the new features in Level 3 of the W3C CSS specification,
from currently well-supported visual effects to the most cutting-edge
animation techniques. It is intended for developers who are already
familiar with CSS.Duration
2 days.
Objectives
You will learn how to implement the newest CSS3 techniques in your web
applications, and gain an understanding of the browser support in
different modules.
Audience
Knowledge of Basic CSS functionality.
Instructors
Robyn Overstreet is a web developer and teacher who specializes in PHP. She is a Zend Certified Engineer who also works in Javascript, AJAX, and Actionscript. Robyn designs and builds custom content management systems, in addition to developing with the open-source content management systems WordPress and Drupal.
Robyn teaches web development in many different contexts, from corporate trainings to community groups, to one-on-one tutoring.
She holds a Master’s degree from New York University’s Interactive Telecommunications Program, where she built interactive art pieces with everything from microcontrollers to cardboard.
Robyn is a displaced New Yorker living pretty comfortably in San Francisco. When she's not coding, she's making collages or jewelry, riding her bike, or cooking something in season. More about Robyn Overstreet...
Robyn teaches web development in many different contexts, from corporate trainings to community groups, to one-on-one tutoring.
She holds a Master’s degree from New York University’s Interactive Telecommunications Program, where she built interactive art pieces with everything from microcontrollers to cardboard.
Robyn is a displaced New Yorker living pretty comfortably in San Francisco. When she's not coding, she's making collages or jewelry, riding her bike, or cooking something in season. More about Robyn Overstreet...
Outline
Introduction
- What's new about CSS3
- CSS3 Modularity
CSS Review
- Units in CSS
- CSS Selectors
- Positioning
Advanced Selectors
- Resolving Specificity
- Pseudo-classes
- :target
- :lang
- UI element state pseudo-classes :enabled, :checked, etc
- Structural pseudo-classes
- :first-child, :last-child, :nth-child, :nth-of-type, etc
- :not
- Pseudo-elements
- :first-line
- :first-letter
- CSS Generated Content with :before and :after
- Combinators
- Descendant combinator
- Child combinators
- Sibling combinators
- Attribute Selectors
- Value selectors
- Substring selectors
- The @.. Rules
CSS3 Browser Compatibility
- Browser-specific properties
- What's supported where
New Visual Effects in CSS3
- Rounded Corners
- Color and Opacity: RGBA
- Text and Box Shadows
- Gradients
Advanced Visual Effects
- Border Image
- Multiple Backgrounds
- Reflection
- Masks
Layout
- Multi-column Layout
- Text overflow ellipsis
Web Fonts
- @font-face
- Copyright and open source fonts
- Font services and APIs
2D Transformations
- scale
- translate
- skew
- rotate
- matrix
Animation
- Transitions
- Keyframes
- Triggering Animation
