code school - front-end formations

8/10/2019 Code School - Front-End Formations

1/493

Level 1 - Overview & Updates


2/493

! HTML5 Overview

! CSS3 Overview

! Updated HTML5 Elements

! Existing HTML5 Tag Updates

TABLE OF CONTENTS


3/493

! HTML5 Overview

TABLE OF CONTENTS


4/493


5/493

! New HTML elements and attributes

! Full CSS3 Support

HTML5 is the new standard, which includes:

HTML5 OVERVIEW


6/493

TABLE OF CONTENTS

! HTML5 Overview


7/493

! CSS3 Overview

TABLE OF CONTENTS


8/493

CSS3 OVERVIEW

CSS3


9/493

! Border radius

! Box shadow, text shadow

! Transitions, transforms

! Gradients

! Multiple backgrounds

! Font face

In this course, well cover:

CSS3 OVERVIEW


10/493

! text shadow

! Font face

In this course, well cover:

CSS3 OVERVIEW


11/493

! CSS3 Overview

TABLE OF CONTENTS


12/493


TABLE OF CONTENTS


13/493

UPDATED HTML5 ELEMENTS

! Link tag

! Script tag

! Meta declaration

! Doctype


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


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


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


17/493

The new HTML5 doctype:

DOCTYPE


18/493

The new HTML5 doctype:

DOCTYPE


19/493

META DECLARATION

The metadeclaration in HTML4:


20/493

The metadeclaration in HTML4:


21/493


22/493

In HTML 4.01, we specify the typeattribute as text/javascrip

SCRIPT TAG


23/493

In HTML 4.01, we specify the typeattribute as text/javascrip

SCRIPT TAG


24/493

The linktag in HTML 4.01:


25/493

The linktag in HTML 4.01:


26/493


TABLE OF CONTENTS

TABLE OF CONTENTS


27/493

! Existing HTML5 Tag Updates

TABLE OF CONTENTS

EXISTING HTML5 TAG UPDATES


28/493

presentationi b em stro

semantic




29/493

In HTML4, the iand btags were font style elements:

! The btag rendered a boldfont style

! The itag rendered an italicfont style



30/493



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




32/493

Example usage of the itag:

I hope this works, he thought.




33/493

Example usage of the itag:

I hope this works, he thought.




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




35/493

Example usage of the btag:

The event takes place this upcoming Saturday

over 3,000 people have already registered.




36/493

Example usage of the btag:

The event takes place this upcoming Saturday

over 3,000 people have already registered.




37/493

In HTML4:

! The strongtag meant strong emphasis

! The emtag meant emphasis




38/493

In HTML5, the emand strongtags have new meanings:

! The strongtag now means strong importance

! The emtag now means stress emphasis




39/493

Example usage of the emtag:

Make sure to sign up beforethe day of the event, S

16, 2013.




40/493

Make sure to sign upbeforethe day of the event, S

16, 2013.

Example usage of the emtag:




41/493

Make sure to sign upbeforethe day of the event,

September 16, 2013.

Example usage of the strongtag:




42/493

Example usage of the strongtag:

Make sure to sign up before the day of the event,

September 16, 2013.



43/493


44/493

Level 2 - HTML5 Elements


45/493


46/493

TABLE OF CONTENTS


47/493

! Section

TABLE OF CONTENTS

SECTION


48/493

SECTION

- W3C SPECIFICATION

sectiongeneric document or applicatsection

SECTION


49/493

- W3C SPECIFICATION

sectiongeneric document or applicatsection

SECTION

SECTION VS. DIV


50/493

SECTION VS. DIV

divsection

grouping togeth

thematically related content


51/493


52/493


53/493

SECTION


54/493

Example usage of the sectiontag:

The Gallery

SECTION


55/493

Example usage of the sectiontag:

The Gallery

The Gallery

THE DOCUMENT OUTLINE


56/493

document outline



57/493

! Article

! Aside! Nav

! Section

The following elements have their own self-contained outline



58/493

Take the following example:

This is the title of the page.

This is the title of a sub-section.



59/493

1. This is the title of the page.

1.1 This is the title of a sub-section.






60/493






61/493

1. This is the title of the page.

1.1 This is the title of a sub-section.




TABLE OF CONTENTS


62/493

! Section

TABLE OF CONTENTS


63/493

! Header

HEADER


64/493

- W3C SPECIFICATION

introductorynavigational aids

HEADER


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


66/493


67/493

HEADER


