You are on page 1of 494

Level 1 - Overview & Updates

TABLE OF CONTENTS

HTML5 Overview

CSS3 Overview

Updated HTML5 Elements

Existing HTML5 Tag Updates

LEVEL 1

TABLE OF CONTENTS

HTML5 Overview

CSS3 Overview

Updated HTML5 Elements

Existing HTML5 Tag Updates

LEVEL 1

HTML5 OVERVIEW
HTML5 is the new standard, which includes:

New HTML elements and attributes

Full CSS3 Support

Video and audio elements

2D/3D graphics

Local storage

Local SQL database

1.1 HTML5 OVERVIEW

HTML5 OVERVIEW
HTML5 is the new standard, which includes:

New HTML elements and attributes

Full CSS3 Support

Video and audio elements

2D/3D graphics

Local storage

Local SQL database

1.1 HTML5 OVERVIEW

TABLE OF CONTENTS

HTML5 Overview

CSS3 Overview

Updated HTML5 Elements

Existing HTML5 Tag Updates

LEVEL 1

TABLE OF CONTENTS

HTML5 Overview

CSS3 Overview

Updated HTML5 Elements

Existing HTML5 Tag Updates

LEVEL 1

CSS3 OVERVIEW

CSS3 is the latest


standard of CSS.

1.2 CSS3 OVERVIEW

CSS3 OVERVIEW
In this course, well cover:

Border radius

Box shadow, text shadow

Transitions, transforms

Gradients

Multiple backgrounds

Font face

1.2 CSS3 OVERVIEW

CSS3 OVERVIEW
In this course, well cover:

Border radius

Box shadow, text shadow

Transitions, transforms

Gradients

Multiple backgrounds

Font face

1.2 CSS3 OVERVIEW

TABLE OF CONTENTS

HTML5 Overview

CSS3 Overview

Updated HTML5 Elements

Existing HTML5 Tag Updates

LEVEL 1

TABLE OF CONTENTS

HTML5 Overview

CSS3 Overview

Updated HTML5 Elements

Existing HTML5 Tag Updates

LEVEL 1

UPDATED HTML5 ELEMENTS

Doctype

Meta declaration

Script tag

Link tag

1.3 UPDATED HTML5 ELEMENTS

DOCTYPE
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">

1.3 UPDATED HTML5 ELEMENTS

DOCTYPE
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">

HTML 4.01 Transitional


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">

1.3 UPDATED HTML5 ELEMENTS

DOCTYPE
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">

HTML 4.01 Transitional


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/
TR/html4/frameset.dtd">

1.3 UPDATED HTML5 ELEMENTS

DOCTYPE
The new HTML5 doctype:
<!DOCTYPE html>

1.3 UPDATED HTML5 ELEMENTS

DOCTYPE
The new HTML5 doctype:
<!DOCTYPE html>

1.3 UPDATED HTML5 ELEMENTS

META DECLARATION
The meta declaration in HTML4:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

1.3 UPDATED HTML5 ELEMENTS

META DECLARATION
The meta declaration in HTML4:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="UTF-8">

1.3 UPDATED HTML5 ELEMENTS

SCRIPT TAG
In HTML 4.01, we specify the type attribute as text/javascript:
<script type="text/javascript" src="file.js"></script>

1.3 UPDATED HTML5 ELEMENTS

SCRIPT TAG
In HTML 4.01, we specify the type attribute as text/javascript:
<script type="text/javascript" src="file.js"></script>

<script src="file.js"></script>

1.3 UPDATED HTML5 ELEMENTS

SCRIPT TAG
In HTML 4.01, we specify the type attribute as text/javascript:
<script type="text/javascript" src="file.js"></script>

<script src="file.js"></script>

1.3 UPDATED HTML5 ELEMENTS

LINK TAG
The link tag in HTML 4.01:
<link rel="stylesheet" type="text/css" href="file.css">

1.3 UPDATED HTML5 ELEMENTS

LINK TAG
The link tag in HTML 4.01:
<link rel="stylesheet" type="text/css" href="file.css">

<link rel="stylesheet" href="file.css">

1.3 UPDATED HTML5 ELEMENTS

TABLE OF CONTENTS

HTML5 Overview

CSS3 Overview

Updated HTML5 Elements

Existing HTML5 Tag Updates

LEVEL 1

TABLE OF CONTENTS

HTML5 Overview

CSS3 Overview

Updated HTML5 Elements

Existing HTML5 Tag Updates

LEVEL 1

EXISTING HTML5 TAG UPDATES


Traditionally presentational
tags, the i, b, em, and strong
tags have been given new
semantic meanings.
1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


In HTML4, the i and b tags were font style elements:

The i tag rendered an italic font style

The b tag rendered a bold font style

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


In HTML5, these tags have new meanings:

The i tag represents text in an alternate voice or mood

The b tag represents stylistically oset text

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


Some example uses for the i tag:

Taxonomic designation

Technical term

Idiomatic phrase from another language

Transliteration

A thought

Ship name in Western texts

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


Example usage of the i tag:
<p><i>I hope this works</i>, he thought.</p>

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


Example usage of the i tag:
<p><i>I hope this works</i>, he thought.</p>

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


Some example uses for the b tag:

Key words in a document abstract

Product names in a review

Actionable words in interactive text-driven software

Article lead

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


Example usage of the b tag:
<p><b class="lead">The event takes place this upcoming Saturday, and
over 3,000 people have already registered.</b></p>

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


Example usage of the b tag:
<p><b class="lead">The event takes place this upcoming Saturday, and
over 3,000 people have already registered.</b></p>

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


In HTML4:

The em tag meant emphasis

The strong tag meant strong emphasis

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


In HTML5, the em and strong tags have new meanings:

The em tag now means stress emphasis

The strong tag now means strong importance

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


Example usage of the em tag:
<p>Make sure to sign up <em>before</em> the day of the event, September
16, 2013.</p>

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


Example usage of the em tag:
<p>Make sure to sign up <em>before</em> the day of the event, September
16, 2013.</p>

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


Example usage of the strong tag:
<p>Make sure to sign up <em>before</em> the day of the event,
<strong>September 16, 2013</strong>.</p>

1.4 EXISTING HTML5 TAG UPDATES

EXISTING HTML5 TAG UPDATES


Example usage of the strong tag:
<p>Make sure to sign up <em>before</em> the day of the event,
<strong>September 16, 2013</strong>.</p>

1.4 EXISTING HTML5 TAG UPDATES

Level 2 - HTML5 Elements

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

SECTION

The section element represents a


generic document or application
section.
- W3C SPECIFICATION

2.1 SECTION

SECTION

The section element represents a


generic document or application
section.
- W3C SPECIFICATION

2.1 SECTION

SECTION VS. DIV


A div has no semantic meaning,
but the section element does.
Its used for grouping together
thematically related content.
2.1 SECTION

SECTION VS. DIV

You might want to replace some of


your div elements with section
elements, but remember to always
ask yourself, Is all of the content
related?
- JEREMY KEITH IN HTML5 FOR WEB DESIGNERS

2.1 SECTION

SECTION
Example usage of the section tag:
<div class="section">
<h2>The Gallery</h2>
<!-- ... -->
</div>

