HTML5 and CSS3
Zoie Barrett and Brian Lam
Agenda
- HTML5
- Video
- Highlights
- What's new
- CSS3
- What is it
- Cool features
- Gradients
- Text
- Transformation
- Examples
Why discuss HTML5 first?
- HTML - markup language for structuring and presenting content for the Web; a core technology of the Internet
- Cascading Style Sheets - style sheet language for describing the look and formatting of a document written in a markup language
Highlights
- Moving away from relying on plugins
- Many videos on the internet relied on Flash Player
- Apple/iOS doesn't support Flash
- Adobe discontinued development of mobile Flash on Nov 2011
What's new in HTML5
What's new continued:
Semantic Elements:
- Non-semantic - tells nothing about its content
- Semantic - clearly defines content
Doctype declaration:
- <!DOCTYPE html>
HTML5 New Input Types:
-
Color
-
Date
-
Email
-
Range
-
URL
-
and more
CSS3
- The latest standard for CSS
- Completely backwards compatible with earlier versions of CSS
- Work on CSS3 started around the time of publication of CSS2
- Earliest draft published in 1999
Gradients
- Allow for displaying of two or more colors
- In the past images were used
- Looks better now since gradients are generated in browser
- Two types:
- Linear gradient
- Radial gradient
Text Effects
- Text-shadow
- Word-wrap
- Ability to use non "web-safe" fonts
2D Transformation
- Allows user to move, scale, turn, spin, and stretch elements
- Methods:
- translate()
- rotate()
- scale()
- skew()
- matrix()
- combines all 2D transforms into one
3D Transformation
- Allows user to format elements in 3D manner
- Methods:
- rotateX()
- rotateY()
- Difference between 2D and 3D transform
Other New Items
CSS3 now allows for:
- Multiple Columns
- Transitions
- Animations
Examples
HTML5
CSS3
This presentation created with Reveal.js
HTML5 and CSS3
By Brian Lam