68/493

Example usage of the headertag:

HEADER


69/493

Example usage of the headertag:

HEADER


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


71/493




Example usage of the headertag within a section:

TABLE OF CONTENTS


72/493

! Header

TABLE OF CONTENTS


73/493

!

Footer

FOOTER


74/493

footerancesto

sectioning content section

root element- W3C SPECIFICATION

FOOTER


75/493

header footer

It should describe the content icontained within


76/493


77/493

E l f th f t t

FOOTER


78/493

Example usage of the footertag:


79/493

E l f th f t t ithi ti t

FOOTER


80/493




By "Author Name"

Example usage of the footertag within a sectiontag:

Example usage of the footer tag within a section tag

FOOTER


81/493




By "Author Name"

Example usage of the footertag within a sectiontag:

TABLE OF CONTENTS


82/493

! Footer

TABLE OF CONTENTS


83/493

! Aside

ASIDE


84/493

asidetangentially related

the content surrounding it

The aside now covers various contexts:

ASIDE


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


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


87/493

aside

article page


88/493


89/493

Example usage of the asidetag:

ASIDE


90/493

p g g

Example usage of the asidetag:

ASIDE


91/493

p g g

Example usage of the asidetag within a section:

ASIDE


92/493




Some secondary information.

By "Author Name"

p g g

Example usage of the asidetag within a section:

ASIDE


93/493




Some secondary information.

By "Author Name"

TABLE OF CONTENTS


94/493

! Aside

TABLE OF CONTENTS


95/493

! Nav

NAV


96/493

nav

a section with

navigation links- W3C SPECIFICATION

NAV


97/493

navmajor navigation


98/493


99/493


100/493

Example usage of the navtag:

NAV


101/493


102/493


103/493

TABLE OF CONTENTS


104/493

! Article

ARTICLE


105/493

article

independedistributable or reusable

- W3C SPECIFICATION

ARTICLE


106/493

articlesection

self-contained related conte

Determining if a particular piece of content is self-contained

ARTICLE


107/493

A bl

Some uses for the articletag:

ARTICLE


108/493

! A blog post

! A news story

! A comment on a post

! A review


109/493


110/493

Example usage of the articletag:

ARTICLE


111/493

Example usage of the articletag:

ARTICLE


112/493

TABLE OF CONTENTS


113/493

! Article

TABLE OF CONTENTS


114/493

! Main

MAIN


115/493

- W3C SPECIFICATION

main

MAIN


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


117/493

! Do notinclude the mainelement inside of an article, aside

footer, header, or navelement


118/493


119/493

Example usage of the maintag:

MAIN


120/493

Example usage of the maintag:

MAIN


121/493

TABLE OF CONTENTS


122/493

! Main

TABLE OF CONTENTS


123/493

! Figure/figcaption

FIGURE

figure


124/493

gu e

- W3C SPECIFICATION

A common use of the figuretag is for an image within an art

FIGURE


125/493

FIGCAPTION


126/493

- W3C SPECIFICATION

figcaptionfigure

Example usage of the figcaptiontag:

FIGCAPTION


127/493

This is a caption for the picture.

Example usage of the figcaptiontag:

FIGCAPTION


128/493

g

This is a caption for the picture.

FIGURE & FIGCAPTIONExample output of the figureand figcaptionelements:


129/493

TABLE OF CONTENTS


130/493

!

Figure/figcaption

TABLE OF CONTENTS


131/493

! Time

TIME

ti


132/493

time

- W3C SPECIFICATION


133/493


134/493

Example usage of the timetag:

2013-09-16

TIME


135/493


136/493


137/493

Example usage of the timetag:

2013-09-16

TIME


138/493

09/16/2013

We use the datetimeattribute to get our desired format:

TIME


139/493

datetime datetime precise datetime


140/493


141/493

Level 3 - HTML5 Forms

! New input types

! New form elements

! New form attributes

TABLE OF CONTENTS


142/493


! New input typesTABLE OF CONTENTS


143/493

! Search

! Email

HTML5 provides several new input types:

! Month

! Week

NEW INPUT TYPES


144/493

! Email

! URL

! Tel

! Number

! Range

!

Date

! Week

! Time

! Datetime

! Datetime-local

! Color

NEW INPUT TYPES


145/493

typetext


146/493


147/493


148/493

Example usage of the searchinput type:

SEARCH


149/493

Example usage of the searchinput type:

SEARCH


150/493

Example output of the searchinput type:SEARCH