2.1 SECTION

SECTION
Example usage of the section tag:
<div class="section">
<h2>The Gallery</h2>
<!-- ... -->
</div>

<section>
<h2>The Gallery</h2>
<!-- ... -->
</section>

2.1 SECTION

THE DOCUMENT OUTLINE


The document outline
produces an outline summary
of an HTML document based
on how it is marked up.
2.1 SECTION

THE DOCUMENT OUTLINE


The following elements have their own self-contained outline:

Article

Aside

Nav

Section

2.1 SECTION

THE DOCUMENT OUTLINE


Take the following example:
<h1>This is the title of the page.</h1>
<section>
<h2>This is the title of a sub-section.</h2>
</section>

2.1 SECTION

THE DOCUMENT OUTLINE


Take the following example:
<h1>This is the title of the page.</h1>
<section>
<h2>This is the title of a sub-section.</h2>
</section>

1. This is the title of the page.


1.1 This is the title of a sub-section.

2.1 SECTION

THE DOCUMENT OUTLINE


Take the following example:
<h1>This is the title of the page.</h1>
<section>
<h1>This is the title of a sub-section.</h1>
Upcoming Section Title
</section>

2.1 SECTION

THE DOCUMENT OUTLINE


Take the following example:
<h1>This is the title of the page.</h1>
<section>
<h1>This is the title of a sub-section.</h1>
</section>

1. This is the title of the page.


1.1 This is the title of a sub-section.

2.1 SECTION

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

HEADER

A group of introductory
or navigational aids.
- W3C SPECIFICATION

2.2 HEADER

HEADER

There can be many dierent headers on a page

Usually appears at the top of a document or section, but


is defined by its content rather than its position

2.2 HEADER

HEADER
Example usage of the header tag:
<div class="header">
<!-- ... -->
</div>

2.2 HEADER

HEADER
Example usage of the header tag:
<div class="header">
<!-- ... -->
</div>

<header>
<!-- ... -->
</header>

2.2 HEADER

HEADER
Example usage of the header tag within a section:
<section>
<header>
<h1>The heading of the section</h1>
Upcoming Section Title
<p>This is content in the header.</p>
</header>
<p>This is some information within the section.</p>
</section>

2.2 HEADER

HEADER
Example usage of the header tag within a section:
<section>
<header>
<h1>The heading of the section</h1>
Upcoming Section Title
<p>This is content in the header.</p>
</header>
<p>This is some information within the section.</p>
</section>

2.2 HEADER

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

FOOTER

The footer element represents a


footer for its nearest ancestor
sectioning content or sectioning
root element.
- W3C SPECIFICATION

2.3 FOOTER

FOOTER
Like the header, the footer
element is not position-dependent.
It should describe the content it is
contained within.

2.3 FOOTER

FOOTER
Example usage of the footer tag:
<div class="footer">
<!-- ... -->
</div>

2.3 FOOTER

FOOTER
Example usage of the footer tag:
<div class="footer">
<!-- ... -->
</div>

<footer>
<!-- ... -->
</footer>

2.3 FOOTER

FOOTER
Example usage of the footer tag within a section tag:
<section>
<header>
<h1>The heading of the section</h1>
Upcoming Section Title
<p>This is content in the header.</p>
</header>
<p>This is some information within the section.</p>
<footer>
<p>By "Author Name"</p>
</footer>
</section>

2.3 FOOTER

FOOTER
Example usage of the footer tag within a section tag:
<section>
<header>
<h1>The heading of the section</h1>
Upcoming Section Title
<p>This is content in the header.</p>
</header>
<p>This is some information within the section.</p>
<footer>
<p>By "Author Name"</p>
</footer>
</section>

2.3 FOOTER

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 4

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 4

ASIDE
Initially, the HTML5 spec
defined the aside element as
being tangentially related to
the content surrounding it.
2.4 ASIDE

ASIDE
The aside now covers various contexts:

When used within an article element, the aside contents should


be related to that particular article it is contained within.

When used outside an article element, the aside contents


should be specifically related to the site.

2.4 ASIDE

ASIDE
The aside now covers various contexts:

When used within an article element, the aside contents should


be related to that particular article it is contained within.

When used outside an article element, the aside contents


should be specifically related to the site.

2.4 ASIDE

ASIDE
An aside element is appropriate
when it is used to represent content
that is not the primary focus of an
article or page, but it is still related
to the article or page.
2.4 ASIDE

ASIDE
Example usage of the aside tag:
<div class="sidebar">
<!-- ... -->
</div>

2.4 ASIDE

ASIDE
Example usage of the aside tag:
<div class="sidebar">
<!-- ... -->
</div>

<aside>
<!-- ... -->
</aside>

2.4 ASIDE

ASIDE
Example usage of the aside tag within a section:
<section>
<header>
<h1>The heading of the section</h1>
Upcoming
<p>This isSection
contentTitle
in the header.</p>
</header>
<p>This is some information within the section.</p>
<aside>
<p>Some secondary information.</p>
</aside>
<footer>
<p>By "Author Name"</p>
</footer>
</section>

2.4 ASIDE

ASIDE
Example usage of the aside tag within a section:
<section>
<header>
<h1>The heading of the section</h1>
<p>This is content in the header.</p>
</header>
<p>This is some information within the section.</p>
<aside>
<p>Some secondary information.</p>
</aside>
<footer>
<p>By "Author Name"</p>
</footer>
</section>

2.4 ASIDE

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

NAV

The nav element represents a


section of a page that links to
other pages or to parts within
the page: a section with
navigation links.
- W3C SPECIFICATION

2.5 NAV

NAV

The nav element is intended


for major navigation.

2.5 NAV

NAV
Example usage of the nav tag:
<ul class="nav">
<!-- ... -->
</ul>

2.5 NAV

NAV
Example usage of the nav tag:
<ul class="nav">
<!-- ... -->
</ul>

<nav>
<ul>
<!-- ... -->
</ul>
</nav>

2.5 NAV

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

ARTICLE

The article element represents a


complete, or self-contained, composition
in a document, page, application, or site
and that is, in principle, independently
distributable or reusable, e.g. in
syndication.
- W3C SPECIFICATION

2.6 ARTICLE

ARTICLE
The article element is another
type of section. It is used for
self-contained related content.

2.6 ARTICLE

ARTICLE
Determining if a particular piece of content is self-contained:

Ask yourself if you would


syndicate the content in
an RSS or Atom feed.

2.6 ARTICLE

ARTICLE
Some uses for the article tag:

A blog post

A news story

A comment on a post

A review

2.6 ARTICLE

ARTICLE
Example usage of the article tag:
<div class="article">
<!-- ... -->
</div>

2.6 ARTICLE

ARTICLE
Example usage of the article tag:
<div class="article">
<!-- ... -->
</div>

<article>
<!-- ... -->
</article>

2.6 ARTICLE

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

MAIN

The main element represents


the main content of the body
of a document or application.
- W3C SPECIFICATION

2.7 MAIN

MAIN

The main content area consists of


content that is directly related to or
expands upon the central topic of a
document or central functionality of
an application.
- W3C SPECIFICATION

2.7 MAIN

MAIN

Do not include more than one main element in a document

