Professional Documents
Culture Documents
TABLE OF CONTENTS
HTML5 Overview
CSS3 Overview
LEVEL 1
TABLE OF CONTENTS
HTML5 Overview
CSS3 Overview
LEVEL 1
HTML5 OVERVIEW
HTML5 is the new standard, which includes:
2D/3D graphics
Local storage
HTML5 OVERVIEW
HTML5 is the new standard, which includes:
2D/3D graphics
Local storage
TABLE OF CONTENTS
HTML5 Overview
CSS3 Overview
LEVEL 1
TABLE OF CONTENTS
HTML5 Overview
CSS3 Overview
LEVEL 1
CSS3 OVERVIEW
CSS3 OVERVIEW
In this course, well cover:
Border radius
Transitions, transforms
Gradients
Multiple backgrounds
Font face
CSS3 OVERVIEW
In this course, well cover:
Border radius
Transitions, transforms
Gradients
Multiple backgrounds
Font face
TABLE OF CONTENTS
HTML5 Overview
CSS3 Overview
LEVEL 1
TABLE OF CONTENTS
HTML5 Overview
CSS3 Overview
LEVEL 1
Doctype
Meta declaration
Script tag
Link tag
DOCTYPE
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
DOCTYPE
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
DOCTYPE
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
DOCTYPE
The new HTML5 doctype:
<!DOCTYPE html>
DOCTYPE
The new HTML5 doctype:
<!DOCTYPE html>
META DECLARATION
The meta declaration in HTML4:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
META DECLARATION
The meta declaration in HTML4:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
SCRIPT TAG
In HTML 4.01, we specify the type attribute as text/javascript:
<script type="text/javascript" src="file.js"></script>
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>
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>
LINK TAG
The link tag in HTML 4.01:
<link rel="stylesheet" type="text/css" href="file.css">
LINK TAG
The link tag in HTML 4.01:
<link rel="stylesheet" type="text/css" href="file.css">
TABLE OF CONTENTS
HTML5 Overview
CSS3 Overview
LEVEL 1
TABLE OF CONTENTS
HTML5 Overview
CSS3 Overview
LEVEL 1
Taxonomic designation
Technical term
Transliteration
A thought
Article lead
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
2.1 SECTION
SECTION
2.1 SECTION
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
Article
Aside
Nav
Section
2.1 SECTION
2.1 SECTION
2.1 SECTION
2.1 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
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
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:
2.4 ASIDE
ASIDE
The aside now covers various contexts:
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
2.5 NAV
NAV
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
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:
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
2.7 MAIN
MAIN
2.7 MAIN
MAIN
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
FIGURE
A common use of the figure tag is for an image within an article:
<figure>
<img src="image.jpg" alt="My Picture" />
</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>
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>
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
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>
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>
2.8 TIME
TIME
Without the datetime attribute,
content must be a valid date,
time, or precise datetime.
2.8 TIME
TABLE OF CONTENTS
LEVEL 3
TABLE OF CONTENTS
LEVEL 3
Search
Month
Week
URL
Time
Tel
Datetime
Number
Datetime-local
Range
Color
Date
SEARCH
SEARCH
Example usage of the search input type:
<input type="text" />
SEARCH
Example usage of the search input type:
<input type="text" />
SEARCH
Example output of the search input type:
Google Chrome 29
SEARCH
Mobile Safari keyboard with the search input type:
SEARCH
Mobile Safari keyboard with the search input type:
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" />
EMAIL
Example usage of the email input type:
<input type="text" />
EMAIL
Mobile Safari keyboard with the email input type:
EMAIL
Mobile Safari keyboard with the email input type:
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:
URL
Mobile Safari keyboard with the url input type:
DATE
DATE
Example usage of the date input type:
<input type="text" />
DATE
Example usage of the date input type:
<input type="text" />
DATE
Output of the date input type:
Google Chrome 29
DATE
Mobile Safari keyboard with the date input type:
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" />
TEL
Example usage of the tel input type:
<input type="text" />
TEL
Mobile Safari keyboard with the tel input type:
NUMBER
NUMBER
Example usage of the number input type:
<input type="text" />
NUMBER
Example usage of the number input type:
<input type="text" />
NUMBER
Output of the number input type:
Google Chrome 29
NUMBER
Mobile Safari keyboard with the number input type:
NUMBER
Mobile Safari keyboard with the number input type:
RANGE
RANGE
Example usage of the range input type:
<input type="text" />
RANGE
Example usage of the range input type:
<input type="text" />
RANGE
Output of the range input type:
Google Chrome 29
MONTH, WEEK
Example usage of the month, week input types:
<input type="month" />
MONTH, WEEK
Output of the month, week input types:
Google Chrome 29
TIME, DATETIME-LOCAL
Example usage of the time, datetime-local input types:
<input type="time" />
TIME, DATETIME-LOCAL
Output of the time, datetime-local input type:
Google Chrome 29
COLOR
COLOR
Example usage of the color input type:
<input type="color" />
COLOR
Example output of the color input type:
Google Chrome 29
TABLE OF CONTENTS
LEVEL 3
TABLE OF CONTENTS
LEVEL 3
Datalist
Keygen
Output
Datalist
Keygen
Output
DATALIST
DATALIST
Example usage of the datalist form element:
<input type="text" list="browsers" />
DATALIST
Example usage of the datalist form element:
<input type="text" list="browsers" />
<datalist id="browsers">
</datalist>
DATALIST
Example usage of the datalist form element:
<input type="text" list="browsers" />
<datalist id="browsers">
</datalist>
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>
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>
DATALIST
Example output of the datalist form element:
Google Chrome 29
TABLE OF CONTENTS
LEVEL 3
TABLE OF CONTENTS
LEVEL 3
Placeholder
novalidate
Autofocus
formnovalidate
Autocomplete
form
Required
formaction
Pattern
formenctype
List
formmethod
Multiple
formtarget
Placeholder
novalidate
Autofocus
formnovalidate
Autocomplete
form
Required
formaction
Pattern
formenctype
List
formmethod
Multiple
formtarget
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..." />
PLACEHOLDER
Example usage of the placeholder attribute:
<input type="text" value="Enter your email..." />
PLACEHOLDER
Example of the placeholder attribute:
Google Chrome 29
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 />
AUTOFOCUS
Example output of the autofocus attribute:
Google Chrome 29
AUTOFOCUS
Example output of the autofocus attribute:
Google Chrome 29
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 />
REQUIRED
Example of the required attribute:
Google Chrome 29
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}" />
PATTERN
Example usage of the pattern attribute:
<input type="text" pattern="[0-9]{3}" />
PATTERN
Example usage of the pattern attribute:
Google Chrome 29
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.
BORDER RADIUS
The base .box element well be working with:
.box {
background: grey;
height: 50px;
width: 200px;
}
BORDER RADIUS
The base .box element well be working with:
.box {
background: grey;
height: 50px;
width: 200px;
}
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;
}
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;
}
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;
}
BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 15px;
}
BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 15px;
}
BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 4px 15px 12px 10px;
}
BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 4px 15px 12px 10px;
}
BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 4px 15px 12px 10px;
}
BORDER RADIUS
Example usage of the border-radius property:
border-radius: <top left> <top right> <bottom right> <bottom left>
BORDER RADIUS
Example usage of the border-radius property:
border-radius: <top left> <top right> <bottom right> <bottom left>
BORDER RADIUS
Example usage of the border-radius property:
border-radius: <top left> <top right> <bottom right> <bottom left>
BORDER RADIUS
Example usage of the border-radius property:
border-radius: <top left> <top right> <bottom right> <bottom left>
BORDER RADIUS
Example usage of the border-radius property:
border-radius: <top left> <top right> <bottom right> <bottom left>
BORDER RADIUS
You can also specify
the border-radius
value in percentages.
BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 50%;
}
BORDER RADIUS
Example usage of the border-radius property:
.box {
border-radius: 50%;
}
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.
BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}
BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}
BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
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.
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.
BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
BOX SHADOW
Example usage of the box-shadow property:
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
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.
BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}
BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}
BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}
BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}
BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}
A 2px blur-radius.
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.
BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}
BOX SHADOW
Example usage of the box-shadow property:
.box {
box-shadow: 1px 2px 2px #000;
}
BOX SHADOW
What if we wanted the
blur-radius value to instead
be the spread-radius?
BOX SHADOW
Example usage of the box-shadow property:
box-shadow: 1px 2px 2px #000;
BOX SHADOW
Example usage of the box-shadow property:
box-shadow: 1px 2px 0 2px #000;
BOX SHADOW
Example usage of the box-shadow property:
box-shadow: 1px 2px 0 2px #000;
BOX SHADOW
Example of the blur-radius and spread-radius properties:
blur-radius
spread-radius
BOX SHADOW
You can specify multiple box-shadows via a comma-separated list:
.box {
box-shadow:
1px 1px 2px #000,
}
BOX SHADOW
You can specify multiple box-shadows via a comma-separated list:
.box {
box-shadow:
1px 1px 2px #000,
}
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;
}
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;
}
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;
}
BOX SHADOW
You can also specify negative values:
.box {
box-shadow: -1px -2px 2px #000;
}
BOX SHADOW
You can also specify negative values:
.box {
box-shadow: -1px -2px 2px #000;
}
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>
TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}
TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}
TEXT SHADOW
Example usage of the text-shadow property:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>
TEXT SHADOW
Example usage of the text-shadow property:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>
The shadow
oset x value.
TEXT SHADOW
Example usage of the text-shadow property:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>
The shadow
oset y value.
TEXT SHADOW
Example usage of the text-shadow property:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>
TEXT SHADOW
Example usage of the text-shadow property:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>
The color of
the shadow.
TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}
TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}
TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}
TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}
A 2px blur-radius.
TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}
TEXT SHADOW
Example usage of the text-shadow property:
h1 {
text-shadow: 1px 2px 2px #000;
}
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.
CONTENT
PADDING
CONTENT
BORDER
PADDING
CONTENT
MARGIN
BORDER
PADDING
CONTENT
300px
300px
10px
10px
10px
10px
20px
300px
2px
300px
2px
2px
2px
20px
4px
20px
300px
20px
4px
300px
20px
20px
20px
20px
40px
4px
20px
300px
40px
4px
20px
300px
40px
4px
20px
300px
300px
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.
BOX SIZING
There are three dierent values for box-sizing:
content-box
padding-box
border-box
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.
PADDING-BOX
Calculating the width of the .box:
.box {
box-sizing: padding-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}
PADDING-BOX
Calculating the width of the .box:
.box {
box-sizing: padding-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}
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;
}
304px
BORDER-BOX
The width and height
include the padding and
border, but not the margin.
BORDER-BOX
Calculating the width of the .box:
.box {
box-sizing: border-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}
BORDER-BOX
Calculating the width of the .box:
.box {
box-sizing: border-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}
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;
}
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);
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;
}
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;
}
MULTIPLE BACKGROUNDS
MULTIPLE BACKGROUNDS
MULTIPLE BACKGROUNDS
You can also use the shorthand background:
.element {
background:
url(bg1.png) top left no-repeat,
}
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;
}
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);
}
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);
}
4.6 COLOR
HSLa
Example usage of hsla:
.element {
color: hsla(240, 100%, 50%, 0.75);
}
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)
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)
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)
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
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);
}
4.8 GRADIENTS
LINEAR GRADIENT
Example usage of a linear-gradient:
.element {
background: linear-gradient(to bottom, red, yellow);
}
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
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)
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)
4.8 GRADIENTS
RADIAL GRADIENT
KEYWORDS
closest-side
closest-corner
?
The size of the gradient,
which consist of keywords.
farthest-side
farthest-corner
4.8 GRADIENTS
RADIAL GRADIENT
KEYWORDS
closest-side
closest-corner
?
The size of the gradient,
which consist of keywords.
farthest-side
farthest-corner
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)
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:
.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);
}
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);
}
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 output of the radial-gradient:
4.8 GRADIENTS
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 {
FONT FACE
We specify the font-family, which is what well use to call the font:
@font-face {
font-family: 'OpenSansRegular';
FONT FACE
We add the location of the font files through the src property:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansRegular-webfont.eot');
FONT FACE
We add the location of the font files through the src property:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansRegular-webfont.eot');
FONT FACE
We specify the font-style:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansRegular-webfont.eot');
font-style: normal;
}
FONT FACE
We specify the font-weight:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansRegular-webfont.eot');
font-style: normal;
font-weight: normal;
}
FONT FACE
Using @font-face in our stylesheet:
h1 {
font-family: 'OpenSansRegular';
}
FONT FACE
Using @font-face in our stylesheet:
h1 {
font-family: 'OpenSansRegular';
}
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;
}
FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansBold';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}
FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansBold';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}
FONT FACE
Using varying weights with @font-face:
h1 {
font-family: 'OpenSansBold';
}
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;
}
FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}
FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}
FONT FACE
Using varying weights with @font-face:
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: bold;
}
FONT FACE
Using varying weights with @font-face:
h1 {
font-weight: bold;
}
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>)
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>)
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>
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>
5.3 TRANSITIONS
TRANSITION
Example usage of the shorthand transition property:
TIMING-FUNCTIONS
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>
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.
PROGRESSIVE ENHANCEMENT
Example of progressive enhancement:
.element {
background: #ccc;
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}
PROGRESSIVE ENHANCEMENT
Example of progressive enhancement:
.element {
background: #ccc;
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}
PROGRESSIVE ENHANCEMENT
Example of progressive enhancement:
.element {
background: #ccc;
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}
PROGRESSIVE ENHANCEMENT
Example of progressive enhancement:
.element {
background: #ccc;
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}