151/493

Google Chrome 29

Mobile Safari keyboard with the searchinput type:SEARCH


152/493

SEARCHMobile Safari keyboard with the searchinput type:


153/493


154/493


155/493


156/493

Example usage of the emailinput type:

EMAIL


157/493

Example usage of the emailinput type:

EMAIL


158/493

Mobile Safari keyboard with the emailinput type:EMAIL


159/493

EMAILMobile Safari keyboard with the emailinput type:


160/493

url

URL


161/493

added usability on mobiledevices

URLMobile Safari keyboard with the urlinput type:


162/493


163/493

input

DATE


164/493

daa control for settthe elements value to a strirepresenting a date- W3C SPECIFICATION

Example usage of the dateinput type:

DATE


165/493

Example usage of the dateinput type:

DATE


166/493

Output of the dateinput type:

DATE


167/493

Google Chrome 29

Mobile Safari keyboard with the dateinput type:

DATE


168/493

TEL

tel


169/493

addedusability on mobile device


170/493

Example usage of the telinput type:

TEL


171/493

Mobile Safari keyboard with the telinput type:

TEL


172/493

num

NUMBER


173/493

precise control fsetting the elements value tostring representing a number

- W3C SPECIFICATION


174/493

Example usage of the numberinput type:

NUMBER


175/493

Output of the numberinput type:

NUMBER


176/493

Google Chrome 29

Mobile Safari keyboard with the numberinput type:

NUMBER


177/493

Mobile Safari keyboard with the numberinput type:

NUMBER


178/493

ran

RANGE


179/493

imprecise contfor setting the elements valua string representing a numb

- W3C SPECIFICATION

Example usage of the rangeinput type:

RANGE


180/493


181/493

Output of the rangeinput type:

RANGE


182/493

Google Chrome 29

Example usage of the month, weekinput types:

MONTH, WEEK


183/493

Output of the month, weekinput types:

MONTH, WEEK


184/493

Google Chrome 29


185/493

Output of the time, datetime-localinput type:

TIME, DATETIME-LOCAL


186/493

Google Chrome 29

datetime-local

t l f tti th

DATETIME-LOCAL VS. DATETIME


187/493

a control for setting thelements value to a stringrepresenting a local date and time

- W3C SPECIFICATION

colol ll t

COLOR


188/493

a color-well controsetting the elements value tostring representing a simple c

- W3C SPECIFICATION

Example usage of the colorinput type:

COLOR


189/493


190/493

! New input types

TABLE OF CONTENTS


191/493

! New form elements

TABLE OF CONTENTS


192/493

NEW FORM ELEMENTS

! Datalist

! Keygen

! Output

HTML5 provides new form elements:


193/493

! Datalist

HTML5 provides new form elements:

NEW FORM ELEMENTS


194/493

datalist

DATALIST


195/493

represent predefined optionfor other controls- W3C SPECIFICATION

Example usage of the datalistform element:

DATALIST


196/493


DATALIST


197/493


DATALIST


198/493


DATALIST


199/493

p p


200/493


201/493


202/493


TABLE OF CONTENTS


203/493


204/493


205/493

placeholder

inside hidden

PLACEHOLDER


206/493

inside hidden

returns


207/493


208/493


209/493

Example usage of the placeholderattribute:

PLACEHOLDER


210/493

PLACEHOLDER

Example of the placeholderattribute:


211/493

Google Chrome 29

autofocus

h

AUTOFOCUS


212/493

whenthe page is rendered

Example usage of the autofocusattribute:

AUTOFOCUS


213/493

Example output of the autofocusattribute:

AUTOFOCUS


214/493

Google Chrome 29

Example output of the autofocusattribute:

AUTOFOCUS


215/493

Google Chrome 29

required

REQUIRED


216/493

if the field is left blan

Example usage of the requiredattribute:

REQUIRED


217/493

Example of the requiredattribute:

REQUIRED


218/493

Google Chrome 29

pattern

JavaScript validate

PATTERN


219/493

JavaScript validateform field patt

Example usage of the patternattribute:

PATTERN


220/493


PATTERN


221/493


PATTERN


222/493

Google Chrome 29


223/493


224/493

! Border Radius

! Box Shadow

! Text Shadow

! Box Sizing

TABLE OF CONTENTS

! Multiple Backgrounds

! Color


225/493

! Color

! Opacity

! Gradients

! Border Radius

TABLE OF CONTENTS


226/493