Do not include the main element inside of an article, aside,


footer, header, or nav element

2.7 MAIN

MAIN
Example usage of the main tag:
<div class="main">
<!-- ... -->
</div>

2.7 MAIN

MAIN
Example usage of the main tag:
<div class="main">
<!-- ... -->
</div>

<main>
<!-- ... -->
</main>

2.7 MAIN

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

FIGURE

The figure element represents a unit of


content, optionally with a caption, that is
self-contained, that is typically referenced
as a single unit from the main flow of the
document, and that can be moved away
from the main flow of the document
without aecting the documents meaning.
- W3C SPECIFICATION

2.8 FIGURE & FIGCAPTION

FIGURE
A common use of the figure tag is for an image within an article:
<figure>
<img src="image.jpg" alt="My Picture" />
</figure>

2.8 FIGURE & FIGCAPTION

FIGCAPTION

The figcaption element represents


a caption or legend for a figure.
- W3C SPECIFICATION

2.8 FIGURE & FIGCAPTION

FIGCAPTION
Example usage of the figcaption tag:
<figure>
<img src="image.jpg" alt="My Picture" />
<figcaption>This is a caption for the picture.</figcaption>
Upcoming Section Title
</figure>

2.8 FIGURE & FIGCAPTION

FIGCAPTION
Example usage of the figcaption tag:
<figure>
<img src="image.jpg" alt="My Picture" />
<figcaption>This is a caption for the picture.</figcaption>
Upcoming Section Title
</figure>

2.8 FIGURE & FIGCAPTION

FIGURE & FIGCAPTION


Example output of the figure and figcaption elements:

2.8 FIGURE & FIGCAPTION

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

TABLE OF CONTENTS

Section

Header

Footer

Aside

Nav

Article

Main

Figure/figcaption

Time

LEVEL 2

TIME

The time element represents


either a time on a 24 hour clock,
or a precise date in the proleptic
Gregorian calendar, optionally
with a time and a time-zone oset.
- W3C SPECIFICATION

2.8 TIME

TIME
Example usage of the time tag:
<time>2013-09-16</time>

2.8 TIME

TIME
Example usage of the time tag:
<time>2013-09-16</time>

We want the format mm/dd/yyyy:


<time>09/16/2013</time>

2.8 TIME

TIME
Example usage of the time tag:
<time>2013-09-16</time>

We use the datetime attribute to get our desired format:


<time datetime="2013-09-16">09/16/2013</time>

2.8 TIME

TIME
Example usage of the time tag:
<time>2013-09-16</time>

We use the datetime attribute to get our desired format:


<time datetime="2013-09-16">09/16/2013</time>

2.8 TIME

TIME
Without the datetime attribute,
content must be a valid date,
time, or precise datetime.

2.8 TIME

Level 3 - HTML5 Forms

TABLE OF CONTENTS

New input types

New form elements

New form attributes

LEVEL 3

TABLE OF CONTENTS

New input types

New form elements

New form attributes

LEVEL 3

NEW INPUT TYPES


HTML5 provides several new input types:

Search

Month

Email

Week

URL

Time

Tel

Datetime

Number

Datetime-local

Range

Color

Date

3.1 NEW INPUT TYPES

NEW INPUT TYPES


If a browser doesnt
support the input type,
it defaults to text.

3.1 NEW INPUT TYPES

SEARCH

The input element with a type


attribute whose value is "search"
represents a one-line plain-text
edit control for entering one or
more search terms.
- W3C SPECIFICATION

3.1 NEW INPUT TYPES

SEARCH
Example usage of the search input type:
<input type="text" />

3.1 NEW INPUT TYPES

SEARCH
Example usage of the search input type:
<input type="text" />

<input type="search" />

3.1 NEW INPUT TYPES

SEARCH
Example output of the search input type:

Google Chrome 29

3.1 NEW INPUT TYPES

SEARCH
Mobile Safari keyboard with the search input type:

3.1 NEW INPUT TYPES

SEARCH
Mobile Safari keyboard with the search input type:

3.1 NEW INPUT TYPES

EMAIL
The email input looks just
like a regular text input,
but with added usability
on mobile devices.
3.1 NEW INPUT TYPES

EMAIL
Example usage of the email input type:
<input type="text" />

3.1 NEW INPUT TYPES

EMAIL
Example usage of the email input type:
<input type="text" />

<input type="email" />

3.1 NEW INPUT TYPES

EMAIL
Mobile Safari keyboard with the email input type:

3.1 NEW INPUT TYPES

EMAIL
Mobile Safari keyboard with the email input type:

3.1 NEW INPUT TYPES

URL
The url input looks just like
a regular text input, but with
added usability on mobile
devices.
3.1 NEW INPUT TYPES

URL
Mobile Safari keyboard with the url input type:

3.1 NEW INPUT TYPES

URL
Mobile Safari keyboard with the url input type:

3.1 NEW INPUT TYPES

DATE

The input element with a type


attribute whose value is "date"
represents a control for setting
the elements value to a string
representing a date.
- W3C SPECIFICATION

3.1 NEW INPUT TYPES

DATE
Example usage of the date input type:
<input type="text" />

3.1 NEW INPUT TYPES

DATE
Example usage of the date input type:
<input type="text" />

<input type="date" />

3.1 NEW INPUT TYPES

DATE
Output of the date input type:

Google Chrome 29

3.1 NEW INPUT TYPES

DATE
Mobile Safari keyboard with the date input type:

3.1 NEW INPUT TYPES

TEL
Again, the tel input looks
just like a regular text
input, but with added
usability on mobile devices.
3.1 NEW INPUT TYPES

TEL
Example usage of the tel input type:
<input type="text" />

3.1 NEW INPUT TYPES

TEL
Example usage of the tel input type:
<input type="text" />

<input type="tel" />

3.1 NEW INPUT TYPES

TEL
Mobile Safari keyboard with the tel input type:

3.1 NEW INPUT TYPES

NUMBER

The input element with a type


attribute whose value is "number"
represents a precise control for
setting the elements value to a
string representing a number.
- W3C SPECIFICATION

3.1 NEW INPUT TYPES

NUMBER
Example usage of the number input type:
<input type="text" />

3.1 NEW INPUT TYPES

NUMBER
Example usage of the number input type:
<input type="text" />

<input type="number" />

3.1 NEW INPUT TYPES

NUMBER
Output of the number input type:

Google Chrome 29

3.1 NEW INPUT TYPES

NUMBER
Mobile Safari keyboard with the number input type:

3.1 NEW INPUT TYPES

NUMBER
Mobile Safari keyboard with the number input type:

3.1 NEW INPUT TYPES

RANGE

The input element with a type


attribute whose value is "range"
represents an imprecise control
for setting the elements value to
a string representing a number.
- W3C SPECIFICATION

3.1 NEW INPUT TYPES

RANGE
Example usage of the range input type:
<input type="text" />

3.1 NEW INPUT TYPES

RANGE
Example usage of the range input type:
<input type="text" />

<input type="range" />

3.1 NEW INPUT TYPES

RANGE
Output of the range input type:

Google Chrome 29

3.1 NEW INPUT TYPES

