code school - front-end formations
Post on 02-Jun-2018
219 Views
Preview:
TRANSCRIPT
-
8/10/2019 Code School - Front-End Formations
1/493
Level 1 - Overview & Updates
-
8/10/2019 Code School - Front-End Formations
2/493
! HTML5 Overview
! CSS3 Overview
! Updated HTML5 Elements
! Existing HTML5 Tag Updates
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
3/493
! HTML5 Overview
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
4/493
-
8/10/2019 Code School - Front-End Formations
5/493
! New HTML elements and attributes
! Full CSS3 Support
HTML5 is the new standard, which includes:
HTML5 OVERVIEW
-
8/10/2019 Code School - Front-End Formations
6/493
TABLE OF CONTENTS
! HTML5 Overview
-
8/10/2019 Code School - Front-End Formations
7/493
! CSS3 Overview
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
8/493
CSS3 OVERVIEW
CSS3
-
8/10/2019 Code School - Front-End Formations
9/493
! Border radius
! Box shadow, text shadow
! Transitions, transforms
! Gradients
! Multiple backgrounds
! Font face
In this course, well cover:
CSS3 OVERVIEW
-
8/10/2019 Code School - Front-End Formations
10/493
! text shadow
! Font face
In this course, well cover:
CSS3 OVERVIEW
-
8/10/2019 Code School - Front-End Formations
11/493
! CSS3 Overview
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
12/493
! Updated HTML5 Elements
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
13/493
UPDATED HTML5 ELEMENTS
! Link tag
! Script tag
! Meta declaration
! Doctype
-
8/10/2019 Code School - Front-End Formations
14/493
HTML 4.01 Strict
DOCTYPE
http://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/strict.dtd -
8/10/2019 Code School - Front-End Formations
15/493
HTML 4.01 Transitional
HTML 4.01 Strict
DOCTYPE
http://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/loose.dtd -
8/10/2019 Code School - Front-End Formations
16/493
HTML 4.01 Transitional
HTML 4.01 Frameset
HTML 4.01 Strict
DOCTYPE
http://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/frameset.dtdhttp://www.w3.org/TR/html4/frameset.dtdhttp://www.w3.org/TR/html4/frameset.dtdhttp://www.w3.org/TR/html4/frameset.dtd -
8/10/2019 Code School - Front-End Formations
17/493
The new HTML5 doctype:
DOCTYPE
-
8/10/2019 Code School - Front-End Formations
18/493
The new HTML5 doctype:
DOCTYPE
-
8/10/2019 Code School - Front-End Formations
19/493
META DECLARATION
The metadeclaration in HTML4:
-
8/10/2019 Code School - Front-End Formations
20/493
The metadeclaration in HTML4:
-
8/10/2019 Code School - Front-End Formations
21/493
-
8/10/2019 Code School - Front-End Formations
22/493
In HTML 4.01, we specify the typeattribute as text/javascrip
SCRIPT TAG
-
8/10/2019 Code School - Front-End Formations
23/493
In HTML 4.01, we specify the typeattribute as text/javascrip
SCRIPT TAG
-
8/10/2019 Code School - Front-End Formations
24/493
The linktag in HTML 4.01:
-
8/10/2019 Code School - Front-End Formations
25/493
The linktag in HTML 4.01:
-
8/10/2019 Code School - Front-End Formations
26/493
! Updated HTML5 Elements
TABLE OF CONTENTS
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
27/493
! Existing HTML5 Tag Updates
TABLE OF CONTENTS
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
28/493
presentationi b em stro
semantic
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
29/493
In HTML4, the iand btags were font style elements:
! The btag rendered a boldfont style
! The itag rendered an italicfont style
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
30/493
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
31/493
Some example uses for the itag:
! Ship name in Western texts
! A thought
! Transliteration
! Idiomatic phrase from another language
! Technical term
! Taxonomic designation
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
32/493
Example usage of the itag:
I hope this works, he thought.
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
33/493
Example usage of the itag:
I hope this works, he thought.
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
34/493
Some example uses for the btag:
! Article lead
! Actionable words in interactive text-driven software
! Product names in a review
! Key words in a document abstract
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
35/493
Example usage of the btag:
The event takes place this upcoming Saturday
over 3,000 people have already registered.
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
36/493
Example usage of the btag:
The event takes place this upcoming Saturday
over 3,000 people have already registered.
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
37/493
In HTML4:
! The strongtag meant strong emphasis
! The emtag meant emphasis
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
38/493
In HTML5, the emand strongtags have new meanings:
! The strongtag now means strong importance
! The emtag now means stress emphasis
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
39/493
Example usage of the emtag:
Make sure to sign up beforethe day of the event, S
16, 2013.
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
40/493
Make sure to sign upbeforethe day of the event, S
16, 2013.
Example usage of the emtag:
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
41/493
Make sure to sign upbeforethe day of the event,
September 16, 2013.
Example usage of the strongtag:
EXISTING HTML5 TAG UPDATES
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
42/493
Example usage of the strongtag:
Make sure to sign up before the day of the event,
September 16, 2013.
EXISTING HTML5 TAG UPDATES
-
8/10/2019 Code School - Front-End Formations
43/493
-
8/10/2019 Code School - Front-End Formations
44/493
Level 2 - HTML5 Elements
-
8/10/2019 Code School - Front-End Formations
45/493
-
8/10/2019 Code School - Front-End Formations
46/493
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
47/493
! Section
TABLE OF CONTENTS
SECTION
-
8/10/2019 Code School - Front-End Formations
48/493
SECTION
- W3C SPECIFICATION
sectiongeneric document or applicatsection
SECTION
-
8/10/2019 Code School - Front-End Formations
49/493
- W3C SPECIFICATION
sectiongeneric document or applicatsection
SECTION
SECTION VS. DIV
-
8/10/2019 Code School - Front-End Formations
50/493
SECTION VS. DIV
divsection
grouping togeth
thematically related content
-
8/10/2019 Code School - Front-End Formations
51/493
-
8/10/2019 Code School - Front-End Formations
52/493
-
8/10/2019 Code School - Front-End Formations
53/493
SECTION
-
8/10/2019 Code School - Front-End Formations
54/493
Example usage of the sectiontag:
The Gallery
SECTION
-
8/10/2019 Code School - Front-End Formations
55/493
Example usage of the sectiontag:
The Gallery
The Gallery
THE DOCUMENT OUTLINE
-
8/10/2019 Code School - Front-End Formations
56/493
document outline
THE DOCUMENT OUTLINE
-
8/10/2019 Code School - Front-End Formations
57/493
! Article
! Aside! Nav
! Section
The following elements have their own self-contained outline
THE DOCUMENT OUTLINE
-
8/10/2019 Code School - Front-End Formations
58/493
Take the following example:
This is the title of the page.
This is the title of a sub-section.
THE DOCUMENT OUTLINE
-
8/10/2019 Code School - Front-End Formations
59/493
1. This is the title of the page.
1.1 This is the title of a sub-section.
This is the title of the page.
This is the title of a sub-section.
Take the following example:
THE DOCUMENT OUTLINE
-
8/10/2019 Code School - Front-End Formations
60/493
This is the title of the page.
This is the title of a sub-section.
Take the following example:
THE DOCUMENT OUTLINE
-
8/10/2019 Code School - Front-End Formations
61/493
1. This is the title of the page.
1.1 This is the title of a sub-section.
This is the title of the page.
This is the title of a sub-section.
Take the following example:
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
62/493
! Section
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
63/493
! Header
HEADER
-
8/10/2019 Code School - Front-End Formations
64/493
- W3C SPECIFICATION
introductorynavigational aids
HEADER
-
8/10/2019 Code School - Front-End Formations
65/493
! Usually appears at the top of a document or section, but
is defined by its contentrather than its position
! There can be many di!erent headers on a page
-
8/10/2019 Code School - Front-End Formations
66/493
-
8/10/2019 Code School - Front-End Formations
67/493
HEADER
-
8/10/2019 Code School - Front-End Formations
68/493
Example usage of the headertag:
HEADER
-
8/10/2019 Code School - Front-End Formations
69/493
Example usage of the headertag:
HEADER
-
8/10/2019 Code School - Front-End Formations
70/493
The heading of the section
This is content in the header.
This is some information within the section.
Example usage of the headertag within a section:
HEADER
-
8/10/2019 Code School - Front-End Formations
71/493
The heading of the section
This is content in the header.
This is some information within the section.
Example usage of the headertag within a section:
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
72/493
! Header
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
73/493
!
Footer
FOOTER
-
8/10/2019 Code School - Front-End Formations
74/493
footerancesto
sectioning content section
root element- W3C SPECIFICATION
FOOTER
-
8/10/2019 Code School - Front-End Formations
75/493
header footer
It should describe the content icontained within
-
8/10/2019 Code School - Front-End Formations
76/493
-
8/10/2019 Code School - Front-End Formations
77/493
E l f th f t t
FOOTER
-
8/10/2019 Code School - Front-End Formations
78/493
Example usage of the footertag:
-
8/10/2019 Code School - Front-End Formations
79/493
E l f th f t t ithi ti t
FOOTER
-
8/10/2019 Code School - Front-End Formations
80/493
The heading of the section
This is content in the header.
This is some information within the section.
By "Author Name"
Example usage of the footertag within a sectiontag:
Example usage of the footer tag within a section tag
FOOTER
-
8/10/2019 Code School - Front-End Formations
81/493
The heading of the section
This is content in the header.
This is some information within the section.
By "Author Name"
Example usage of the footertag within a sectiontag:
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
82/493
! Footer
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
83/493
! Aside
ASIDE
-
8/10/2019 Code School - Front-End Formations
84/493
asidetangentially related
the content surrounding it
The aside now covers various contexts:
ASIDE
-
8/10/2019 Code School - Front-End Formations
85/493
! When used withinan articleelement, the asidecontents s
be related to that particular articleit is contained within.
! When used outsidean articleelement, the asidecontents
should be specifically related to the site.
The asidenow covers various contexts:
The aside now covers various contexts:
ASIDE
-
8/10/2019 Code School - Front-End Formations
86/493
! When used withinan articleelement, the asidecontents s
be related to that particular articleit is contained within.
! When used outsidean articleelement, the asidecontents
should be specifically related to the site.
The asidenow covers various contexts:
ASIDE
-
8/10/2019 Code School - Front-End Formations
87/493
aside
article page
-
8/10/2019 Code School - Front-End Formations
88/493
-
8/10/2019 Code School - Front-End Formations
89/493
Example usage of the asidetag:
ASIDE
-
8/10/2019 Code School - Front-End Formations
90/493
p g g
Example usage of the asidetag:
ASIDE
-
8/10/2019 Code School - Front-End Formations
91/493
p g g
Example usage of the asidetag within a section:
ASIDE
-
8/10/2019 Code School - Front-End Formations
92/493
The heading of the section
This is content in the header.
This is some information within the section.
Some secondary information.
By "Author Name"
p g g
Example usage of the asidetag within a section:
ASIDE
-
8/10/2019 Code School - Front-End Formations
93/493
The heading of the section
This is content in the header.
This is some information within the section.
Some secondary information.
By "Author Name"
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
94/493
! Aside
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
95/493
! Nav
NAV
-
8/10/2019 Code School - Front-End Formations
96/493
nav
a section with
navigation links- W3C SPECIFICATION
NAV
-
8/10/2019 Code School - Front-End Formations
97/493
navmajor navigation
-
8/10/2019 Code School - Front-End Formations
98/493
-
8/10/2019 Code School - Front-End Formations
99/493
-
8/10/2019 Code School - Front-End Formations
100/493
Example usage of the navtag:
NAV
-
8/10/2019 Code School - Front-End Formations
101/493
-
8/10/2019 Code School - Front-End Formations
102/493
-
8/10/2019 Code School - Front-End Formations
103/493
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
104/493
! Article
ARTICLE
-
8/10/2019 Code School - Front-End Formations
105/493
article
independedistributable or reusable
- W3C SPECIFICATION
ARTICLE
-
8/10/2019 Code School - Front-End Formations
106/493
articlesection
self-contained related conte
Determining if a particular piece of content is self-contained
ARTICLE
-
8/10/2019 Code School - Front-End Formations
107/493
A bl
Some uses for the articletag:
ARTICLE
-
8/10/2019 Code School - Front-End Formations
108/493
! A blog post
! A news story
! A comment on a post
! A review
-
8/10/2019 Code School - Front-End Formations
109/493
-
8/10/2019 Code School - Front-End Formations
110/493
Example usage of the articletag:
ARTICLE
-
8/10/2019 Code School - Front-End Formations
111/493
Example usage of the articletag:
ARTICLE
-
8/10/2019 Code School - Front-End Formations
112/493
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
113/493
! Article
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
114/493
! Main
MAIN
-
8/10/2019 Code School - Front-End Formations
115/493
- W3C SPECIFICATION
main
MAIN
-
8/10/2019 Code School - Front-End Formations
116/493
main
directly related texpands upon
- W3C SPECIFICATION
! Do notinclude more than one mainelement in a documen
! Do not include the main element inside of an article aside
MAIN
-
8/10/2019 Code School - Front-End Formations
117/493
! Do notinclude the mainelement inside of an article, aside
footer, header, or navelement
-
8/10/2019 Code School - Front-End Formations
118/493
-
8/10/2019 Code School - Front-End Formations
119/493
Example usage of the maintag:
MAIN
-
8/10/2019 Code School - Front-End Formations
120/493
Example usage of the maintag:
MAIN
-
8/10/2019 Code School - Front-End Formations
121/493
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
122/493
! Main
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
123/493
! Figure/figcaption
FIGURE
figure
-
8/10/2019 Code School - Front-End Formations
124/493
gu e
- W3C SPECIFICATION
A common use of the figuretag is for an image within an art
FIGURE
-
8/10/2019 Code School - Front-End Formations
125/493
FIGCAPTION
-
8/10/2019 Code School - Front-End Formations
126/493
- W3C SPECIFICATION
figcaptionfigure
Example usage of the figcaptiontag:
FIGCAPTION
-
8/10/2019 Code School - Front-End Formations
127/493
This is a caption for the picture.
Example usage of the figcaptiontag:
FIGCAPTION
-
8/10/2019 Code School - Front-End Formations
128/493
g
This is a caption for the picture.
FIGURE & FIGCAPTIONExample output of the figureand figcaptionelements:
-
8/10/2019 Code School - Front-End Formations
129/493
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
130/493
!
Figure/figcaption
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
131/493
! Time
TIME
ti
-
8/10/2019 Code School - Front-End Formations
132/493
time
- W3C SPECIFICATION
-
8/10/2019 Code School - Front-End Formations
133/493
-
8/10/2019 Code School - Front-End Formations
134/493
Example usage of the timetag:
2013-09-16
TIME
-
8/10/2019 Code School - Front-End Formations
135/493
-
8/10/2019 Code School - Front-End Formations
136/493
-
8/10/2019 Code School - Front-End Formations
137/493
Example usage of the timetag:
2013-09-16
TIME
-
8/10/2019 Code School - Front-End Formations
138/493
09/16/2013
We use the datetimeattribute to get our desired format:
TIME
-
8/10/2019 Code School - Front-End Formations
139/493
datetime datetime precise datetime
-
8/10/2019 Code School - Front-End Formations
140/493
-
8/10/2019 Code School - Front-End Formations
141/493
Level 3 - HTML5 Forms
! New input types
! New form elements
! New form attributes
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
142/493
! New form attributes
! New input typesTABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
143/493
! Search
! Email
HTML5 provides several new input types:
! Month
! Week
NEW INPUT TYPES
-
8/10/2019 Code School - Front-End Formations
144/493
! Email
! URL
! Tel
! Number
! Range
!
Date
! Week
! Time
! Datetime
! Datetime-local
! Color
NEW INPUT TYPES
-
8/10/2019 Code School - Front-End Formations
145/493
typetext
-
8/10/2019 Code School - Front-End Formations
146/493
-
8/10/2019 Code School - Front-End Formations
147/493
-
8/10/2019 Code School - Front-End Formations
148/493
Example usage of the searchinput type:
SEARCH
-
8/10/2019 Code School - Front-End Formations
149/493
Example usage of the searchinput type:
SEARCH
-
8/10/2019 Code School - Front-End Formations
150/493
Example output of the searchinput type:SEARCH
-
8/10/2019 Code School - Front-End Formations
151/493
Google Chrome 29
Mobile Safari keyboard with the searchinput type:SEARCH
-
8/10/2019 Code School - Front-End Formations
152/493
SEARCHMobile Safari keyboard with the searchinput type:
-
8/10/2019 Code School - Front-End Formations
153/493
-
8/10/2019 Code School - Front-End Formations
154/493
-
8/10/2019 Code School - Front-End Formations
155/493
-
8/10/2019 Code School - Front-End Formations
156/493
Example usage of the emailinput type:
EMAIL
-
8/10/2019 Code School - Front-End Formations
157/493
Example usage of the emailinput type:
EMAIL
-
8/10/2019 Code School - Front-End Formations
158/493
Mobile Safari keyboard with the emailinput type:EMAIL
-
8/10/2019 Code School - Front-End Formations
159/493
EMAILMobile Safari keyboard with the emailinput type:
-
8/10/2019 Code School - Front-End Formations
160/493
url
URL
-
8/10/2019 Code School - Front-End Formations
161/493
added usability on mobiledevices
URLMobile Safari keyboard with the urlinput type:
-
8/10/2019 Code School - Front-End Formations
162/493
-
8/10/2019 Code School - Front-End Formations
163/493
input
DATE
-
8/10/2019 Code School - Front-End Formations
164/493
daa control for settthe elements value to a strirepresenting a date- W3C SPECIFICATION
Example usage of the dateinput type:
DATE
-
8/10/2019 Code School - Front-End Formations
165/493
Example usage of the dateinput type:
DATE
-
8/10/2019 Code School - Front-End Formations
166/493
Output of the dateinput type:
DATE
-
8/10/2019 Code School - Front-End Formations
167/493
Google Chrome 29
Mobile Safari keyboard with the dateinput type:
DATE
-
8/10/2019 Code School - Front-End Formations
168/493
TEL
tel
-
8/10/2019 Code School - Front-End Formations
169/493
addedusability on mobile device
-
8/10/2019 Code School - Front-End Formations
170/493
Example usage of the telinput type:
TEL
-
8/10/2019 Code School - Front-End Formations
171/493
Mobile Safari keyboard with the telinput type:
TEL
-
8/10/2019 Code School - Front-End Formations
172/493
num
NUMBER
-
8/10/2019 Code School - Front-End Formations
173/493
precise control fsetting the elements value tostring representing a number
- W3C SPECIFICATION
-
8/10/2019 Code School - Front-End Formations
174/493
Example usage of the numberinput type:
NUMBER
-
8/10/2019 Code School - Front-End Formations
175/493
Output of the numberinput type:
NUMBER
-
8/10/2019 Code School - Front-End Formations
176/493
Google Chrome 29
Mobile Safari keyboard with the numberinput type:
NUMBER
-
8/10/2019 Code School - Front-End Formations
177/493
Mobile Safari keyboard with the numberinput type:
NUMBER
-
8/10/2019 Code School - Front-End Formations
178/493
ran
RANGE
-
8/10/2019 Code School - Front-End Formations
179/493
imprecise contfor setting the elements valua string representing a numb
- W3C SPECIFICATION
Example usage of the rangeinput type:
RANGE
-
8/10/2019 Code School - Front-End Formations
180/493
-
8/10/2019 Code School - Front-End Formations
181/493
Output of the rangeinput type:
RANGE
-
8/10/2019 Code School - Front-End Formations
182/493
Google Chrome 29
Example usage of the month, weekinput types:
MONTH, WEEK
-
8/10/2019 Code School - Front-End Formations
183/493
Output of the month, weekinput types:
MONTH, WEEK
-
8/10/2019 Code School - Front-End Formations
184/493
Google Chrome 29
-
8/10/2019 Code School - Front-End Formations
185/493
Output of the time, datetime-localinput type:
TIME, DATETIME-LOCAL
-
8/10/2019 Code School - Front-End Formations
186/493
Google Chrome 29
datetime-local
t l f tti th
DATETIME-LOCAL VS. DATETIME
-
8/10/2019 Code School - Front-End Formations
187/493
a control for setting thelements value to a stringrepresenting a local date and time
- W3C SPECIFICATION
colol ll t
COLOR
-
8/10/2019 Code School - Front-End Formations
188/493
a color-well controsetting the elements value tostring representing a simple c
- W3C SPECIFICATION
Example usage of the colorinput type:
COLOR
-
8/10/2019 Code School - Front-End Formations
189/493
-
8/10/2019 Code School - Front-End Formations
190/493
! New input types
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
191/493
! New form elements
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
192/493
NEW FORM ELEMENTS
! Datalist
! Keygen
! Output
HTML5 provides new form elements:
-
8/10/2019 Code School - Front-End Formations
193/493
! Datalist
HTML5 provides new form elements:
NEW FORM ELEMENTS
-
8/10/2019 Code School - Front-End Formations
194/493
datalist
DATALIST
-
8/10/2019 Code School - Front-End Formations
195/493
represent predefined optionfor other controls- W3C SPECIFICATION
Example usage of the datalistform element:
DATALIST
-
8/10/2019 Code School - Front-End Formations
196/493
Example usage of the datalistform element:
DATALIST
-
8/10/2019 Code School - Front-End Formations
197/493
Example usage of the datalistform element:
DATALIST
-
8/10/2019 Code School - Front-End Formations
198/493
Example usage of the datalistform element:
DATALIST
-
8/10/2019 Code School - Front-End Formations
199/493
p p
-
8/10/2019 Code School - Front-End Formations
200/493
-
8/10/2019 Code School - Front-End Formations
201/493
-
8/10/2019 Code School - Front-End Formations
202/493
! New form attributes
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
203/493
-
8/10/2019 Code School - Front-End Formations
204/493
-
8/10/2019 Code School - Front-End Formations
205/493
placeholder
inside hidden
PLACEHOLDER
-
8/10/2019 Code School - Front-End Formations
206/493
inside hidden
returns
-
8/10/2019 Code School - Front-End Formations
207/493
-
8/10/2019 Code School - Front-End Formations
208/493
-
8/10/2019 Code School - Front-End Formations
209/493
Example usage of the placeholderattribute:
PLACEHOLDER
-
8/10/2019 Code School - Front-End Formations
210/493
PLACEHOLDER
Example of the placeholderattribute:
-
8/10/2019 Code School - Front-End Formations
211/493
Google Chrome 29
autofocus
h
AUTOFOCUS
-
8/10/2019 Code School - Front-End Formations
212/493
whenthe page is rendered
Example usage of the autofocusattribute:
AUTOFOCUS
-
8/10/2019 Code School - Front-End Formations
213/493
Example output of the autofocusattribute:
AUTOFOCUS
-
8/10/2019 Code School - Front-End Formations
214/493
Google Chrome 29
Example output of the autofocusattribute:
AUTOFOCUS
-
8/10/2019 Code School - Front-End Formations
215/493
Google Chrome 29
required
REQUIRED
-
8/10/2019 Code School - Front-End Formations
216/493
if the field is left blan
Example usage of the requiredattribute:
REQUIRED
-
8/10/2019 Code School - Front-End Formations
217/493
Example of the requiredattribute:
REQUIRED
-
8/10/2019 Code School - Front-End Formations
218/493
Google Chrome 29
pattern
JavaScript validate
PATTERN
-
8/10/2019 Code School - Front-End Formations
219/493
JavaScript validateform field patt
Example usage of the patternattribute:
PATTERN
-
8/10/2019 Code School - Front-End Formations
220/493
Example usage of the patternattribute:
PATTERN
-
8/10/2019 Code School - Front-End Formations
221/493
Example usage of the patternattribute:
PATTERN
-
8/10/2019 Code School - Front-End Formations
222/493
Google Chrome 29
-
8/10/2019 Code School - Front-End Formations
223/493
-
8/10/2019 Code School - Front-End Formations
224/493
! Border Radius
! Box Shadow
! Text Shadow
! Box Sizing
TABLE OF CONTENTS
! Multiple Backgrounds
! Color
-
8/10/2019 Code School - Front-End Formations
225/493
! Color
! Opacity
! Gradients
! Border Radius
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
226/493
border-radius
roundedb d
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
227/493
corners to borders
-
8/10/2019 Code School - Front-End Formations
228/493
The base .boxelement well be working with:
.box{
background:grey;
height:50px;
width:200px;
}
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
229/493
Example usage of the border-radiusproperty:
.box{
}
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
230/493
Example usage of the border-radiusproperty:
.box{
}
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
231/493
Example usage of the border-radiusproperty:
.box{
}
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
232/493
-
8/10/2019 Code School - Front-End Formations
233/493
Example usage of the border-radiusproperty:
.box{
}
border-radius:15px;
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
234/493
Example usage of the border-radiusproperty:
.box{
}
border-radius:4px15px12px10px;
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
235/493
Example usage of the border-radiusproperty:
.box{
}
border-radius:4px15px12px10px;
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
236/493
Example usage of the border-radiusproperty:
.box{
}
border-radius:4px15px12px10px;
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
237/493
Example usage of the border-radiusproperty:
border-radius:
-
8/10/2019 Code School - Front-End Formations
238/493
Example usage of the border-radiusproperty:
border-radius:
-
8/10/2019 Code School - Front-End Formations
239/493
Example usage of the border-radiusproperty:
border-radius:
-
8/10/2019 Code School - Front-End Formations
240/493
Example usage of the border-radiusproperty:
border-radius:
-
8/10/2019 Code School - Front-End Formations
241/493
Example usage of the border-radiusproperty:
border-radius:
-
8/10/2019 Code School - Front-End Formations
242/493
border-radiuspercentages
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
243/493
percentages
Example usage of the border-radiusproperty:
.box{
}
border-radius:50%;
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
244/493
Example usage of the border-radiusproperty:
.box{
}
border-radius:50%;
BORDER RADIUS
-
8/10/2019 Code School - Front-End Formations
245/493
! Border Radius
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
246/493
! Box Shadow
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
247/493
BOX SHADOW
box-shadow
shadow on anelement
-
8/10/2019 Code School - Front-End Formations
248/493
element
Example usage of the box-shadowproperty:
.box{
}
box-shadow:1px 2px 2px #000;
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
249/493
-
8/10/2019 Code School - Front-End Formations
250/493
Example usage of the box-shadowproperty:
box-shadow:
-
8/10/2019 Code School - Front-End Formations
251/493
If it is not specified (which is thedefault), a drop shadowis created,
?
Example usage of the box-shadowproperty:
box-shadow:
-
8/10/2019 Code School - Front-End Formations
252/493
rather than an inset shadow.
BOX SHADOW
If it is not specified (which is thedefault), a drop shadowis created,
Example usage of the box-shadowproperty:
box-shadow:
-
8/10/2019 Code School - Front-End Formations
253/493
rather than an inset shadow.
The shadowo!set x value
Example usage of the box-shadowproperty:
box-shadow:
-
8/10/2019 Code School - Front-End Formations
254/493
o!set xvalue.
-
8/10/2019 Code School - Front-End Formations
255/493
The blur-radiusalters the bluramount of the shadow, causingto become bigger and lighter
Example usage of the box-shadowproperty:
box-shadow:
-
8/10/2019 Code School - Front-End Formations
256/493
to become biggerand lighter(with a larger value).
-
8/10/2019 Code School - Front-End Formations
257/493
-
8/10/2019 Code School - Front-End Formations
258/493
Example usage of the box-shadowproperty:
.box{
}
box-shadow:1px 2px 2px #000;
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
259/493
Example usage of the box-shadowproperty:
.box{
}
box-shadow:1px 2px 2px #000;
No insetvalue is specified,so this is a drop shadow
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
260/493
so this is a drop shadow.
Example usage of the box-shadowproperty:
.box{
}
box-shadow:1px 2px 2px #000;
A 1px o!set-xvalue.
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
261/493
-
8/10/2019 Code School - Front-End Formations
262/493
.box{
}
box-shadow:1px2px 2px#000;
A 2px blur-radius.
Example usage of the box-shadowproperty:
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
263/493
-
8/10/2019 Code School - Front-End Formations
264/493
.box{
}
box-shadow:1px2px 2px #000;
Example usage of the box-shadowproperty:
The drop shadowcolor is black
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
265/493
color is black.
.box{
}
box-shadow:1px 2px 2px #000;
Example usage of the box-shadowproperty:
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
266/493
blur-radiusspread-radius
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
267/493
Example usage of the box-shadowproperty:
box-shadow:1px 2px 2px #000;
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
268/493
Example usage of the box-shadowproperty:
box-shadow:1px 2px 0 2px #000;
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
269/493
Example usage of the box-shadowproperty:
box-shadow: 1px 2px 02px #000;
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
270/493
Example of the blur-radius andspread-radiusproperties:
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
271/493
blur-radius spread-radius
You can specify multiple box-shadows via a comma-separated
.box{
}
box-shadow:
1px 1px 2px #000,
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
272/493
-
8/10/2019 Code School - Front-End Formations
273/493
You can specify multiple box-shadows via a comma-separated
.box{
}
box-shadow:
1px 1px 2px #000,
inset1px 1px 2px blue;
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
274/493
You can specify multiple box-shadows via a comma-separated
.box{
}
box-shadow:
1px 1px 2px #000,
inset1px 1px 2px blue;
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
275/493
You can specify multiple box-shadows via a comma-separated
.box{
}
box-shadow:
1px 1px 2px #000,
inset1px 1px 2px blue;
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
276/493
-
8/10/2019 Code School - Front-End Formations
277/493
.box{
}
box-shadow:-1px-2px2px#000;
You can also specify negative values:
BOX SHADOW
-
8/10/2019 Code School - Front-End Formations
278/493
! Box Shadow
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
279/493
! Text Shadow
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
280/493
text-shadowbox-shadow
it applies the shadow text
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
281/493
Example usage of the text-shadowproperty:
I have a shadow!
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
282/493
Example usage of the text-shadowproperty:
h1{
text-shadow:1px 2px 2px #000;
}
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
283/493
-
8/10/2019 Code School - Front-End Formations
284/493
-
8/10/2019 Code School - Front-End Formations
285/493
The shadowo!set xvalue.
Example usage of the text-shadowproperty:
text-shadow:
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
286/493
The shadowo!setyvalue.
Example usage of the text-shadowproperty:
text-shadow:
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
287/493
The blur-radiusalters the bluramount of the shadow, causingit to become biggerand lighter(with a larger value).
?
Example usage of the text-shadowproperty:
text-shadow:
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
288/493
( g )
-
8/10/2019 Code School - Front-End Formations
289/493
Example usage of the text-shadowproperty:
h1{
text-shadow:1px 2px 2px #000;
}
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
290/493
Example usage of the text-shadowproperty:
h1{
text-shadow:1px 2px 2px #000;
}
A 1px o!set-xvalue.
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
291/493
Example usage of the text-shadowproperty:
h1{
text-shadow:1px2px2px #000;
}
A 2px o!set-yvalue.
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
292/493
Example usage of the text-shadowproperty:
h1{
text-shadow:1px2px 2px#000;
}
A 2px blur-radius.
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
293/493
Example usage of the text-shadowproperty:
h1{
text-shadow:1px2px 2px #000;
}
The drop shadowcolor is black.
TEXT SHADOW
-
8/10/2019 Code School - Front-End Formations
294/493
-
8/10/2019 Code School - Front-End Formations
295/493
! Text Shadow
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
296/493
! Box Sizing
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
297/493
-
8/10/2019 Code School - Front-End Formations
298/493
BOX MODEL REFRESHER
! The CSS box model references the designand layout
of given HTML elements
! Each HTML element is a box, which consists of margins
borders, padding, and the contentof the element
! The box model refers to how those properties are
calculatedin conjunction with one another in order to setthe elements dimensions
-
8/10/2019 Code School - Front-End Formations
299/493
The contentof the box is where the actual content,
the textand images, is located:
CONTENT
BOX MODEL REFRESHER
-
8/10/2019 Code School - Front-End Formations
300/493
PADDING
The paddingclears the area around the content:
BOX MODEL REFRESHER
CONTENT
-
8/10/2019 Code School - Front-End Formations
301/493
BORDER
The bordergoes around the paddingand content:
BOX MODEL REFRESHER
CONTENT
PADDING
-
8/10/2019 Code School - Front-End Formations
302/493
MARGIN
The marginclears the area around the border:
BOX MODEL REFRESHER
CONTENT
BORDER
PADDING
-
8/10/2019 Code School - Front-End Formations
303/493
-
8/10/2019 Code School - Front-End Formations
304/493
Calculating the width of the .box:
300px
.box{width:300px; }
BOX MODEL REFRESHER
-
8/10/2019 Code School - Front-End Formations
305/493
300px
.box{padding:10px; }
Calculating the width of the .box:
BOX MODEL REFRESHER
10px
10px
10px
10px
-
8/10/2019 Code School - Front-End Formations
306/493
300px
.box{padding:10px; }
Calculating the width of the .box:
BOX MODEL REFRESHER
20px
-
8/10/2019 Code School - Front-End Formations
307/493
300px
20px
.box{border:2px solid black; }
Calculating the width of the .box:
BOX MODEL REFRESHER
2px
2px
2px
2px
-
8/10/2019 Code School - Front-End Formations
308/493
2px
300px
20px
.box{border:2px solid black; }
Calculating the width of the .box:
BOX MODEL REFRESHER
4px
-
8/10/2019 Code School - Front-End Formations
309/493
.box{margin:20px; }
Calculating the width of the .box:
BOX MODEL REFRESHER
20px
4px
20px
20px
20px300px
-
8/10/2019 Code School - Front-End Formations
310/493
20px
Calculating the width of the .box:
BOX MODEL REFRESHER
40px
20px
4px
.box{margin:20px; }
300px
-
8/10/2019 Code School - Front-End Formations
311/493
Calculating the width of the .box:
BOX MODEL REFRESHER
40px
20px
4px
.box{margin:20px; }
300px
-
8/10/2019 Code School - Front-End Formations
312/493
Calculating the width of the .box:
BOX MODEL REFRESHER
40px
20px
4px
.box{margin:20px; }
300px
-
8/10/2019 Code School - Front-End Formations
313/493
300 + 20 + 4 = 324px
Calculating the width of the .box:
BOX MODEL REFRESHER
40px
20px
4px
300px
-
8/10/2019 Code School - Front-End Formations
314/493
box-sizing
calculate widthand heights of given elements
BOX SIZING
-
8/10/2019 Code School - Front-End Formations
315/493
! content-box
! padding-box
! border-box
There are three di!erent values for box-sizing:
BOX SIZING
-
8/10/2019 Code School - Front-End Formations
316/493
default value
the contentthe border, margin, or paddin
CONTENT-BOX
-
8/10/2019 Code School - Front-End Formations
317/493
width heightpadding
border marg
PADDING-BOX
-
8/10/2019 Code School - Front-End Formations
318/493
Calculating the width of the .box:
.box {
border:2px solid black;
margin:20px;
padding:10px;
width:300px;
}
box-sizing:padding-box;
PADDING-BOX
-
8/10/2019 Code School - Front-End Formations
319/493
Calculating the width of the .box:
.box {
border:2pxsolidblack;
margin:20px;
padding: 10px;
width:300px;
}
PADDING-BOX
box-sizing:padding-box;
MARGIN
CONTENT
PADDING
-
8/10/2019 Code School - Front-End Formations
320/493
-
8/10/2019 Code School - Front-End Formations
321/493
-
8/10/2019 Code School - Front-End Formations
322/493
Calculating the width of the .box:
.box {
border:2px solid black;
margin:20px;
padding:10px;
width:300px;
}
BORDER-BOX
box-sizing:border-box;
-
8/10/2019 Code School - Front-End Formations
323/493
Calculating the width of the .box:
.box {
border: 2px solid black;
margin:20px;
padding: 10px;
width:300px;
}
BORDER-BOX
box-sizing:border-box;
MARGIN
CONTENT
PADDING
-
8/10/2019 Code School - Front-End Formations
324/493
Calculating the width of the .box:
.box {
border: 2px solid black;
margin:20px;
padding: 10px;
width:300px;
}
300px
BORDER-BOX
box-sizing:border-box;
-
8/10/2019 Code School - Front-End Formations
325/493
-
8/10/2019 Code School - Front-End Formations
326/493
! Box Sizing
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
327/493
! Multiple Backgrounds
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
328/493
multiple backgrounds
stacked inorder in which you specify th
MULTIPLE BACKGROUNDS
-
8/10/2019 Code School - Front-End Formations
329/493
First, specify your background-images in a comma-delimited
.element{
background-image:url(bg1.png),url(bg2.png);
}
MULTIPLE BACKGROUNDS
-
8/10/2019 Code School - Front-End Formations
330/493
Then specify the background-positionfor each, in order:
.element{
background-image:url(bg1.png),url(bg2.png);
}
background-position:top left,centerright;
MULTIPLE BACKGROUNDS
-
8/10/2019 Code School - Front-End Formations
331/493
Finally, specify the background-repeatfor each:
.element{
background-image:url(bg1.png),url(bg2.png);
}
background-position:top left,centerright;
background-repeat:no-repeat,no-repeat;
MULTIPLE BACKGROUNDS
-
8/10/2019 Code School - Front-End Formations
332/493
MULTIPLE BACKGROUNDS
-
8/10/2019 Code School - Front-End Formations
333/493
MULTIPLE BACKGROUNDS
-
8/10/2019 Code School - Front-End Formations
334/493
You can also use the shorthand background:
.element{
}
background:
url(bg1.png)top left no-repeat,
MULTIPLE BACKGROUNDS
-
8/10/2019 Code School - Front-End Formations
335/493
-
8/10/2019 Code School - Front-End Formations
336/493
TABLE OF CONTENTS
! Multiple Backgrounds
-
8/10/2019 Code School - Front-End Formations
337/493
!
Color
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
338/493
! RGBa
! HSLa
CSS3 provides multiple ways to work with color:
COLOR
-
8/10/2019 Code School - Front-End Formations
339/493
RGBred green b
RGBarepresents the opacity of a color
RGBa
-
8/10/2019 Code School - Front-End Formations
340/493
-
8/10/2019 Code School - Front-End Formations
341/493
Example usage of rgba:
.element{
color:rgba(0,0,0,0.75);
}
RGBa
-
8/10/2019 Code School - Front-End Formations
342/493
Example usage of rgba:
.element{
color: rgba(0,0,0, 0.75);
}
RGBa
-
8/10/2019 Code School - Front-End Formations
343/493
Example usage of rgba:
.element{
color: rgba(0, 0, 0, 0.75);
}
RGBa
-
8/10/2019 Code School - Front-End Formations
344/493
HSLa HueSaturation Lightness
hue saturation
lightnessalpha opacity of the
HSLa
-
8/10/2019 Code School - Front-End Formations
345/493
Example usage of hsla:
.element{
}
color:hsla(240,100%,50%,0.75);
HSLa
-
8/10/2019 Code School - Front-End Formations
346/493
Example usage of hsla:
.element{
}
color: hsla(240, 100%, 50%, 0.75);
The huevalue.
HSLa
-
8/10/2019 Code School - Front-End Formations
347/493
Example usage of hsla:
.element{
}
color: hsla(240,100%, 50%, 0.75);
The saturationvalue.
HSLa
-
8/10/2019 Code School - Front-End Formations
348/493
Example usage of hsla:
.element{
}
color: hsla(240, 100%, 50%, 0.75);
The lightnessvalue.
HSLa
-
8/10/2019 Code School - Front-End Formations
349/493
Example usage of hsla:
.element{
}
color: hsla(240, 100%, 50%, 0.75);
The alphavalue.
HSLa
-
8/10/2019 Code School - Front-End Formations
350/493
HSLaRGBa
HSLa + RGBa
-
8/10/2019 Code School - Front-End Formations
351/493
HSLaRGBa
HSLa + RGBa
-
8/10/2019 Code School - Front-End Formations
352/493
TABLE OF CONTENTS
!
Color
-
8/10/2019 Code School - Front-End Formations
353/493
! Opacity
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
354/493
OPACITY
opacity
opacity
-
8/10/2019 Code School - Front-End Formations
355/493
Example usage of the opacityproperty:
.element{
}
opacity:0.45;
OPACITY
-
8/10/2019 Code School - Front-End Formations
356/493
Example usage of the opacityproperty:
.element{
}
opacity:0.45;
OPACITY
-
8/10/2019 Code School - Front-End Formations
357/493
Example output of the opacityproperty:
OPACITY
-
8/10/2019 Code School - Front-End Formations
358/493
Example output of the opacityproperty:
OPACITY
-
8/10/2019 Code School - Front-End Formations
359/493
OPACITY
Opacityall elements that
are nested inside
-
8/10/2019 Code School - Front-End Formations
360/493
-
8/10/2019 Code School - Front-End Formations
361/493
OPACITY
Hello.
Example output of the opacityproperty with nested elements
-
8/10/2019 Code School - Front-End Formations
362/493
OPACITY
Example output of the opacityproperty with nested elements
-
8/10/2019 Code School - Front-End Formations
363/493
OPACITY
Example output of the opacityproperty with nested elements
-
8/10/2019 Code School - Front-End Formations
364/493
TABLE OF CONTENTS
! Opacity
-
8/10/2019 Code School - Front-End Formations
365/493
! Gradients
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
366/493
GRADIENTS
gradients smoo
transitions between two omore colors
-
8/10/2019 Code School - Front-End Formations
367/493
! Linear gradients! Radial gradients
There are two types of gradients that browsers support:
GRADIENTS
-
8/10/2019 Code School - Front-End Formations
368/493
linear gradientstarting
point ending pointoptional stop-color points
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
369/493
Example usage of a linear-gradient:
.element{
background:linear-gradient(to bottom,red,yellow);
}
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
370/493
Example usage of a linear-gradient:
.element{
background:linear-gradient(to bottom,red,yellow);
}
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
371/493
Example usage of a linear-gradient:
linear-gradient( to , s)
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
372/493
Example usage of a linear-gradient:
linear-gradient( to , s)
LINEAR GRADIENT
We can specify the
direction through anangleor a keyword.
?
-
8/10/2019 Code School - Front-End Formations
373/493
The angleis generally
a degree (e.g. 45deg).
?
Example usage of a linear-gradient:
linear-gradient(to , s)
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
374/493
Horizontal: leftor right
Vertical: topor bottom
The side-or-corner
consists of two keywords:
?
Example usage of a linear-gradient:
linear-gradient(to , s)
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
375/493
The color-stops consists ofcolor and an optional stopposition, which can be eitha percentageor length.
Example usage of a linear-gradient:
linear-gradient(to , s)
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
376/493
Example usage of a linear-gradient:
.element{
}
background:linear-gradient(to bottom,red,yellow);
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
377/493
Example usage of a linear-gradient:
.element{
}
background:linear-gradient(to bottom,red,yellow);
No angle is specified.
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
378/493
Example usage of a linear-gradient:
.element{
}
background: linear-gradient(to bottom, red, yellow);
The side-or-cornerisbottom, which makesthe gradient go fromthe top to the bottom.
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
379/493
LINEAR GRADIENT
Example usage of a linear-gradient:
.element{
}
background: linear-gradient(to bottom, red, yellow);
The side-or-angleisbottom, which makesthe gradient go fromthe top to the bottom.
KEYWORDS
-
8/10/2019 Code School - Front-End Formations
380/493
Example usage of a linear-gradient:
.element{
}
background: linear-gradient(to bottom, red, yellow);
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
381/493
Example usage of a linear-gradient:
.element{
}
background: linear-gradient(to bottom, red, yellow);
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
382/493
Example usage of a linear-gradient:
.element{
}
background: linear-gradient(to bottom, red, yellow);
The top of thegradient starts at red.
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
383/493
Example usage of a linear-gradient:
.element{
}
background: linear-gradient(to bottom, red, yellow);
The gradient ends atyellowat the bottom.
LINEAR GRADIENT
-
8/10/2019 Code School - Front-End Formations
384/493
radial gradient lineagradientextends from an origin
extending outwin a circular or elliptical shape
RADIAL GRADIENT
-
8/10/2019 Code School - Front-End Formations
385/493
-
8/10/2019 Code School - Front-End Formations
386/493
Example usage of a radial-gradientin its simplest form:
.element{ background:
radial-gradient(aqua,blue);
}
RADIAL GRADIENT
-
8/10/2019 Code School - Front-End Formations
387/493
Example usage of a radial-gradientin its simplest form:
.element{ background:
radial-gradient(aqua,blue);
}
RADIAL GRADIENT
-
8/10/2019 Code School - Front-End Formations
388/493
Example usage of a radial-gradientin its simplest form:
.element{ background:
radial-gradient(aqua,blue);
}
RADIAL GRADIENT
-
8/10/2019 Code School - Front-End Formations
389/493
Example usage of a radial-gradient:
RADIAL GRADIENT
radial-gradient( at , s)
-
8/10/2019 Code School - Front-End Formations
390/493
Specify the shapeor sizeof the gradient.
?
Example usage of a radial-gradient:
RADIAL GRADIENT
radial-gradient(at , s)
-
8/10/2019 Code School - Front-End Formations
391/493
The shape of the gradient;circleor ellipse. Thedefault is ellipse.
Example usage of a radial-gradient:
RADIAL GRADIENT
radial-gradient( at , s)
-
8/10/2019 Code School - Front-End Formations
392/493
The size of the gradient,which consist of keywords.
?
Example usage of a radial-gradient:
radial-gradient( at , s)
RADIAL GRADIENT
-
8/10/2019 Code School - Front-End Formations
393/493
The size of the gradient,which consist of keywords.
?
Example usage of a radial-gradient:
radial-gradient( at , s)
RADIAL GRADIENT
KEYWORDS
-
8/10/2019 Code School - Front-End Formations
394/493
The size of the gradient,which consist of keywords.
?
Example usage of a radial-gradient:
radial-gradient( at , s)
RADIAL GRADIENT
farthest-corner
KEYWORDS
-
8/10/2019 Code School - Front-End Formations
395/493
The size can also be alengthor percentage.
?
Example usage of a radial-gradient:
radial-gradient( at , s)
RADIAL GRADIENT
-
8/10/2019 Code School - Front-End Formations
396/493
Same as background-
position. Default is center.
?
Example usage of a radial-gradient:
RADIAL GRADIENT
radial-gradient( at, s)
-
8/10/2019 Code School - Front-End Formations
397/493
The color-stops consistsa color and an optional
stop position, which canbe either a percentageolength.
Example usage of a radial-gradient:
RADIAL GRADIENT
radial-gradient( at ,s)
-
8/10/2019 Code School - Front-End Formations
398/493
Example usage of a radial-gradient:
.element{
}
background:radial-gradient(circle at top left,aqua,blue);
RADIAL GRADIENT
-
8/10/2019 Code School - Front-End Formations
399/493
Example usage of a radial-gradient:
.element{
}
The shapeof thegradient is circle,rather than ellipse.
RADIAL GRADIENT
background:radial-gradient(circle at top left, aqua, blue);
-
8/10/2019 Code School - Front-End Formations
400/493
Example usage of a radial-gradient:
.element{
}
The positionof thegradient is topleft.
RADIAL GRADIENT
background:radial-gradient(circle at top left, aqua, blue);
-
8/10/2019 Code School - Front-End Formations
401/493
Example usage of a radial-gradient:
.element{
}
The first color-stois aqua.
RADIAL GRADIENT
background:radial-gradient(circle at top left,aqua, blue);
-
8/10/2019 Code School - Front-End Formations
402/493
Example usage of a radial-gradient:
.element{
}
The last coloris blue.
RADIAL GRADIENT
background:radial-gradient(circle at top left, aqua,blue);
-
8/10/2019 Code School - Front-End Formations
403/493
Example output of the radial-gradient:
RADIAL GRADIENT
-
8/10/2019 Code School - Front-End Formations
404/493
-
8/10/2019 Code School - Front-End Formations
405/493
Level 5 - Fonts & Interactions
-
8/10/2019 Code School - Front-End Formations
406/493
! Transforms
! Transitions
TABLE OF CONTENTS
! Progressive Enhancement
! Font Face
-
8/10/2019 Code School - Front-End Formations
407/493
! Font Face
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
408/493
@font-face
FONT FACE
-
8/10/2019 Code School - Front-End Formations
409/493
Example usage of @font-face:
@font-face{
}
FONT FACE
-
8/10/2019 Code School - Front-End Formations
410/493
-
8/10/2019 Code School - Front-End Formations
411/493
We add the location of the font files through the srcproperty
@font-face{
}
src:url('OpenSansRegular-webfont.eot');
font-family:'OpenSansRegular';
FONT FACE
-
8/10/2019 Code School - Front-End Formations
412/493
We add the location of the font files through the srcproperty
@font-face{
}
src:url('OpenSansRegular-webfont.eot');
font-family:'OpenSansRegular';
FONT FACE
-
8/10/2019 Code School - Front-End Formations
413/493
-
8/10/2019 Code School - Front-End Formations
414/493
We specify the font-weight:
@font-face{
}
font-weight:normal;
font-style:normal;
src:url('OpenSansRegular-webfont.eot');
font-family:'OpenSansRegular';
FONT FACE
-
8/10/2019 Code School - Front-End Formations
415/493
Using @font-facein our stylesheet:
h1{
font-family:'OpenSansRegular';
}
FONT FACE
-
8/10/2019 Code School - Front-End Formations
416/493
Using @font-facein our stylesheet:
h1{
font-family:'OpenSansRegular';
}
FONT FACE
-
8/10/2019 Code School - Front-End Formations
417/493
@font-face
fallback fonts
FONT FACE
-
8/10/2019 Code School - Front-End Formations
418/493
Using @font-facein our stylesheet with fallbacks:
h1{
}
font-family:'OpenSansRegular',Helvetica,Arial,sans-serif;
FONT FACE
-
8/10/2019 Code School - Front-End Formations
419/493
Using varying weights with @font-face:
FONT FACE
@font-face{
font-family:'OpenSansBold';
src:url('OpenSansBold-webfont.eot');
font-style:normal;
font-weight:normal;
}
-
8/10/2019 Code School - Front-End Formations
420/493
-
8/10/2019 Code School - Front-End Formations
421/493
Using varying weights with @font-face:
FONT FACE
h1{
font-family:'OpenSansBold';
}
-
8/10/2019 Code School - Front-End Formations
422/493
FONT FACE
-
8/10/2019 Code School - Front-End Formations
423/493
Using varying weights with @font-face:
FONT FACE
@font-face{
font-family:'OpenSansBold';
src:url('OpenSansBold-webfont.eot');
font-style:normal;
font-weight:normal;
}
FONT FACE
-
8/10/2019 Code School - Front-End Formations
424/493
Using varying weights with @font-face:
FONT FACE
@font-face {
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}
font-family:'OpenSansRegular';
FONT FACE
-
8/10/2019 Code School - Front-End Formations
425/493
Using varying weights with @font-face:
FONT FACE
@font-face {
src:url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}
font-family: 'OpenSansRegular';
FONT FACE
-
8/10/2019 Code School - Front-End Formations
426/493
Using varying weights with @font-face:
FONT FACE
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
}
font-weight:bold;
FONT FACE
-
8/10/2019 Code School - Front-End Formations
427/493
Using varying weights with @font-face:
FONT FACE
h1{
font-weight:bold;
}
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
428/493
TABLE OF CONTENTS
! Font Face
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
429/493
! Transforms
TABLE OF CONTENTS
TRANSFORM
-
8/10/2019 Code School - Front-End Formations
430/493
transform
translate rotate scale
skew
TRANSFORM
TRANSLATE
-
8/10/2019 Code School - Front-End Formations
431/493
You can create a 2D translation using transform:
.element{
transform:translate(20px,30px);
}
TRANSLATE
TRANSLATE
-
8/10/2019 Code School - Front-End Formations
432/493
You can create a 2D translation using transform:
.element{
transform: translate(20px, 30px);
}
TRANSLATE
TRANSLATE
-
8/10/2019 Code School - Front-End Formations
433/493
You can create a 2D translation using transform:
.element{
transform: translate(20px, 30px);
}
TRANSLATE
TRANSLATE
-
8/10/2019 Code School - Front-End Formations
434/493
TRANSLATE
Example output of the transform translate:
TRANSLATE
-
8/10/2019 Code School - Front-End Formations
435/493
Example usage of a 2D translation using transform:
translate(, )
TRANSLATE
TRANSLATE
-
8/10/2019 Code School - Front-End Formations
436/493
A for the x-axis, which
can be either a lengthor percentage.
Example usage of a 2D translation using transform:
translate(, )
TRANSLATE
TRANSLATE
-
8/10/2019 Code School - Front-End Formations
437/493
A for they-axis, which can be either
a lengthor percentage. Ifnot specified, the value is 0.
?
Example usage of a 2D translation using transform:
translate(,)
TRANSLATE
TRANSLATE
-
8/10/2019 Code School - Front-End Formations
438/493
You can use translateXand translateYto translatethe xandyvalues individ
.element{
transform:translateX(20px);}
.element{
transform:translateY(30px);
}
TRANSLATE
TRANSLATE
-
8/10/2019 Code School - Front-End Formations
439/493
You can use translateXand translateYto translatethe xandyvalues individ
translateX()
translateY()
TRANSLATE
ROTATE
-
8/10/2019 Code School - Front-End Formations
440/493
rotate
origin angl
ROTATE
ROTATE
-
8/10/2019 Code School - Front-End Formations
441/493
Example usage of rotate:
.element{
} transform:rotate(45deg);
ROTATE
ROTATE
-
8/10/2019 Code School - Front-End Formations
442/493
Example usage of rotate:
.element{
} transform: rotate(45deg);
ROTATE
ROTATE
-
8/10/2019 Code School - Front-End Formations
443/493
ROTATE
Example output of the transform rotate:
SCALE
-
8/10/2019 Code School - Front-End Formations
444/493
With scale, you can do a 2D scale by a specified unitless num
.element{
} transform:scale(1.2);
SCALE
SCALE
-
8/10/2019 Code School - Front-End Formations
445/493
With scale, you can do a 2D scale by a specified unitless num
.element{
} transform: scale(1.2);
SCALE
SCALE
-
8/10/2019 Code School - Front-End Formations
446/493
SCALE
Example output of the transform scale:
SCALE
-
8/10/2019 Code School - Front-End Formations
447/493
Exampled usage of scale:
scale(, )
SCALE
SCALE
-
8/10/2019 Code School - Front-End Formations
448/493
A unitless numberfor the x-axis.
Exampled usage of scale:
scale(, )
SCALE
-
8/10/2019 Code School - Front-End Formations
449/493
A unitless number for they-axis. If not specified, itdefaults to the value of
.
?
Exampled usage of scale:
scale(, )
SCALE
-
8/10/2019 Code School - Front-End Formations
450/493
You can use scaleXand scaleYto translatethe xandyvalues ind
.element{
transform:scaleX(1.2);}
.element{
transform:scaleY(0.3);
}
-
8/10/2019 Code School - Front-End Formations
451/493
SKEW
-
8/10/2019 Code School - Front-End Formations
452/493
skewx y
angle
SKEW
-
8/10/2019 Code School - Front-End Formations
453/493
Example usage of skewX:
.element{
} transform:skewX(-25deg);
SKEW
-
8/10/2019 Code School - Front-End Formations
454/493
Example usage of skewX:
.element{
} transform: skewX(-25deg);
SKEW
-
8/10/2019 Code School - Front-End Formations
455/493
Example output of the transform skewX:
SKEW
-
8/10/2019 Code School - Front-End Formations
456/493
Example usage of skewX:
skewX()
SKEW
-
8/10/2019 Code School - Front-End Formations
457/493
An for the x-axis.
Example usage of skewX:
skewX()
SKEW
-
8/10/2019 Code School - Front-End Formations
458/493
Example usage of skewY:
skewY()
SKEW
-
8/10/2019 Code School - Front-End Formations
459/493
An for they-axis.
Example usage of skewY:
skewY()
SKEW
-
8/10/2019 Code School - Front-End Formations
460/493
.element{
transform:skewX(25deg);}
.element{
transform:skewY(-85deg);
}
Example usage of skewXand skewY:
SKEW
-
8/10/2019 Code School - Front-End Formations
461/493
Example output of the transform skewX andskewY:
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
462/493
! Transforms
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
463/493
!
Transitions
TRANSITION
-
8/10/2019 Code School - Front-End Formations
464/493
transitionstransit
between two states of a
specified element
TRANSITION
-
8/10/2019 Code School - Front-End Formations
465/493
Example usage of transition:
.element{
}
background-color:black;
TRANSITION
-
8/10/2019 Code School - Front-End Formations
466/493
.element{
}
background-color:black;
Example usage of transition:
.element:hover{
background-color:blue;
}
TRANSITION
-
8/10/2019 Code School - Front-End Formations
467/493
Example usage of transition:
.element{
}
transition:background-color 0.2s ease-in-out; background-color:black;
.element:hover{
background-color:blue;
}
TRANSITION
-
8/10/2019 Code School - Front-End Formations
468/493
Example usage of transition:
.element {
}
transition:background-color 0.2s ease-in-out; background-color: black;
.element:hover {
background-color: blue;
}
TRANSITION
-
8/10/2019 Code School - Front-End Formations
469/493
Example output of the transition:
TRANSITION
-
8/10/2019 Code School - Front-End Formations
470/493
Example usage of the shorthand transitionproperty:
transition:
TRANSITION
-
8/10/2019 Code School - Front-End Formations
471/493
The CSS property youwant to transition.
?
Example usage of the shorthand transitionproperty:
transition:
l f h h h d i i
TRANSITION
-
8/10/2019 Code School - Front-End Formations
472/493
The durationof thetransition. The defaultvalue is 0s, or 0 seconds.
?
Example usage of the shorthand transitionproperty:
transition:
E l f th h th d t iti t
TRANSITION
-
8/10/2019 Code School - Front-End Formations
473/493
Example usage of the shorthand transitionproperty:
transition:
The timing of thetransitionitself.
?
E l f th h th d t iti t
TRANSITION
-
8/10/2019 Code School - Front-End Formations
474/493
Example usage of the shorthand transitionproperty:
transition:
The timing of thetransitionitself.
?
TIMING-FUNCTIONS
! ease
! ease-in
! ease-in-out
! linear
! cubic-bezier
! step-start
! step-end
! steps()
E l f th h th d t iti t
TRANSITION
-
8/10/2019 Code School - Front-End Formations
475/493
The amount of time tobetween the change tbeing requested on a
property, and the startransition.
Example usage of the shorthand transitionproperty:
transition:
You can set the transition values individually as well
TRANSITION
-
8/10/2019 Code School - Front-End Formations
476/493
You can set the transitionvalues individually, as well:
.element{
}
You can set the transition values individually as well:
TRANSITION
-
8/10/2019 Code School - Front-End Formations
477/493
You can set the transitionvalues individually, as well:
.element{
}
transition-property:background-color;
You can set the transition values individually as well:
TRANSITION
-
8/10/2019 Code School - Front-End Formations
478/493
.element{
}
transition-duration:0.2s;
transition-property:background-color;
You can set the transitionvalues individually, as well:
You can set the transition values individually as well:
TRANSITION
-
8/10/2019 Code School - Front-End Formations
479/493
.element{
}
transition-timing-function:ease-in-out;
transition-duration:0.2s;
transition-property:background-color;
You can set the transitionvalues individually, as well:
You can set the transition values individually as well:
TRANSITION
-
8/10/2019 Code School - Front-End Formations
480/493
.element{
}
transition-delay:0.1s;
transition-timing-function:ease-in-out;
transition-duration:0.2s;
transition-property:background-color;
You can set the transitionvalues individually, as well:
TRANSITION
-
8/10/2019 Code School - Front-End Formations
481/493
all transitionproperty transitio
Example usage of transition using the all property:
TRANSITION
-
8/10/2019 Code School - Front-End Formations
482/493
Example usage of transition using theallproperty:
.element{
background-color:black; color:white;
}
.element:hover{
background-color:grey; color:black;
}
Example usage of transition using the all property:
TRANSITION
-
8/10/2019 Code School - Front-End Formations
483/493
Example usage of transition using theallproperty:
.element{
background-color:black; color:white;
}
.element:hover{
background-color:grey; color:black;
}
transition: all 0.2s ease-in-out;
Example usage of transition using the all property:
TRANSITION
-
8/10/2019 Code School - Front-End Formations
484/493
Example usage of transition using theallproperty:
.element {
background-color: black; color: white;
}
.element:hover {
background-color: grey; color: black;
}
transition: all 0.2s ease-in-out;
TRANSITION
Example output of the transition using theallproperty:
-
8/10/2019 Code School - Front-End Formations
485/493
p p g p p y
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
486/493
! Transitions
TABLE OF CONTENTS
-
8/10/2019 Code School - Front-End Formations
487/493
! Progressive Enhancement
PROGRESSIVE ENHANCEMENT
-
8/10/2019 Code School - Front-End Formations
488/493
progressive enhanceme
add to
detract from
Example of progressive enhancement:
PROGRESSIVE ENHANCEMENT
-
8/10/2019 Code School - Front-End Formations
489/493
.element{
background:#ccc;
border-radius:10px;
box-shadow:0 1px 1px rgba(0,0,0,0.75);
}
Example of progressive enhancement:
PROGRESSIVE ENHANCEMENT
-
8/10/2019 Code School - Front-End Formations
490/493
.element{
background:#ccc;
border-radius:10px;
box-shadow:0 1px 1px rgba(0,0,0,0.75);
}
-
8/10/2019 Code School - Front-End Formations
491/493
-
8/10/2019 Code School - Front-End Formations
492/493
-
8/10/2019 Code School - Front-End Formations
493/493
top related