border-radius

roundedb d

BORDER RADIUS


227/493

corners to borders


228/493

The base .boxelement well be working with:

.box{

background:grey;

height:50px;

width:200px;

}

BORDER RADIUS


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


230/493


.box{

}





BORDER RADIUS


231/493


.box{

}





BORDER RADIUS


232/493


233/493


.box{

}

border-radius:15px;

BORDER RADIUS


234/493


.box{

}

border-radius:4px15px12px10px;

BORDER RADIUS


235/493


.box{

}


BORDER RADIUS


236/493


.box{

}


BORDER RADIUS


237/493


border-radius:


238/493


border-radius:


239/493


border-radius:


240/493


border-radius:


241/493


border-radius:


242/493

border-radiuspercentages

BORDER RADIUS


243/493

percentages


.box{

}

border-radius:50%;

BORDER RADIUS


244/493


.box{

}

border-radius:50%;

BORDER RADIUS


245/493

! Border Radius

TABLE OF CONTENTS


246/493

! Box Shadow

TABLE OF CONTENTS


247/493

BOX SHADOW

box-shadow

shadow on anelement


248/493

element

Example usage of the box-shadowproperty:

.box{

}

box-shadow:1px 2px 2px #000;

BOX SHADOW


249/493


250/493


box-shadow:


251/493

If it is not specified (which is thedefault), a drop shadowis created,

?


box-shadow:


252/493

rather than an inset shadow.

BOX SHADOW

If it is not specified (which is thedefault), a drop shadowis created,


box-shadow:


253/493

rather than an inset shadow.

The shadowo!set x value


box-shadow:


254/493

o!set xvalue.


255/493

The blur-radiusalters the bluramount of the shadow, causingto become bigger and lighter


box-shadow:


256/493

to become biggerand lighter(with a larger value).


257/493


258/493


.box{

}


BOX SHADOW


259/493


.box{

}


No insetvalue is specified,so this is a drop shadow

BOX SHADOW


260/493

so this is a drop shadow.


.box{

}


A 1px o!set-xvalue.

BOX SHADOW


261/493


262/493

.box{

}

box-shadow:1px2px 2px#000;

A 2px blur-radius.


BOX SHADOW


263/493


264/493

.box{

}

box-shadow:1px2px 2px #000;


The drop shadowcolor is black

BOX SHADOW


265/493

color is black.

.box{

}



BOX SHADOW


266/493

blur-radiusspread-radius

BOX SHADOW


267/493



BOX SHADOW


268/493


box-shadow:1px 2px 0 2px #000;

BOX SHADOW


269/493


box-shadow: 1px 2px 02px #000;

BOX SHADOW


270/493

Example of the blur-radius andspread-radiusproperties:

BOX SHADOW


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


272/493


273/493


.box{

}

box-shadow:

1px 1px 2px #000,

inset1px 1px 2px blue;

BOX SHADOW


274/493


.box{

}

box-shadow:

1px 1px 2px #000,


BOX SHADOW


275/493


.box{

}

box-shadow:

1px 1px 2px #000,


BOX SHADOW


276/493


277/493

.box{

}

box-shadow:-1px-2px2px#000;

You can also specify negative values:

BOX SHADOW


278/493

! Box Shadow

TABLE OF CONTENTS


279/493

! Text Shadow

TABLE OF CONTENTS


280/493

text-shadowbox-shadow

it applies the shadow text

TEXT SHADOW


281/493

Example usage of the text-shadowproperty:

I have a shadow!

TEXT SHADOW


282/493


h1{

text-shadow:1px 2px 2px #000;

}

TEXT SHADOW


283/493


284/493


285/493

The shadowo!set xvalue.


text-shadow:

TEXT SHADOW


286/493

The shadowo!setyvalue.


text-shadow:

TEXT SHADOW


287/493

The blur-radiusalters the bluramount of the shadow, causingit to become biggerand lighter(with a larger value).

?


text-shadow:

TEXT SHADOW


288/493

( g )


289/493


h1{


}

TEXT SHADOW


290/493


h1{


}

A 1px o!set-xvalue.

TEXT SHADOW


291/493


h1{

text-shadow:1px2px2px #000;

}

A 2px o!set-yvalue.

TEXT SHADOW


292/493


h1{

text-shadow:1px2px 2px#000;

}

A 2px blur-radius.

TEXT SHADOW


293/493


h1{

text-shadow:1px2px 2px #000;

}