MONTH, WEEK
Example usage of the month, week input types:
<input type="month" />

<input type="week" />

3.1 NEW INPUT TYPES

MONTH, WEEK
Output of the month, week input types:

Google Chrome 29

3.1 NEW INPUT TYPES

TIME, DATETIME-LOCAL
Example usage of the time, datetime-local input types:
<input type="time" />

<input type="datetime-local" />

3.1 NEW INPUT TYPES

TIME, DATETIME-LOCAL
Output of the time, datetime-local input type:

Google Chrome 29

3.1 NEW INPUT TYPES

DATETIME-LOCAL VS. DATETIME

The input element with a type attribute


whose value is "datetime-local"
represents a control for setting the
elements value to a string
representing a local date and time
(with no timezone information).
- W3C SPECIFICATION

3.1 NEW INPUT TYPES

COLOR

The input element with a type


attribute whose value is "color"
represents a color-well control, for
setting the elements value to a
string representing a simple color.
- W3C SPECIFICATION

3.1 NEW INPUT TYPES

COLOR
Example usage of the color input type:
<input type="color" />

3.1 NEW INPUT TYPES

COLOR
Example output of the color input type:

Google Chrome 29

3.1 NEW INPUT TYPES

TABLE OF CONTENTS

New input types

New form elements

New form attributes

LEVEL 3

TABLE OF CONTENTS

New input types

New form elements

New form attributes

LEVEL 3

NEW FORM ELEMENTS


HTML5 provides new form elements:

Datalist

Keygen

Output

3.2 NEW FORM ELEMENTS

NEW FORM ELEMENTS


HTML5 provides new form elements:

Datalist

Keygen

Output

3.2 NEW FORM ELEMENTS

DATALIST

The datalist element represents


a set of option elements that
represent predefined options
for other controls.
- W3C SPECIFICATION

3.1 NEW INPUT TYPES

DATALIST
Example usage of the datalist form element:
<input type="text" list="browsers" />

3.2 NEW FORM ELEMENTS

DATALIST
Example usage of the datalist form element:
<input type="text" list="browsers" />
<datalist id="browsers">

</datalist>

3.2 NEW FORM ELEMENTS

DATALIST
Example usage of the datalist form element:
<input type="text" list="browsers" />
<datalist id="browsers">

</datalist>

3.2 NEW FORM ELEMENTS

DATALIST
Example usage of the datalist form element:
<input type="text" list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>

3.2 NEW FORM ELEMENTS

DATALIST
Example usage of the datalist form element:
<input type="text" list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>

3.2 NEW FORM ELEMENTS

DATALIST
Example output of the datalist form element:

Google Chrome 29

3.2 NEW FORM ELEMENTS

TABLE OF CONTENTS

New input types

New form elements

New form attributes

LEVEL 3

TABLE OF CONTENTS

New input types

New form elements

New form attributes

LEVEL 3

NEW FORM ATTRIBUTES


HTML5 provides several new form attributes:

Placeholder

novalidate

Autofocus

formnovalidate

Autocomplete

form

Required

formaction

Pattern

formenctype

List

formmethod

Multiple

formtarget

3.3 NEW FORM ATTRIBUTES

NEW FORM ATTRIBUTES


HTML5 provides several new form attributes:

Placeholder

novalidate

Autofocus

formnovalidate

Autocomplete

form

Required

formaction

Pattern

formenctype

List

formmethod

Multiple

formtarget

3.3 NEW FORM ATTRIBUTES

PLACEHOLDER
The placeholder attribute allows
you to specify a message that is
shown inside the input, hidden
when the user starts typing, and
then returns when focus is lost on
the input (when the input is blank).
3.3 NEW FORM ATTRIBUTES

PLACEHOLDER
Example usage of the placeholder attribute:
<input type="text" value="Enter your email..." />

3.3 NEW FORM ATTRIBUTES

PLACEHOLDER
Example usage of the placeholder attribute:
<input type="text" value="Enter your email..." />

<input type="text" placeholder="Enter your email..." />

3.3 NEW FORM ATTRIBUTES

PLACEHOLDER
Example of the placeholder attribute:

Google Chrome 29

3.3 NEW FORM ATTRIBUTES

AUTOFOCUS
The autofocus attribute
will automatically focus
the specified input when
the page is rendered.
3.3 NEW FORM ATTRIBUTES

AUTOFOCUS
Example usage of the autofocus attribute:
<input type="text" autofocus />

3.3 NEW FORM ATTRIBUTES

AUTOFOCUS
Example output of the autofocus attribute:

Google Chrome 29

3.3 NEW FORM ATTRIBUTES

AUTOFOCUS
Example output of the autofocus attribute:

Google Chrome 29

3.3 NEW FORM ATTRIBUTES

REQUIRED
If you add the new HTML5
required attribute to an input,
when the form is submitted,
the user will be notified of an
error if the field is left blank.
3.3 NEW FORM ATTRIBUTES

REQUIRED
Example usage of the required attribute:
<input type="text" required />

3.3 NEW FORM ATTRIBUTES

REQUIRED
Example of the required attribute:

Google Chrome 29

3.3 NEW FORM ATTRIBUTES

PATTERN
The pattern attribute accepts a
JavaScript regular expression
that can be used to validate a
form field to match the pattern.
3.3 NEW FORM ATTRIBUTES

PATTERN
Example usage of the pattern attribute:
<input type="text" pattern="[0-9]{3}" />

3.3 NEW FORM ATTRIBUTES

PATTERN
Example usage of the pattern attribute:
<input type="text" pattern="[0-9]{3}" />

3.3 NEW FORM ATTRIBUTES

PATTERN
Example usage of the pattern attribute:

Google Chrome 29

3.3 NEW FORM ATTRIBUTES

Level 4 - CSS3 Styles

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

BORDER RADIUS
The border-radius
property applies rounded
corners to borders.

4.1 BORDER RADIUS

BORDER RADIUS
The base .box element well be working with:
.box {
background: grey;
height: 50px;
width: 200px;
}

4.1 BORDER RADIUS

BORDER RADIUS
The base .box element well be working with:
.box {
background: grey;
height: 50px;
width: 200px;
}

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
.box {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
.box {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
.box {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 15px;
}

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 15px;
}

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 4px 15px 12px 10px;
}

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 4px 15px 12px 10px;
}

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 4px 15px 12px 10px;
}

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
border-radius: <top left> <top right> <bottom right> <bottom left>

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
border-radius: <top left> <top right> <bottom right> <bottom left>

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
border-radius: <top left> <top right> <bottom right> <bottom left>

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
border-radius: <top left> <top right> <bottom right> <bottom left>

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
border-radius: <top left> <top right> <bottom right> <bottom left>

4.1 BORDER RADIUS

BORDER RADIUS
You can also specify
the border-radius
value in percentages.

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 50%;
}

4.1 BORDER RADIUS

BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 50%;
}

4.1 BORDER RADIUS

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

BOX SHADOW
The box-shadow property
specifies a shadow on an
element.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

If it is not specified (which is the


default), a drop shadow is created,
rather than an inset shadow.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

If it is not specified (which is the


default), a drop shadow is created,
rather than an inset shadow.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

The shadow
oset x value.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

The shadow
oset y value.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

