CSS3

CSS3 Logo


 

Class Outline

  1. The Power of CSS
    1. Webucator  Free Comprehensive Tutorial Courses
      1. Webucator CSS Tutorial
      2. Webucator Advanced CSS Tutorial
    2. Doing More with Less
      1. Magic of CSS — Adam Schwartz
      2. CSS Links
      3. CSS Tools: Reset CSS
        1. CSS Reset Examples
        2. 2016’s most popular CSS Reset scripts, all in one place
      4. Google Web Fonts
    3. A First Example
      1. index.html
    4. Challenges
    5. Next Up
  2. Introducing CSS3
    1. What is CSS3?
      1. Web Style Sheets home page
      2. Cascading Style Sheets home page
    2. The History of CSS
      1. Cascading HTML style sheets -- a proposal  10 Oct 1994
      2. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
      3. CSS - Current Work
      4. What’s new in CSS3?  (note comment:bloat)
      5. Understanding the CSS Specifications
    3. Browser Support
      1. Browse Happy
      2. CanIUse
        1. CSS3 selectors  
      3. Find Me By IP: CSS 
      4. QuirksMode.org - CSS
        1. CSS contents and browser compatibility (older)
        2. CSS contents and browser compatibility - mobile
      5. :select[ivizr]
      6. An Introduction to CSS’s @supports Rule (Feature Queries)
        1. CSS Conditional Rules Module Level 3
      7. IETester
      8. Outdated Browser
    4. HTML5
      1. Introduction to <HTML5>
      2. HTML5 Digital Classroom
      3. HTML5Shiv
      4. HTML5 Shiv  (Wikipedia)
      5. The Story of the HTML5 Shiv
      6. Best Practices with using CSS3 in your HTML5 web pages
    5. Exercise 1 Using Selectivizr and HTML5Shiv
      1. selectivizr  Exercise
      2. selectivizr  Solution
      3. MooTools
      4. MooTools  (Wikipedia)
  3. Selectors and :Pseudo Classes and ::Pseudo Elements
    1. Selectutorial - CSS selectors
    2. Selector Resources
      1. Difference between a pseudo-class and a pseudo-element
    3. Selectors that People Actually Use (February 2008 )
    4. The Current Generation of CSS3 Selectors  (January 29, 2014)
    5. The Future Generation of CSS Selectors: Level 4
    6. Semantic CSS With Intelligent Selectors
    7. What is the difference between a pseudo-class and a pseudo-element in CSS?
    8. Attribute Selectors
      1. attributeselectors
    9. Exercise 2 Styling a Document Using Attribute Selectors
      1. attributeselectors  Exercise
      2. attributeselectors  Solution
    10. The Target Pseudo-Class
      1. targetselector
    11. Exercise 3 Using CSS3 Target
      1. targetselector  Exercise
      2. targetselector  Solution
    12. UI Element States Pseudo-Classes
      1. attribute-state-pseudo-classes
    13. Exercise 4 Using CSS3 Attribute-State Pseudo-Class
      1. attribute-state-pseudo-classes  Exercise
      2. attribute-state-pseudo-classes  Solution
    14. Negation Pseudo-Class
      1. negation
    15. Structural Pseudo-Classes
      1. structural-pseudo-classes
    16. Exercise 5 Using the Structural Attribute Pseudo-Classes
      1. structural-pseudo-classes    Exercise
      2. structural-pseudo-classes    Solution
    17. nth-child
      1. Mastering the :nth-child
      2. structural-pseudo-classes-nth
      3. Nth-Child Selector: Alternating Table Row Colors
    18. Exercise 6 Using nth-of-type Pseudo-Class
      1. structural-pseudo-classes-nth   Exercise
      2. structural-pseudo-classes-nth    Solution
      3. structural-pseudo-classes-nth-challenge   Exercise
      4. structural-pseudo-classes-nth-challenge  Solution
    19. Other
  4. Fonts and Text Effects
    1. Fonts on the Web
      1. The Elements of Typographic Style Applied to the Web
    2. Font Services
      1. Google Web Fonts
      2. google
      3. FreeFontConverter.com
      4. Adobe Edge Web Fonts
        1. Select Edge Web Fonts
        2. Why can protocol be omitted from absolute paths on a webpage?
        3. Can I change all my http:// links to just //?
        4. Cons and Pros of Protocol-Less-Urls “//site.org” vs “http://www.site.org”
      5. Adobe Typekit
      6. adobe-edge
    3. Exercise 7 Using Font Services
      1. font   Exercise
      2. font  Solution
    4. The @font-face Rule
      1. The @font-face rule   w3.org
      2. @font-face  Mozilla Developer Network
      3. CSS3 @font-face Rule   W3schools
      4. Quick guide to webfonts via @font-face
      5. <Webtype>
      6. Fontspring
      7. Font Squirrel
      8. WebFont Loader
      9. CSS Fonts Module Level 3
      10. WhatTheFont
      11. font-face 
    5. Exercise 8 Using @font-face
      1. font-face  Exercise
      2. font-face  Solution
    6. Text Shadow
      1. Text Shadow  (David's)
      2. CSS3 Text Shadow Generator
      3. Creating Four Very Cool Text Effects Using the CSS Text Shadow Property
    7. Word Wrapping
      1. text-shadow-word-wrap
      2. CSS Fragmentation Module Level 3
    8. Exercise 9 Text  Shadow and Word Wrap
      1. text-shadow-word-wrap   Exercise
      2. text-shadow-word-wrap  Solution
  1. Colors, Gradients, Background Images, and Masks
    1. Color
      1. 147 Colors | CSS Color Names   grid
      2. CSS Color Module Level 3
        1. 4.2.4. HSL color values
        2. 4.2.4.1. HSL examples
      3. HSLA Color Picker / RGBA Converter
      4. hsl-alpha
      5. More CSS3 Styles: buttons and gradients
      6. CSS Gradients   Demo
      7. Introduction to gradients
      8. Ultimate CSS Gradient Generator
      9. Flags with CSS3 Gradients
    2. The Opacity Property
      1. 3.2. Transparency: the ‘opacity’ property
      2. opacity
    3. Exercise 10 Using HLS & Opacity
      1. index   Exercise
        1. WorkWithColor.com
          1. Color Converter
      2. index  Solution
    4. Backgrounds
      1. CSS3 background-clip Property
      2. 3.7. Painting Area: the ‘background-clip’ property
    5. background-origin, and background-size
      1. 3.8. Positioning Area: the ‘background-origin’ property
      2. CSS3: background-origin and background-clip
      3. 3.9. Sizing Images: the ‘background-size’ property
      4. background-clip-origin-size 
    6. Exercise 11  Multiple Background Images with background-clip, Background-origin, and background-size
      1. index   Exercise
      2. index   Solution
  2. Borders and Box Effects
    1. Image Borders
      1. Border Images
      2. border-image-generator
      3. border-image
    2. Exercise 12 Image Borders
      1. index   Exercise
      2. index  Solution
    3. Rounded Corners
      1. 5. Rounded Corners  Curve Radii: the ‘border-radius’ properties
      2. CSS border radius generator
      3. CSS3 Border Radius Generator
      4. rounded-corners
    4. Box Shadow
      1. CSS3 box-shadow Property    playit demo
      2. CSS3 Box Shadow Generator
      3. box-shadow
      4. Text Bubble
      5. Balloon.css
      6. Pure CSS speech bubbles   demo
      7. CSS speech bubble generator
    5. Exercise 13 Rounded Corners & Box Shadow
      1. index   Exercise
      2. index  Solution
  3. Transitions, Transforms, and Animations
    1. Transitions and Transforms
      1. CSS3 transition-timing-function
      2. Easing Functions Cheat Sheet
      3. Robert Penner's easing demo
      4. 8 simple CSS3 transitions that will wow your users
      5. transform - CSS | MDN
      6. Using CSS3 for transitions in web applications
      7. Create a CSS Flipping Animation   Demo
      8. How to Create the Perfect Image Crossfade with CSS3 Transitions
      9. transitions
    2. Exercise 14 Transitions
      1. transitions   Exercise
      2. transitions  Solution
    3. Transitions
      1. transforms2d
      2. Using CSS to Make a Visually Consistent Cross-browser HTML5 Progress Bar
    4. Exercise 15 A Bar Graph
      1. transforms2d   Exercise
      2. transforms2d   Solution
      1. transforms3d
      2. Create a CSS Cube
      3. Minimal HTML 3D Cube  with CSS
      4. CSS only spinning cube
    5. Exercise 16 A 3D Cube
      1. transforms3d
      2. transforms3d
    6. Animations
      1. CSS3 Animations
      2. CSS3 @keyframes Rule
      3. CSS3 Animation Properties
        1. animation-delay
        2. animation-direction
        3. animation-duration
        4. animation-fill-mode
        5. animation-iteration-count
        6. animation-name
        7. animation-play-state
        8. animation-timing-function
      4. Multiple Background CSS Animations
      5. CSS vs. JS Animation: Which is Faster?
      6. Myth Busting: CSS Animations vs. JavaScript
      7. CSS Homer, animated
  4. Layout: Columns and Flexible Box
    1. CSS Positioned Layout Module Level 3
      1. Managing Content position for your content in HTML5 applications
    2. Layout: Columns and Flexible Box
      1. CSS Multi-column Layout Module
      2. CanIUse: CSS3 Multiple column layout
      3. columns
    3. Exercise 17 Columns
      1. index   Exercise
      2. index    Solution
    4. Flexible Box Model
      1. CSS Flexible Box Layout Module
      2. “Old” Flexbox and “New” Flexbox
      3. A Complete Guide to Flexbox
      4. flexbox in 5 minutes
      5. CanIUse: Flexible Box Layout Module
      6. flex
      7. W3Schools CSS flex Property examples:
        1. flex-flow example 1
        2. justify-content  example 2
        3. flex-direction example 3
        4. flex-wrap example 4, 5
        5. CSS order Property example 6
        6. CSS flex Property example 7, 8
          1. flex-grow
          2. flex-shrink
          3. flex-basis
    5. Exercise 18 Flexible Box Layout
      1. index   Exercise
      2. index   Solution
  5. Vendor Prefixes
    1. What Are Vendor Prefixes?
      1. CSS Vendor Prefixes
        1. Known prefixes
    2. Maybe They Ain't So Bad
      1. Prefix or Posthack
      2. CSS vendor prefixes considered harmful
    3. Strategies
      1. CSSPlease!
      2. Prefixr
      3. Alternatives to Prefixr
      4. Express Prefixr
      5. CSSPrefixer 
      6. -prefix-free
        1. prefixfree
      7. Pleeease: a CSS post-processor
      8. Burbon
      9. index
    4. Exercise 19 CSSPrefixer
      1. CSSPrefixer
  6. Embedding Media
    1. video
    2. Big Buck Bunny   Download
    3. Video for Everybody!
    4. How to Use HTML 5 to Display Video in Modern Browsers
    5. Video Formats
      1. Browser Support for Video Codecs and Containers
    6. Styling Video
      1. videotransform
      2. HTML5 <track> example
    7. Exercise 20 Styling Video
      1. video  Exercise
      2. video   Solution
  7. Accessibility Features
    1. Web Accessibility
      1. dhark.com: Web Accessibility and Section 508
    2. The CSS3 Speech Module
      1. CSS Speech Module
      2. The Voice Browser Working Group
      3. CSS Aural Reference
      4. A Look Into Speech Support in CSS3 
      5. EPUB 3 Accessibility Guidelines
      6. NeoSpeech Text-to-Speech voices Interactive TTS Demo
  8. Media Queries
    1. Media Queries (examples)
    2. Respond to Different Devices With CSS3 Media Queries
    3. Targeting Specific Devices in your Style Sheets
    4. Targeting styles with media queries
    5. CSS Animations Between Media Queries    Demo
    6. Targeting Widths and Devices with CSS3 Media Queries
      1. linearize
    7. Responsive Images and the Viewport Metatag
      1. A tale of two viewports — part one - QuirksMode
      2. A tale of two viewports — part two - QuirksMode
      3. A pixel is not a pixel is not a pixel
      4. The Mobile Viewport and Orientation
      5. Configure the Viewport
      6. Viewport Sizes
      7. screensiz.es
      8. max-width
    8. Exercise 21 Responsive Design
      1. index  Exercise
      2. index   Solution
  9. Implementing CSS3 in the "Real World"
    1. Stuff That Ain't (Strictly) CSS, but Sure Is Useful
    2. jQuery
      1. index
    • jQuery  A fast, small, and feature-rich JavaScript library
      • jQuery UI   User interface interactions, effects, widgets, and themes 
      • jQuery Mobile    Touch-Optimized Web Framework for Smartphones & Tablets
      • Sizzle   JavaScript Selector Library
      • QUnit  A JavaScript Unit Testing framework
      • Zepto.js: the aerogel-weight jQuery-compatible JavaScript library
    1. Learning Center
    2. Tutorials:Getting Started with jQuery
    3. jQuery Tutorial   W3Schools
    4. jQuery Quick API Reference  
    5. JavaScript Style Guide
    6. How to create an animated sticky header, with CSS3 and jQuery
    7. GSAP: Professional-Grade HTML5 Animation
    8. Exercise 22 Using jQuiry to Toggle Classes
      1. index  Exercise
      2. index   Solution
    9. HTML5
      1. HTML5 Digital Classroom
      2. Introduction to HTML5
    10. Modernizr:
      1. index
      2. What is a polyfill? 
      3. HTML5 Cross Browser Polyfills
      4. Modernizr
        1. Download Modernizr
        2. haz.io
      5. CSS3PIE
    11. Exercise 23 Modernizr
        1. index  Exercise
        2. index  Solution
    12. Preprocessors
      1. index
      2. SASS: Syntactically Awesome Stylesheets
        1. Burbon
        2. Compass
        3. Susy
      3. How To Use Sass Variables
      4. Less: The dynamic stylesheet language
      5. RubyInstaller
    13. Exercise 24 Sass
      1. index  Exercise
      2. index  Solution
    14. Frameworks and Grid Systems
      1. index
      2. Foundation
        1. The Grid
      3. Bootstrap
      4. Foundation: a Compelling Alternative to Bootstrap
      5. Beyond Bootstrap and Foundation: Frameworks You’ve Never Heard Of
      6. Top 10 Responsive CSS Frameworks
      7. Top 10 Front-End Development Frameworks     Part 2
      8. CSS Front-end Frameworks with comparison
    15. Exercise 25 Using Foundation
      1. index  Exercise
      2. index  Solution
  10. Going Forward/Additional Resources
    1. What's Next?
    2. Online Resources
      1. Cascading Style Sheets home page
      2. Understanding the CSS Specifications
      3. How to Read W3C Specs
      4. Web Design References CSS
      5. Cascading Style Sheetsarticles and tutorials
      6. The Results of The Ultimate CSS Survey
      7. www-style@w3.org Mail Archives
      8. W3C CSS Validator
      9. Can I Use...
      10. Eric Meyer: CSS Work
      11. Cascading Style SheetsOfficial W3C Test Suites
    3. Get Involved
      1. CSS Media Queries Implementation Report
    4. Exercise 25 Testing CSS
      1. CSS Media Queries Implementation Report
    5. public-css-testsuite@w3.org Mail Archives
    6.  CSS Working Group Wiki » Testing
    7. More:
      1. Introducing the CSS coding style guide  18f
        1. CSS coding styleguide
      2. Mobile HTML5 Using the latest today
      3. The Book of CSS3    A Developer's Guide to the Future of Web Design
        1. Examples & Support
      4. The Modern Web
      5. Code Generation Tools:
      6. CSS Specificity  from  standardista.com
        1. Specifishity PDF
    8. Other
      1. Majority Of Digital Media Consumption Now Takes Place In Mobile Apps
      2. Our Story in 2 minutes/Notre Histoire en 2 minutes
      3. Things You Cannot Unsee (And What That Says About Your Brain)
      4. A Sound You Can't Unhear (And What It Says About Your Brain)
      5. HTML Periodic Tables
        1. Periodic Table of the Elements - Josh Duck
        2. Periodic table of HTML 5 elements
        3. HTML5 Periodical Table
      6. CSS Calculator  (Firefox 4 and IE 9 only)
        1. About
        2. the CSS function calc()
      7. a11y.css
      8. Learn how to use CSS3 Filters

Webucator