The drop shadowcolor is black.

TEXT SHADOW


294/493


295/493

! Text Shadow

TABLE OF CONTENTS


296/493

! Box Sizing

TABLE OF CONTENTS


297/493


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


299/493

The contentof the box is where the actual content,

the textand images, is located:

CONTENT

BOX MODEL REFRESHER


300/493

PADDING

The paddingclears the area around the content:

BOX MODEL REFRESHER

CONTENT


301/493

BORDER

The bordergoes around the paddingand content:

BOX MODEL REFRESHER

CONTENT

PADDING


302/493

MARGIN

The marginclears the area around the border:

BOX MODEL REFRESHER

CONTENT

BORDER

PADDING


303/493


304/493

Calculating the width of the .box:

300px

.box{width:300px; }

BOX MODEL REFRESHER


305/493

300px

.box{padding:10px; }


BOX MODEL REFRESHER

10px

10px

10px

10px


306/493

300px

.box{padding:10px; }


BOX MODEL REFRESHER

20px


307/493

300px

20px

.box{border:2px solid black; }


BOX MODEL REFRESHER

2px

2px

2px

2px


308/493

2px

300px

20px

.box{border:2px solid black; }


BOX MODEL REFRESHER

4px


309/493

.box{margin:20px; }


BOX MODEL REFRESHER

20px

4px

20px

20px

20px300px


310/493

20px


BOX MODEL REFRESHER

40px

20px

4px

.box{margin:20px; }

300px


311/493


BOX MODEL REFRESHER

40px

20px

4px

.box{margin:20px; }

300px


312/493


BOX MODEL REFRESHER

40px

20px

4px

.box{margin:20px; }

300px


313/493

300 + 20 + 4 = 324px


BOX MODEL REFRESHER

40px

20px

4px

300px


314/493

box-sizing

calculate widthand heights of given elements

BOX SIZING


315/493

! content-box

! padding-box

! border-box

There are three di!erent values for box-sizing:

BOX SIZING


316/493

default value

the contentthe border, margin, or paddin

CONTENT-BOX


317/493

width heightpadding

border marg

PADDING-BOX


318/493


.box {

border:2px solid black;

margin:20px;

padding:10px;

width:300px;

}

box-sizing:padding-box;

PADDING-BOX


319/493


.box {

border:2pxsolidblack;

margin:20px;

padding: 10px;

width:300px;

}

PADDING-BOX

box-sizing:padding-box;

MARGIN

CONTENT

PADDING


320/493


321/493


322/493


.box {

border:2px solid black;

margin:20px;

padding:10px;

width:300px;

}

BORDER-BOX

box-sizing:border-box;


323/493


.box {

border: 2px solid black;

margin:20px;

padding: 10px;

width:300px;

}

BORDER-BOX


MARGIN

CONTENT

PADDING


324/493


.box {

border: 2px solid black;

margin:20px;

padding: 10px;

width:300px;

}

300px

BORDER-BOX



325/493


326/493

! Box Sizing

TABLE OF CONTENTS


327/493


TABLE OF CONTENTS


328/493

multiple backgrounds

stacked inorder in which you specify th

MULTIPLE BACKGROUNDS


329/493

First, specify your background-images in a comma-delimited

.element{

background-image:url(bg1.png),url(bg2.png);

}



330/493

Then specify the background-positionfor each, in order:

.element{


}

background-position:top left,centerright;



331/493

Finally, specify the background-repeatfor each:

.element{


}

background-position:top left,centerright;

background-repeat:no-repeat,no-repeat;



332/493



333/493



334/493

You can also use the shorthand background:

.element{

}

background:

url(bg1.png)top left no-repeat,



335/493


336/493

TABLE OF CONTENTS



337/493

!

Color

TABLE OF CONTENTS


338/493

! RGBa

! HSLa

CSS3 provides multiple ways to work with color:

COLOR


339/493

RGBred green b

RGBarepresents the opacity of a color

RGBa


340/493


341/493

Example usage of rgba:

.element{

color:rgba(0,0,0,0.75);

}

RGBa


342/493


.element{

color: rgba(0,0,0, 0.75);

}

RGBa


343/493


.element{

color: rgba(0, 0, 0, 0.75);

}

RGBa


344/493

HSLa HueSaturation Lightness

hue saturation

lightnessalpha opacity of the

HSLa


345/493

Example usage of hsla:

.element{

}

color:hsla(240,100%,50%,0.75);

HSLa


346/493