The blur-radius alters the blur


amount of the shadow, causing it
to become bigger and lighter
(with a larger value).

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

The spread-radius causes


the shadow to expand or
shrink.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

The color of
the shadow.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}

No inset value is specified,


so this is a drop shadow.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}

A 1px oset-x value.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}

A 2px oset-y value.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}

A 2px blur-radius.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}

No spread-radius value is
specified, so the drop shadow
is the same size as the element.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}

The drop shadow


color is black.

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}

4.2 BOX SHADOW

BOX SHADOW
What if we wanted the
blur-radius value to instead
be the spread-radius?

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: 1px 2px 2px #000;

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: 1px 2px 0 2px #000;

4.2 BOX SHADOW

BOX SHADOW
Example usage of the box-shadow property:
box-shadow: 1px 2px 0 2px #000;

4.2 BOX SHADOW

BOX SHADOW
Example of the blur-radius and spread-radius properties:

blur-radius

4.2 BOX SHADOW

spread-radius

BOX SHADOW
You can specify multiple box-shadows via a comma-separated list:
.box {
box-shadow:
1px 1px 2px #000,
}

4.2 BOX SHADOW

BOX SHADOW
You can specify multiple box-shadows via a comma-separated list:
.box {
box-shadow:
1px 1px 2px #000,
}

4.2 BOX SHADOW

BOX SHADOW
You can specify multiple box-shadows via a comma-separated list:
.box {
box-shadow:
1px 1px 2px #000,
inset 1px 1px 2px blue;
}

4.2 BOX SHADOW

BOX SHADOW
You can specify multiple box-shadows via a comma-separated list:
.box {
box-shadow:
1px 1px 2px #000,
inset 1px 1px 2px blue;
}

4.2 BOX SHADOW

BOX SHADOW
You can specify multiple box-shadows via a comma-separated list:
.box {
box-shadow:
1px 1px 2px #000,
inset 1px 1px 2px blue;
}

4.2 BOX SHADOW

BOX SHADOW
You can also specify negative values:
.box {
box-shadow: -1px -2px 2px #000;
}

4.2 BOX SHADOW

BOX SHADOW
You can also specify negative values:
.box {
box-shadow: -1px -2px 2px #000;
}

4.2 BOX SHADOW

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

TEXT SHADOW
The text-shadow property is
very similar to box-shadow,
but it applies the shadow to
text, as the name implies.
4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
<h1>I have a shadow!</h1>

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>

The shadow
oset x value.

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>

The shadow
oset y value.

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>

The blur-radius alters the blur


amount of the shadow, causing
it to become bigger and lighter
(with a larger value).

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>

The color of
the shadow.

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}

A 1px oset-x value.

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}

A 2px oset-y value.

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}

A 2px blur-radius.

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}

The drop shadow


color is black.

4.3 TEXT SHADOW

TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}

4.3 TEXT SHADOW

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

BOX SIZING
The box-sizing property is used to
change the default CSS box model,
which is used to calculate widths
and heights of given elements.

4.4 BOX SIZING

BOX MODEL REFRESHER

The CSS box model references the design and layout


of given HTML elements

Each HTML element is a box, which consists of margins,


borders, padding, and the content of the element

The box model refers to how those properties are


calculated in conjunction with one another in order to set
the elements dimensions

4.4 BOX SIZING

BOX MODEL REFRESHER


The content of the box is where the actual content,
the text and images, is located:

CONTENT

4.4 BOX SIZING

BOX MODEL REFRESHER


The padding clears the area around the content:

PADDING

CONTENT

4.4 BOX SIZING

BOX MODEL REFRESHER


The border goes around the padding and content:

BORDER
PADDING

CONTENT

4.4 BOX SIZING

BOX MODEL REFRESHER


The margin clears the area around the border:

MARGIN
BORDER
PADDING

CONTENT

4.4 BOX SIZING

BOX MODEL REFRESHER


Calculating the width of the .box:
.box {
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}

4.4 BOX SIZING

BOX MODEL REFRESHER


Calculating the width of the .box:
.box { width: 300px; }

300px

4.4 BOX SIZING

BOX MODEL REFRESHER


Calculating the width of the .box:
.box { padding: 10px; }

300px
10px

4.4 BOX SIZING

10px

10px

10px

BOX MODEL REFRESHER


Calculating the width of the .box:
.box { padding: 10px; }

20px

300px

4.4 BOX SIZING

BOX MODEL REFRESHER


Calculating the width of the .box:
.box { border: 2px solid black; }

2px

300px

2px

4.4 BOX SIZING

2px

2px

20px

BOX MODEL REFRESHER


Calculating the width of the .box:
.box { border: 2px solid black; }

4px
20px

300px

4.4 BOX SIZING

BOX MODEL REFRESHER


Calculating the width of the .box:
.box { margin: 20px; }

20px
4px

300px

20px

4.4 BOX SIZING

20px

20px

20px

BOX MODEL REFRESHER


Calculating the width of the .box:
.box { margin: 20px; }

40px
4px
20px

300px

4.4 BOX SIZING

BOX MODEL REFRESHER


Calculating the width of the .box:
.box { margin: 20px; }

40px
4px
20px

300px

4.4 BOX SIZING

BOX MODEL REFRESHER


Calculating the width of the .box:
.box { margin: 20px; }

40px
4px
20px

300px

4.4 BOX SIZING

BOX MODEL REFRESHER


Calculating the width of the .box:
300 + 20 + 4 = 324px
40px
4px
20px

300px

4.4 BOX SIZING

BOX SIZING
The box-sizing property is used to
change the default CSS box model,
which is used to calculate widths
and heights of given elements.

4.4 BOX SIZING

BOX SIZING
There are three dierent values for box-sizing:

content-box

padding-box

border-box

4.4 BOX SIZING

CONTENT-BOX
This is the default value. The
width and height are measured by
including only the content, but not
the border, margin, or padding.
4.4 BOX SIZING

PADDING-BOX
The width and height include
the padding, but do not
include the border or margin.

4.4 BOX SIZING

PADDING-BOX
Calculating the width of the .box:
.box {
box-sizing: padding-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}

4.4 BOX SIZING

PADDING-BOX
Calculating the width of the .box:
.box {
box-sizing: padding-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}

4.4 BOX SIZING

MARGIN
BORDER
PADDING

CONTENT

PADDING-BOX
Calculating the width of the .box:
.box {
box-sizing: padding-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}

4.4 BOX SIZING

304px

BORDER-BOX
The width and height
include the padding and
border, but not the margin.

4.4 BOX SIZING

BORDER-BOX
Calculating the width of the .box:
.box {
box-sizing: border-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}

4.4 BOX SIZING

BORDER-BOX
Calculating the width of the .box:
.box {
box-sizing: border-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}

4.4 BOX SIZING

MARGIN
BORDER
PADDING

CONTENT

BORDER-BOX
Calculating the width of the .box:
.box {
box-sizing: border-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}

4.4 BOX SIZING

300px

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

MULTIPLE BACKGROUNDS
CSS3 allows you to apply
multiple backgrounds to an
element. They are stacked in the
order in which you specify them.
4.5 MULTIPLE BACKGROUNDS