.element{

}

color: hsla(240, 100%, 50%, 0.75);

The huevalue.

HSLa


347/493


.element{

}

color: hsla(240,100%, 50%, 0.75);

The saturationvalue.

HSLa


348/493


.element{

}

color: hsla(240, 100%, 50%, 0.75);

The lightnessvalue.

HSLa


349/493


.element{

}

color: hsla(240, 100%, 50%, 0.75);

The alphavalue.

HSLa


350/493

HSLaRGBa

HSLa + RGBa


351/493

HSLaRGBa

HSLa + RGBa


352/493

TABLE OF CONTENTS

!

Color


353/493

! Opacity

TABLE OF CONTENTS


354/493

OPACITY

opacity

opacity


355/493

Example usage of the opacityproperty:

.element{

}

opacity:0.45;

OPACITY


356/493

Example usage of the opacityproperty:

.element{

}

opacity:0.45;

OPACITY


357/493

Example output of the opacityproperty:

OPACITY


358/493

Example output of the opacityproperty:

OPACITY


359/493

OPACITY

Opacityall elements that

are nested inside


360/493


361/493

OPACITY

Hello.

Example output of the opacityproperty with nested elements


362/493

OPACITY



363/493

OPACITY



364/493

TABLE OF CONTENTS

! Opacity


365/493

! Gradients

TABLE OF CONTENTS


366/493

GRADIENTS

gradients smoo

transitions between two omore colors


367/493

! Linear gradients! Radial gradients

There are two types of gradients that browsers support:

GRADIENTS


368/493

linear gradientstarting

point ending pointoptional stop-color points

LINEAR GRADIENT


369/493

Example usage of a linear-gradient:

.element{

background:linear-gradient(to bottom,red,yellow);

}

LINEAR GRADIENT


370/493


.element{


}

LINEAR GRADIENT


371/493


linear-gradient( to , s)

LINEAR GRADIENT


372/493


linear-gradient( to , s)

LINEAR GRADIENT

We can specify the

direction through anangleor a keyword.

?


373/493

The angleis generally

a degree (e.g. 45deg).

?


linear-gradient(to , s)

LINEAR GRADIENT


374/493

Horizontal: leftor right

Vertical: topor bottom

The side-or-corner

consists of two keywords:

?



LINEAR GRADIENT


375/493

The color-stops consists ofcolor and an optional stopposition, which can be eitha percentageor length.



LINEAR GRADIENT


376/493


.element{

}


LINEAR GRADIENT


377/493


.element{

}


No angle is specified.

LINEAR GRADIENT


378/493


.element{

}

background: linear-gradient(to bottom, red, yellow);

The side-or-cornerisbottom, which makesthe gradient go fromthe top to the bottom.

LINEAR GRADIENT


379/493

LINEAR GRADIENT


.element{

}


The side-or-angleisbottom, which makesthe gradient go fromthe top to the bottom.

KEYWORDS


380/493


.element{

}


LINEAR GRADIENT


381/493


.element{

}


LINEAR GRADIENT


382/493


.element{

}


The top of thegradient starts at red.

LINEAR GRADIENT


383/493


.element{

}


The gradient ends atyellowat the bottom.

LINEAR GRADIENT


384/493

radial gradient lineagradientextends from an origin

extending outwin a circular or elliptical shape

RADIAL GRADIENT


385/493


386/493

Example usage of a radial-gradientin its simplest form:

.element{ background:

radial-gradient(aqua,blue);

}

RADIAL GRADIENT


387/493




}

RADIAL GRADIENT


388/493




}

RADIAL GRADIENT


389/493

Example usage of a radial-gradient:

RADIAL GRADIENT

radial-gradient( at , s)


390/493

Specify the shapeor sizeof the gradient.

?


RADIAL GRADIENT

radial-gradient(at , s)


391/493

The shape of the gradient;circleor ellipse. Thedefault is ellipse.


RADIAL GRADIENT



392/493

The size of the gradient,which consist of keywords.

?



RADIAL GRADIENT


393/493


?



RADIAL GRADIENT

KEYWORDS


394/493


?



RADIAL GRADIENT

farthest-corner

KEYWORDS


395/493

The size can also be alengthor percentage.

?



RADIAL GRADIENT


396/493

Same as background-

position. Default is center.

?


RADIAL GRADIENT

radial-gradient( at, s)


397/493

The color-stops consistsa color and an optional

stop position, which canbe either a percentageolength.