MULTIPLE BACKGROUNDS
First, specify your background-images in a comma-delimited list:
.element {
background-image: url(bg1.png), url(bg2.png);

4.5 MULTIPLE BACKGROUNDS

MULTIPLE BACKGROUNDS
Then specify the background-position for each, in order:
.element {
background-image: url(bg1.png), url(bg2.png);
background-position: top left, center right;
}

4.5 MULTIPLE BACKGROUNDS

MULTIPLE BACKGROUNDS
Finally, specify the background-repeat for each:
.element {
background-image: url(bg1.png), url(bg2.png);
background-position: top left, center right;
background-repeat: no-repeat, no-repeat;
}

4.5 MULTIPLE BACKGROUNDS

MULTIPLE BACKGROUNDS

4.5 MULTIPLE BACKGROUNDS

MULTIPLE BACKGROUNDS

4.5 MULTIPLE BACKGROUNDS

MULTIPLE BACKGROUNDS
You can also use the shorthand background:
.element {
background:
url(bg1.png) top left no-repeat,
}

4.5 MULTIPLE BACKGROUNDS

MULTIPLE BACKGROUNDS
You can also use the shorthand background:
.element {
background:
url(bg1.png) top left no-repeat,
url(bg2.png) center right no-repeat;
}

4.5 MULTIPLE BACKGROUNDS

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

COLOR
CSS3 provides multiple ways to work with color:

RGBa

HSLa

4.6 COLOR

RGBa
RGB represents the three additive
primary colors, red, green, and blue.
In CSS3, we can also pass the alpha
value (the a in RGBa), which
represents the opacity of a color.
4.6 COLOR

RGBa
Example usage of rgba:
.element {
color: rgba(0, 0, 0, 0.75);
}

4.6 COLOR

RGBa
Example usage of rgba:
.element {
color: rgba(0, 0, 0, 0.75);
}

4.6 COLOR

RGBa
Example usage of rgba:
.element {
color: rgba(0, 0, 0, 0.75);
}

4.6 COLOR

RGBa
Example usage of rgba:
.element {
color: rgba(0, 0, 0, 0.75);
}

4.6 COLOR

HSLa
CSS3 also adds HSLa (Hue,
Saturation, Lightness). In addition to
providing the hue, saturation, and
lightness values, you can specify the
alpha value for the opacity of the color.
4.6 COLOR

HSLa
Example usage of hsla:
.element {
color: hsla(240, 100%, 50%, 0.75);
}

4.6 COLOR

HSLa
Example usage of hsla:
.element {
color: hsla(240, 100%, 50%, 0.75);
}

The hue value.

4.6 COLOR

HSLa
Example usage of hsla:
.element {
color: hsla(240, 100%, 50%, 0.75);
}

The saturation value.

4.6 COLOR

HSLa
Example usage of hsla:
.element {
color: hsla(240, 100%, 50%, 0.75);
}

The lightness value.

4.6 COLOR

HSLa
Example usage of hsla:
.element {
color: hsla(240, 100%, 50%, 0.75);
}

The alpha value.

4.6 COLOR

HSLa + RGBa
HSLa is more intuitive
than RGBa, and its much
easier to make color
adjustments on the fly.
4.6 COLOR

HSLa + RGBa
HSLa is more intuitive
than RGBa, and its much
easier to make color
adjustments on the fly.
4.6 COLOR

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

OPACITY
CSS3 allows you to specify
the opacity of an element
using the opacity property.

4.7 OPACITY

OPACITY
Example usage of the opacity property:
.element {
opacity: 0.45;
}

4.7 OPACITY

OPACITY
Example usage of the opacity property:
.element {
opacity: 0.45;
}

4.7 OPACITY

OPACITY
Example output of the opacity property:

4.7 OPACITY

OPACITY
Example output of the opacity property:

4.7 OPACITY

OPACITY
Opacity on an element
aects all elements that
are nested inside.

4.7 OPACITY

OPACITY
Example of the opacity property with nested elements:
<div class="element">
<h2>Hello.</h2>
</div>
.element {
background: url(bg.jpg) center no-repeat;
opacity: 0.45;
}

4.7 OPACITY

OPACITY
Example output of the opacity property with nested elements:

Hello.

4.7 OPACITY

OPACITY
Example output of the opacity property with nested elements:

Hello.

4.7 OPACITY

OPACITY
Example output of the opacity property with nested elements:

Hello.

4.7 OPACITY

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

TABLE OF CONTENTS

Border Radius

Box Shadow

Text Shadow

Box Sizing

Multiple Backgrounds

Color

Opacity

Gradients

LEVEL 4

GRADIENTS
CSS3 provides the ability
to create gradients, smooth
transitions between two or
more colors.
4.8 GRADIENTS

GRADIENTS
There are two types of gradients that browsers support:

Linear gradients

Radial gradients

4.8 GRADIENTS

LINEAR GRADIENT
To create a linear gradient, we
need to specify the starting
point, the ending point, and
optional stop-color points.
4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
.element {
background: linear-gradient(to bottom, red, yellow);
}

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
.element {
background: linear-gradient(to bottom, red, yellow);
}

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
linear-gradient(<angle> to <side-or-corner>, <color-stop>s)

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
linear-gradient(<angle> to <side-or-corner>, <color-stop>s)

We can specify the


direction through an
angle or a keyword.

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
linear-gradient(<angle> to <side-or-corner>, <color-stop>s)

The angle is generally


a degree (e.g. 45deg).

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
linear-gradient(<angle> to <side-or-corner>, <color-stop>s)

The side-or-corner
consists of two keywords:
Horizontal: left or right
Vertical: top or bottom

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
linear-gradient(<angle> to <side-or-corner>, <color-stop>s)

The color-stops consists of a


color and an optional stop
position, which can be either
a percentage or length.

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
.element {
background: linear-gradient(to bottom, red, yellow);
}

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
.element {
background: linear-gradient(to bottom, red, yellow);
}

No angle is specified.

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
.element {
background: linear-gradient(to bottom, red, yellow);
}

The side-or-corner is
bottom, which makes
the gradient go from
the top to the bottom.

4.8 GRADIENTS

LINEAR GRADIENT
KEYWORDS

Example usage of a linear-gradient:

to top
0deg
to bottom
180deg
The side-or-angle is 270deg
to right
bottom, which makes
the gradient go from
to left
the top to the bottom.90deg

.element {
background: linear-gradient(to bottom, red, yellow);
}

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
.element {
background: linear-gradient(to bottom, red, yellow);
}

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
.element {
background: linear-gradient(to bottom, red, yellow);
}

0deg

90deg

4.8 GRADIENTS

270deg

180deg

LINEAR GRADIENT
Example usage of a linear-gradient:
.element {
background: linear-gradient(to bottom, red, yellow);
}

The top of the


gradient starts at red.

4.8 GRADIENTS

LINEAR GRADIENT
Example usage of a linear-gradient:
.element {
background: linear-gradient(to bottom, red, yellow);
}

The gradient ends at


yellow at the bottom.

4.8 GRADIENTS

RADIAL GRADIENT
A radial gradient, unlike a linear
gradient, creates a gradient that
extends from an origin, the center
of the element, extending outward
in a circular or elliptical shape.
4.8 GRADIENTS

RADIAL GRADIENT
A radial-gradient consists of:

The center

The ending shape contour and position

Color stops

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient in its simplest form:
.element {
background:
radial-gradient(aqua, blue);
}

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient in its simplest form:
.element {
background:
radial-gradient(aqua, blue);
}

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient in its simplest form:
.element {
background:
radial-gradient(aqua, blue);
}

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
radial-gradient(<shape> <size> at <position>, <color-stop>s)

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
radial-gradient(<shape> <size> at <position>, <color-stop>s)

Specify the shape or size


of the gradient.

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
radial-gradient(<shape> <size> at <position>, <color-stop>s)

The shape of the gradient;


circle or ellipse. The
default is ellipse.

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
radial-gradient(<shape> <size> at <position>, <color-stop>s)

The size of the gradient,


which consist of keywords.

4.8 GRADIENTS

RADIAL GRADIENT
KEYWORDS

Example usage of a radial-gradient:

closest-side
closest-corner
?
The size of the gradient,
which consist of keywords.
farthest-side
farthest-corner

radial-gradient(<shape> <size> at <position>, <color-stop>s)

4.8 GRADIENTS

RADIAL GRADIENT
KEYWORDS

Example usage of a radial-gradient:

closest-side
closest-corner
?
The size of the gradient,
which consist of keywords.
farthest-side
farthest-corner

radial-gradient(<shape> <size> at <position>, <color-stop>s)

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
radial-gradient(<shape> <size> at <position>, <color-stop>s)

The size can also be a


length or percentage.

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
radial-gradient(<shape> <size> at <position>, <color-stop>s)

Same as backgroundposition. Default is center.

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
radial-gradient(<shape> <size> at <position>, <color-stop>s)

The color-stops consists of


a color and an optional
stop position, which can
be either a percentage or
length.

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
.element {
background: radial-gradient(circle at top left, aqua, blue);
}

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
.element {
! background: radial-gradient(circle at top left, aqua, blue);
}

The shape of the


gradient is circle,
rather than ellipse.

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
.element {
background: radial-gradient(circle at top left, aqua, blue);
}

The position of the


gradient is top left.

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
.element {
background: radial-gradient(circle at top left, aqua, blue);
}

The first color-stop


is aqua.

4.8 GRADIENTS

RADIAL GRADIENT
Example usage of a radial-gradient:
.element {
background: radial-gradient(circle at top left, aqua, blue);
}

The last color-stop


is blue.

4.8 GRADIENTS

RADIAL GRADIENT
Example output of the radial-gradient:

4.8 GRADIENTS

Level 5 - Fonts & Interactions

TABLE OF CONTENTS

Font Face

Transforms

Transitions

Progressive Enhancement

LEVEL 5

TABLE OF CONTENTS

Font Face

Transforms

Transitions

Progressive Enhancement

LEVEL 5

FONT FACE
Using @font-face, we
have the ability to provide
online fonts for use on
our websites.
5.1 FONT FACE

FONT FACE
Example usage of @font-face:
@font-face {

5.1 FONT FACE

FONT FACE
We specify the font-family, which is what well use to call the font:
@font-face {
font-family: 'OpenSansRegular';

5.1 FONT FACE

FONT FACE
We add the location of the font files through the src property:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansRegular-webfont.eot');

5.1 FONT FACE

FONT FACE
We add the location of the font files through the src property:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansRegular-webfont.eot');

5.1 FONT FACE

FONT FACE
We specify the font-style:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansRegular-webfont.eot');
font-style: normal;
}

5.1 FONT FACE

FONT FACE
We specify the font-weight:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansRegular-webfont.eot');
font-style: normal;
font-weight: normal;
}

5.1 FONT FACE

FONT FACE
Using @font-face in our stylesheet:
h1 {
font-family: 'OpenSansRegular';
}

5.1 FONT FACE

FONT FACE
Using @font-face in our stylesheet:
h1 {
font-family: 'OpenSansRegular';
}

5.1 FONT FACE

FONT FACE
With @font-face fonts,
just like any other font
declaration, well want
to add fallback fonts.
5.1 FONT FACE

FONT FACE
Using @font-face in our stylesheet with fallbacks:
h1 {
font-family: 'OpenSansRegular', Helvetica, Arial, sans-serif;
}

5.1 FONT FACE

FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansBold';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}

5.1 FONT FACE

FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansBold';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}

5.1 FONT FACE

FONT FACE
Using varying weights with @font-face:
h1 {
font-family: 'OpenSansBold';
}

5.1 FONT FACE

FONT FACE
We can alter the @fontface call in order to use
the font-weight and fontstyle properties as usual.
5.1 FONT FACE

FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansBold';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}

5.1 FONT FACE

FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}