RADIAL GRADIENT

radial-gradient( at ,s)


398/493


.element{

}

background:radial-gradient(circle at top left,aqua,blue);

RADIAL GRADIENT


399/493


.element{

}

The shapeof thegradient is circle,rather than ellipse.

RADIAL GRADIENT

background:radial-gradient(circle at top left, aqua, blue);


400/493


.element{

}

The positionof thegradient is topleft.

RADIAL GRADIENT

background:radial-gradient(circle at top left, aqua, blue);


401/493


.element{

}

The first color-stois aqua.

RADIAL GRADIENT

background:radial-gradient(circle at top left,aqua, blue);


402/493


.element{

}

The last coloris blue.

RADIAL GRADIENT

background:radial-gradient(circle at top left, aqua,blue);


403/493

Example output of the radial-gradient:

RADIAL GRADIENT


404/493


405/493

Level 5 - Fonts & Interactions


406/493

! Transforms

! Transitions

TABLE OF CONTENTS

! Progressive Enhancement

! Font Face


407/493

! Font Face

TABLE OF CONTENTS


408/493

@font-face

FONT FACE


409/493

Example usage of @font-face:

@font-face{

}

FONT FACE


410/493


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


412/493

We add the location of the font files through the srcproperty

@font-face{

}



FONT FACE


413/493


414/493

We specify the font-weight:

@font-face{

}

font-weight:normal;

font-style:normal;



FONT FACE


415/493

Using @font-facein our stylesheet:

h1{


}

FONT FACE


416/493

Using @font-facein our stylesheet:

h1{


}

FONT FACE


417/493

@font-face

fallback fonts

FONT FACE


418/493

Using @font-facein our stylesheet with fallbacks:

h1{

}

font-family:'OpenSansRegular',Helvetica,Arial,sans-serif;

FONT FACE


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;

}


420/493


421/493


FONT FACE

h1{


}


422/493

FONT FACE


423/493


FONT FACE

@font-face{



font-style:normal;

font-weight:normal;

}

FONT FACE


424/493


FONT FACE

@font-face {

src: url('OpenSansBold-webfont.eot');

font-style: normal;

font-weight: normal;

}


FONT FACE


425/493


FONT FACE

@font-face {


font-style: normal;

font-weight: normal;

}

font-family: 'OpenSansRegular';

FONT FACE


426/493


FONT FACE

@font-face {

font-family: 'OpenSansRegular';

src: url('OpenSansBold-webfont.eot');

font-style: normal;

}

font-weight:bold;

FONT FACE


427/493


FONT FACE

h1{

font-weight:bold;

}

TABLE OF CONTENTS


428/493

TABLE OF CONTENTS

! Font Face

TABLE OF CONTENTS


429/493

! Transforms

TABLE OF CONTENTS

TRANSFORM


430/493

transform

translate rotate scale

skew

TRANSFORM

TRANSLATE


431/493

You can create a 2D translation using transform:

.element{

transform:translate(20px,30px);

}

TRANSLATE

TRANSLATE


432/493


.element{

transform: translate(20px, 30px);

}

TRANSLATE

TRANSLATE


433/493


.element{

transform: translate(20px, 30px);

}

TRANSLATE

TRANSLATE


434/493

TRANSLATE

Example output of the transform translate:

TRANSLATE


435/493

Example usage of a 2D translation using transform:

translate(, )

TRANSLATE

TRANSLATE


436/493

A for the x-axis, which

can be either a lengthor percentage.


translate(, )

TRANSLATE

TRANSLATE


437/493

A for they-axis, which can be either

a lengthor percentage. Ifnot specified, the value is 0.

?


translate(,)

TRANSLATE

TRANSLATE


438/493

You can use translateXand translateYto translatethe xandyvalues individ

.element{

transform:translateX(20px);}

.element{

transform:translateY(30px);

}

TRANSLATE

TRANSLATE


439/493

You can use translateXand translateYto translatethe xandyvalues individ

translateX()

translateY()

TRANSLATE

ROTATE


440/493

rotate

origin angl

ROTATE

ROTATE


441/493

Example usage of rotate:

.element{

} transform:rotate(45deg);

ROTATE

ROTATE


442/493

Example usage of rotate:

.element{

} transform: rotate(45deg);

ROTATE

ROTATE


443/493

ROTATE

Example output of the transform rotate:

SCALE


444/493

With scale, you can do a 2D scale by a specified unitless num

.element{

} transform:scale(1.2);