5.1 FONT FACE

FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}

5.1 FONT FACE

FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: bold;
}

5.1 FONT FACE

FONT FACE
Using varying weights with @font-face:
h1 {
font-weight: bold;
}

5.1 FONT FACE

TABLE OF CONTENTS

Font Face

Transforms

Transitions

Progressive Enhancement

LEVEL 5

TABLE OF CONTENTS

Font Face

Transforms

Transitions

Progressive Enhancement

LEVEL 5

TRANSFORM
Using the transform
property in CSS3, we can
translate, rotate, scale,
and skew elements in CSS.
5.2 TRANSFORMS

TRANSLATE
You can create a 2D translation using transform:
.element {
transform: translate(20px, 30px);
}

5.2 TRANSFORMS

TRANSLATE
You can create a 2D translation using transform:
.element {
transform: translate(20px, 30px);
}

5.2 TRANSFORMS

TRANSLATE
You can create a 2D translation using transform:
.element {
transform: translate(20px, 30px);
}

5.2 TRANSFORMS

TRANSLATE
Example output of the transform translate:

5.3 TRANSITIONS

TRANSLATE
Example usage of a 2D translation using transform:
translate(<tx>, <ty>)

5.2 TRANSFORMS

TRANSLATE
Example usage of a 2D translation using transform:
translate(<tx>, <ty>)

A <transition-value>
for the x-axis, which
can be either a length
or percentage.

5.2 TRANSFORMS

TRANSLATE
Example usage of a 2D translation using transform:
translate(<tx>, <ty>)

A <transition-value> for the


y-axis, which can be either
a length or percentage. If
not specified, the value is 0.

5.2 TRANSFORMS

TRANSLATE
You can use translateX and translateY to translate the x and y values individually:
.element {
transform: translateX(20px);
}
.element {
transform: translateY(30px);
}

5.2 TRANSFORMS

TRANSLATE
You can use translateX and translateY to translate the x and y values individually:
translateX(<tx>)

translateY(<ty>)

5.2 TRANSFORMS

ROTATE
With rotate, you can rotate an
element clockwise around its
origin by the specified angle.

5.2 TRANSFORMS

ROTATE
Example usage of rotate:
.element {
transform: rotate(45deg);
}

5.2 TRANSFORMS

ROTATE
Example usage of rotate:
.element {
transform: rotate(45deg);
}

5.2 TRANSFORMS

ROTATE
Example output of the transform rotate:

5.3 TRANSITIONS

SCALE
With scale, you can do a 2D scale by a specified unitless number:
.element {
transform: scale(1.2);
}

5.2 TRANSFORMS

SCALE
With scale, you can do a 2D scale by a specified unitless number:
.element {
transform: scale(1.2);
}

5.2 TRANSFORMS

SCALE
Example output of the transform scale:

5.3 TRANSITIONS

SCALE
Exampled usage of scale:
scale(<sx>, <sy>)

5.2 TRANSFORMS

SCALE
Exampled usage of scale:
scale(<sx>, <sy>)

A unitless number
for the x-axis.

5.2 TRANSFORMS

SCALE
Exampled usage of scale:
scale(<sx>, <sy>)

A unitless number for the


y-axis. If not specified, it
defaults to the value of
<sx>.

5.2 TRANSFORMS

SCALE
You can use scaleX and scaleY to translate the x and y values individually:
.element {
transform: scaleX(1.2);
}
.element {
transform: scaleY(0.3);
}

5.2 TRANSFORMS

SCALE
You can use scaleX and scaleY to scale the x and y values individually:
scaleX(<sx>)

scaleY(<sy>)

5.2 TRANSFORMS

SKEW
With skew, an element is
skewed around the x or y
axis by the angle specified.

5.2 TRANSFORMS

SKEW
Example usage of skewX:
.element {
transform: skewX(-25deg);
}

5.2 TRANSFORMS

SKEW
Example usage of skewX:
.element {
transform: skewX(-25deg);
}

5.2 TRANSFORMS

SKEW
Example output of the transform skewX:

5.3 TRANSITIONS

SKEW
Example usage of skewX:
skewX(<ax>)

5.2 TRANSFORMS

SKEW
Example usage of skewX:
skewX(<ax>)

An <angle>
for the x-axis.

5.2 TRANSFORMS

SKEW
Example usage of skewY:
skewY(<ay>)

5.2 TRANSFORMS

SKEW
Example usage of skewY:
skewY(<ay>)

An <angle>
for the y-axis.

5.2 TRANSFORMS

SKEW
Example usage of skewX and skewY:
.element {
transform: skewX(25deg);
}
.element {
transform: skewY(-85deg);
}

5.2 TRANSFORMS

SKEW
Example output of the transform skewX and skewY:

5.3 TRANSITIONS

TABLE OF CONTENTS

Font Face

Transforms

Transitions

Progressive Enhancement

LEVEL 5

TABLE OF CONTENTS

Font Face

Transforms

Transitions

Progressive Enhancement

LEVEL 5

TRANSITION
CSS3 provides transitions,
which allow you to transition
between two states of a
specified element.
5.3 TRANSITIONS

TRANSITION
Example usage of transition:
.element {
background-color: black;
}

5.3 TRANSITIONS

TRANSITION
Example usage of transition:
.element {
background-color: black;
}

.element:hover {
background-color: blue;
}

5.3 TRANSITIONS

TRANSITION
Example usage of transition:
.element {
background-color: black;
transition: background-color 0.2s ease-in-out;
}

.element:hover {
background-color: blue;
}

5.3 TRANSITIONS

TRANSITION
Example usage of transition:
.element {
background-color: black;
transition: background-color 0.2s ease-in-out;
}

.element:hover {
background-color: blue;
}

5.3 TRANSITIONS

TRANSITION
Example output of the transition:

5.3 TRANSITIONS

TRANSITION
Example usage of the shorthand transition property:
transition: <property> <duration> <timing-function> <delay>

5.3 TRANSITIONS

TRANSITION
Example usage of the shorthand transition property:
transition: <property> <duration> <timing-function> <delay>

The CSS property you


want to transition.

5.3 TRANSITIONS

TRANSITION
Example usage of the shorthand transition property:
transition: <property> <duration> <timing-function> <delay>

The duration of the


transition. The default
value is 0s, or 0 seconds.

5.3 TRANSITIONS

TRANSITION
Example usage of the shorthand transition property:
transition: <property> <duration> <timing-function> <delay>

The timing of the


transition itself.

5.3 TRANSITIONS

TRANSITION
Example usage of the shorthand transition property:

TIMING-FUNCTIONS

transition: <property> <duration> <timing-function> <delay>

5.3 TRANSITIONS

ease

ease-in

ease-in-out

linear

cubic-bezier
?

step-start
The timing
of the
transition
itself.

step-end

steps()

TRANSITION
Example usage of the shorthand transition property:
transition: <property> <duration> <timing-function> <delay>

The amount of time to wait


between the change that is
being requested on a specific
property, and the start of the
transition.

5.3 TRANSITIONS

TRANSITION
You can set the transition values individually, as well:
.element {

5.3 TRANSITIONS

TRANSITION
You can set the transition values individually, as well:
.element {
transition-property: background-color;

5.3 TRANSITIONS

TRANSITION
You can set the transition values individually, as well:
.element {
transition-property: background-color;
transition-duration: 0.2s;

5.3 TRANSITIONS

TRANSITION
You can set the transition values individually, as well:
.element {
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}

5.3 TRANSITIONS

TRANSITION
You can set the transition values individually, as well:
.element {
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;
}

5.3 TRANSITIONS

TRANSITION
Using all as the transitionproperty, we can transition
multiple properties at once.

5.3 TRANSITIONS

TRANSITION
Example usage of transition using the all property:
.element {
background-color: black;
color: white;
}

.element:hover {
background-color: grey;
color: black;
}

5.3 TRANSITIONS

TRANSITION
Example usage of transition using the all property:
.element {
background-color: black;
color: white;
transition: all 0.2s ease-in-out;
}

.element:hover {
background-color: grey;
color: black;
}

5.3 TRANSITIONS

TRANSITION
Example usage of transition using the all property:
.element {
background-color: black;
color: white;
transition: all 0.2s ease-in-out;
}

.element:hover {
background-color: grey;
color: black;
}

5.3 TRANSITIONS

TRANSITION
Example output of the transition using the all property:

5.3 TRANSITIONS

TABLE OF CONTENTS

Font Face

Transforms

Transitions

Progressive Enhancement

LEVEL 5

TABLE OF CONTENTS

Font Face

Transforms

Transitions

Progressive Enhancement

LEVEL 5

PROGRESSIVE ENHANCEMENT
The term progressive enhancement
refers to the use of newer features
that add to the experience in modern
browsers that support those
features, but doesnt detract from
the experience in older browsers.

5.4 PROGRESSIVE ENHANCEMENT

PROGRESSIVE ENHANCEMENT
Example of progressive enhancement:
.element {
background: #ccc;
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

5.4 PROGRESSIVE ENHANCEMENT

PROGRESSIVE ENHANCEMENT
Example of progressive enhancement:
.element {
background: #ccc;
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

5.4 PROGRESSIVE ENHANCEMENT

PROGRESSIVE ENHANCEMENT
Example of progressive enhancement:
.element {
background: #ccc;
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

5.4 PROGRESSIVE ENHANCEMENT

PROGRESSIVE ENHANCEMENT
Example of progressive enhancement:
.element {
background: #ccc;
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

5.4 PROGRESSIVE ENHANCEMENT

You might also like