SCALE

SCALE


445/493

With scale, you can do a 2D scale by a specified unitless num

.element{

} transform: scale(1.2);

SCALE

SCALE


446/493

SCALE

Example output of the transform scale:

SCALE


447/493

Exampled usage of scale:

scale(, )

SCALE

SCALE


448/493

A unitless numberfor the x-axis.


scale(, )

SCALE


449/493

A unitless number for they-axis. If not specified, itdefaults to the value of

.

?


scale(, )

SCALE


450/493

You can use scaleXand scaleYto translatethe xandyvalues ind

.element{

transform:scaleX(1.2);}

.element{

transform:scaleY(0.3);

}


451/493

SKEW


452/493

skewx y

angle

SKEW


453/493

Example usage of skewX:

.element{

} transform:skewX(-25deg);

SKEW


454/493


.element{

} transform: skewX(-25deg);

SKEW


455/493

Example output of the transform skewX:

SKEW


456/493


skewX()

SKEW


457/493

An for the x-axis.


skewX()

SKEW


458/493

Example usage of skewY:

skewY()

SKEW


459/493

An for they-axis.

Example usage of skewY:

skewY()

SKEW


460/493

.element{

transform:skewX(25deg);}

.element{

transform:skewY(-85deg);

}

Example usage of skewXand skewY:

SKEW


461/493

Example output of the transform skewX andskewY:

TABLE OF CONTENTS


462/493

! Transforms

TABLE OF CONTENTS


463/493

!

Transitions

TRANSITION


464/493

transitionstransit

between two states of a

specified element

TRANSITION


465/493

Example usage of transition:

.element{

}

background-color:black;

TRANSITION


466/493

.element{

}

background-color:black;


.element:hover{

background-color:blue;

}

TRANSITION


467/493


.element{

}

transition:background-color 0.2s ease-in-out; background-color:black;

.element:hover{

background-color:blue;

}

TRANSITION


468/493


.element {

}

transition:background-color 0.2s ease-in-out; background-color: black;

.element:hover {

background-color: blue;

}

TRANSITION


469/493

Example output of the transition:

TRANSITION


470/493

Example usage of the shorthand transitionproperty:

transition:

TRANSITION


471/493

The CSS property youwant to transition.

?


transition:

l f h h h d i i

TRANSITION


472/493

The durationof thetransition. The defaultvalue is 0s, or 0 seconds.

?


transition:

E l f th h th d t iti t

TRANSITION


473/493


transition:

The timing of thetransitionitself.

?


TRANSITION


474/493


transition:

The timing of thetransitionitself.

?

TIMING-FUNCTIONS

! ease

! ease-in

! ease-in-out

! linear

! cubic-bezier

! step-start

! step-end

! steps()


TRANSITION


475/493

The amount of time tobetween the change tbeing requested on a

property, and the startransition.


transition:

You can set the transition values individually as well

TRANSITION


476/493

You can set the transitionvalues individually, as well:

.element{

}

You can set the transition values individually as well:

TRANSITION


477/493


.element{

}

transition-property:background-color;


TRANSITION


478/493

.element{

}

transition-duration:0.2s;




TRANSITION


479/493

.element{

}

transition-timing-function:ease-in-out;





TRANSITION


480/493

.element{

}

transition-delay:0.1s;

transition-timing-function:ease-in-out;




TRANSITION


481/493

all transitionproperty transitio

Example usage of transition using the all property:

TRANSITION


482/493

Example usage of transition using theallproperty:

.element{

background-color:black; color:white;

}

.element:hover{

background-color:grey; color:black;

}


TRANSITION


483/493


.element{

background-color:black; color:white;

}

.element:hover{

background-color:grey; color:black;

}

transition: all 0.2s ease-in-out;


TRANSITION


484/493


.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:


485/493

p p g p p y

TABLE OF CONTENTS


486/493

! Transitions

TABLE OF CONTENTS


487/493

! Progressive Enhancement

PROGRESSIVE ENHANCEMENT


488/493

progressive enhanceme

add to

detract from

Example of progressive enhancement:



489/493

.element{

background:#ccc;

border-radius:10px;

box-shadow:0 1px 1px rgba(0,0,0,0.75);

}

Example of progressive enhancement:



490/493

.element{

background:#ccc;

border-radius:10px;

box-shadow:0 1px 1px rgba(0,0,0,0.75);

}


491/493


492/493


493/493

code school - front-end formations

Documents