css3 refresher

73
CSS3 Refresher Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta

Upload: ivano-malavolta

Post on 14-Dec-2014

1.403 views

Category:

Education


5 download

DESCRIPTION

Mobile applications Development - Lecture 11 CSS3 Refresher This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy). http://www.di.univaq.it/malavolta

TRANSCRIPT

Page 1: CSS3 Refresher

CSS3 Refresher

Ivano MalavoltaIvano Malavolta

[email protected]

http://www.di.univaq.it/malavolta

Page 2: CSS3 Refresher

Roadmap

• Intro

• Basics• Basics

• Selectors

• Box Model

• Positioning & Floats

• Fonts• Fonts

• Visual Effects

• Media Queries

Page 3: CSS3 Refresher

Intro

CSS3 is the presentation companion of HTML5

Page 4: CSS3 Refresher

Intro

Let’s imagine Flipboard without CSS3

Page 5: CSS3 Refresher

Intro

Its features are

supported by almost any

mobile browser

Page 6: CSS3 Refresher

CSS3 Main Drivers

SimplicitySimplicitySimplicitySimplicity– less images– less images– less markup– less Javascript– less Flash

BetterBetterBetterBetter performanceperformanceperformanceperformance– fewer HTTP requests– fewer HTTP requests

BetterBetterBetterBetter SearchSearchSearchSearch EngineEngineEngineEngine PlacementPlacementPlacementPlacement– text as real text, not images or Flash– speed

Page 7: CSS3 Refresher

Roadmap

• Intro

• Basics• Basics

• Selectors

• Box Model

• Positioning & Floats

• Fonts• Fonts

• Visual Effects

• Media Queries

Page 8: CSS3 Refresher

Basics

GenericGenericGenericGeneric SyntaxSyntaxSyntaxSyntax::::

selector {

property: value;

property2: value2, value3;

......

}

Page 9: CSS3 Refresher

Inheritance

If an HTML element BBBB is nested into another element AAAA -� B inherits the style of A� B inherits the style of A

unless B has an explicit style definition

body {

background-color: red;

}

div {

background-color: green;

}

Page 10: CSS3 Refresher

Combining Selectors

Selectors can be combined

h1, h2, h3 {

background-color: red;

}

Page 11: CSS3 Refresher

Lists

div {

list-style-image: url(image.png);list-style-image: url(image.png);

list-style-position: inside;

list-style-style: circle;

}Style

disc | circlesquare | decimal

Positioninside | outside

square | decimallower-roman |upper-roman |lower-alpha |upper-alpha |

none

Page 12: CSS3 Refresher

Backgrounds

You can style a background of any element

div {

background:url(img.png), url(img2.png);

background-size:80px 60px;

background-repeat:no-repeat;

background-origin:content-box;background-origin:content-box;

}

repeatno-repeat | repeatrepeat-x | repeat-y

origintop left | top center | top right | center left | border-box | content-box etc.

Page 13: CSS3 Refresher

Background & Colors

div {

background-color: blue;background-color: blue;

background-color: rgba(0, 0, 255, 0.2);

background-color: hsla(240, 100%, 50%, 0.2);

}

RGBA = RGB + opacityHSL RGBA = RGB + opacity

HSLA = HSL + opacity

HSLhue

saturationlightness

Page 14: CSS3 Refresher

Gradients

They can be used in every place you can use an image

div {

background: -webkit-gradient(linear, right top,

left bottom, from(white), to(black));

}

linear� the type of gradient (also radial, or repeating-linear)linear� the type of gradient (also radial, or repeating-linear)

right-top� start of the gradient

left-bottom� end of the gradient

from� starting color

to� final color

Page 15: CSS3 Refresher

Text

p {

color: grey;Text-alignleft | rightcolor: grey;

letter-spacing: 5px;

text-align: center;

text-decoration: underline;

text-indent: 10px;

text-transform: capitalize;

left | rightcenter | justify

Text-decorationtext-transform: capitalize;

word-spacing: 10px;

}

Text-decorationnone

underlineoverline

line throughtext-transform

None | capitalize | Lowercase | uppercase

Page 16: CSS3 Refresher

Text Effects

p {

text-shadow: 2px 10px 5px #FF0000;text-shadow: 2px 10px 5px #FF0000;

text-overflow: ellipsis;

word-wrap:break-word;

}

2px � horizontal shadow10px � vertical shadow10px � vertical shadow5px � blur distance#FF0000 � color

Page 17: CSS3 Refresher

Other Text Properties

Page 18: CSS3 Refresher

Roadmap

• Intro

• Basics• Basics

• Selectors

• Box Model

• Positioning & Floats

• Fonts• Fonts

• Visual Effects

• Media Queries

Page 19: CSS3 Refresher

Selectors

Classical ways to select elements in CSS2:

• by typetypetypetypea { color: red; }

• by idididid#redLink { color: red; }

• by classclassclassclass• by classclassclassclass....redLink { color: red; }

Page 20: CSS3 Refresher

Other Selectors from CSS1 & CSS2

• div pdiv pdiv pdiv p � all <p> elements inside a <div>

• div>pdiv>pdiv>pdiv>p � all <p> elements where the parent is a <div> • div>pdiv>pdiv>pdiv>p � all <p> elements where the parent is a <div>

• div+pdiv+pdiv+pdiv+p � all <p> elements that are placed immediately after <div>

• [target][target][target][target] � all elements with a target attribute

• [target=_blank][target=_blank][target=_blank][target=_blank] � all elements with target= "_blank“"_blank“

• p:firstp:firstp:firstp:first----childchildchildchild � every <p> element that is the first child of its parent

Page 21: CSS3 Refresher

Some selectors introduced in CSS3

• a[a[a[a[srcsrcsrcsrc^="https"] ^="https"] ^="https"] ^="https"] � every <a> element whose srcattribute value begins with "https”attribute value begins with "https”

• a[a[a[a[srcsrcsrcsrc$=".$=".$=".$=".pdfpdfpdfpdf"] "] "] "] � every <a> element whose src attribute value ends with ".pdf”

• a[a[a[a[srcsrcsrcsrc*=“mobile"] *=“mobile"] *=“mobile"] *=“mobile"] � every <a> element whose srcattribute value contains the substring “mobile“

• p:nthp:nthp:nthp:nth----child(2) child(2) child(2) child(2) � every <p> element that is the second • p:nthp:nthp:nthp:nth----child(2) child(2) child(2) child(2) � every <p> element that is the second child of its parent

• p:nthp:nthp:nthp:nth----lastlastlastlast----child(2) child(2) child(2) child(2) � every <p> element that is the second child of its parent, counting from the last child

• :not(p) :not(p) :not(p) :not(p) � every element that is not a <p> element

Page 22: CSS3 Refresher

Roadmap

• Intro

• Basics• Basics

• Selectors

• Box Model

• Positioning & Floats

• Fonts• Fonts

• Visual Effects

• Media Queries

Page 23: CSS3 Refresher

The Box Model

All HTML elements can be considered as boxesboxesboxesboxes

Page 24: CSS3 Refresher

Borders & dimensions

div {

width: 100px;width: 100px;

height: 40px;

padding: 10px;

border: 5px solid gray;

margin: 10px;

border-radius: 10px;

box-shadow: 10px 10px 5px red;box-shadow: 10px 10px 5px red;

}

Page 25: CSS3 Refresher

Images as borders

div {

border-image:url(border.png) 30 30 round;border-image:url(border.png) 30 30 round;

}

Page 26: CSS3 Refresher

Roadmap

• Intro

• Basics• Basics

• Selectors

• Box Model

• Positioning & Floats

• Fonts• Fonts

• Visual Effects

• Media Queries

Page 27: CSS3 Refresher

The Display Property

It specifies if/how an element is displayed

div {

display: none;

}

The element will be hidden, and the page will be The element will be hidden, and the page will be displayed as if the element is not there

Page 28: CSS3 Refresher

The Display Property

Other usual values:

blockblock

• a block element is an element that takes up the full width available, and has a line break before and after it

inline

• an inline element only takes up as much width as necessary• it can contain only other inline elements

inline-block

• the element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element– you can set width and height, top and bottom margins and paddings

Page 29: CSS3 Refresher

Flex Box

It helps in styling elements to be arranged horizontally or verticallyvertically

box:

• a new value for the display property• a new property box-orient

#div {

display: box;

box-orient: horizontal;

}

Page 30: CSS3 Refresher

Flex Box main elements

display: box

opts an element and its immediate children into the opts an element and its immediate children into the flexible box model

box-orient

Values: horizontalhorizontalhorizontalhorizontal | vertical | inheritHow should the box's children be alignedalignedalignedaligned?

box-direction

Values: normalnormalnormalnormal | reverse | inheritsets the orderorderorderorder in which the elements will be displayed

Page 31: CSS3 Refresher

Flex Box main elements

box-pack

Values: startstartstartstart | end | center | justifyValues: startstartstartstart | end | center | justify

Sets the alignment of the box along the box-orient axis

box-orient: horizontal;

box-pack: end;box-pack: end;

Page 32: CSS3 Refresher

Flex Box main elements

box-align

Values: start | end | center | baseline | stretchstretchstretchstretchValues: start | end | center | baseline | stretchstretchstretchstretch

Sets how the box's children are aligned in the box

box-orient: horizontal;

box-align: center;box-align: center;

Page 33: CSS3 Refresher

Flex Box Children

by default child elements are not flexible

� their dimension is set according to their width

box-flex can be set to any integer

It sets how a child element occupy the

box’s space#box1 {

width: 100px;

}

#box2 {

box-flex: 1;box-flex: 1;

}

#box3 {

box-flex: 2;

}

Page 34: CSS3 Refresher

The visibility Property

It specifies if an element should be visible or hidden

div.hidden {

visibility: hidden;

}

The element will be hidden, but still affect the layout

It can also be set tovisible, collapse, inherit

Page 35: CSS3 Refresher

Positioning

• Static

• Relative• Relative

• Absolute

• Fixed

• Inherit

Page 36: CSS3 Refresher

Static Positioning

Elements will stack one on top of the next

http://bit.ly/I8cEaF

Page 37: CSS3 Refresher

Relative Positioning

Elements behave exactly the same

way as statically positioned elementsway as statically positioned elements

we can adjust a relatively positioned

element with offset properties:

top,top,top,top, right,right,right,right, bottom, andbottom, andbottom, andbottom, and leftleftleftleft

http://bit.ly/I8cEaF

Page 38: CSS3 Refresher

Relative Positioning

It is possible to create a coordinate system for child elementselements

http://bit.ly/I8cEaF

Page 39: CSS3 Refresher

Absolute Positioning

an absolutely positioned element is removed from the normal flownormal flow

it won’t affect or be

affected by any other

element in the flow

http://bit.ly/I8cEaF

Page 40: CSS3 Refresher

Fixed Positioning

shares all the rules of an absolutely positioned element

http://bit.ly/I8cEaF

a fixed element does not scroll with the document

Page 41: CSS3 Refresher

Inherit Positioning

The element inheritsinheritsinheritsinherits the value of its parent element

Typically, position property elements do not naturally inherit their parent’s values � the static value is assigned if no position value is given

http://bit.ly/I8cEaF

Page 42: CSS3 Refresher

Float

A floated element will move as far to the left or will move as far to the left or will move as far to the left or will move as far to the left or right as it canright as it canright as it canright as it canright as it canright as it canright as it canright as it can

Elements are floated only horizontallyhorizontallyhorizontallyhorizontally

The float CSS property can accept one of 4 values:

left,left,left,left, right,right,right,right, none, andnone, andnone, andnone, and inheritinheritinheritinherit

Page 43: CSS3 Refresher

Float

The elements before the floating element will not be affectedaffected

The elements after the floating element will flow around it

- to avoid this, use the clearclearclearclear property

Generally, a floated element should have an explicitly set explicitly set explicitly set explicitly set Generally, a floated element should have an explicitly set explicitly set explicitly set explicitly set widthwidthwidthwidth

For a deeper explanation of CSS float: http://bit.ly/I8cAb5

Page 44: CSS3 Refresher

Roadmap

• Intro

• Basics• Basics

• Selectors

• Box Model

• Positioning & Floats

• Fonts• Fonts

• Visual Effects

• Media Queries

Page 45: CSS3 Refresher

Fonts

Before CSS3, web designers had to use fonts that were already installed on the user's devicealready installed on the user's device

With CSS3, web designers can use whatever font they like

@font-face {

font-family: NAME;

src: url(Dimbo.ttf);

font-weightnormalboldsrc: url(Dimbo.ttf);

font-weight: normal;

font-style: normal;

}

font-stylenormalitalicoblique

bold100200…

Page 46: CSS3 Refresher

Fonts Usage

To use the font for an HTML element, refer to the name of the font (NAME) through the fontfontfontfont----familyfamilyfamilyfamilyof the font (NAME) through the fontfontfontfont----familyfamilyfamilyfamilyproperty

div {

font-family: NAME;font-family: NAME;

}

Page 47: CSS3 Refresher

Some Fonts Sources...

www.dafont.com

www.urbanfonts.comwww.urbanfonts.com

www.losttype.com

Page 48: CSS3 Refresher

Roadmap

• Intro

• Basics• Basics

• Selectors

• Box Model

• Positioning & Floats

• Fonts• Fonts

• Visual Effects

• Media Queries

Page 49: CSS3 Refresher

Visual Effects

Three main mechanisms:

1.1.1.1. TransformsTransformsTransformsTransforms ((((bothbothbothboth 2D and 3D)2D and 3D)2D and 3D)2D and 3D)

2.2.2.2. TransitionsTransitionsTransitionsTransitions

3.3.3.3. AnimationsAnimationsAnimationsAnimations

Page 50: CSS3 Refresher

Transforms

A transform is an effect that lets an element

change shape, size, positionshape, size, positionshape, size, positionshape, size, position, … change shape, size, positionshape, size, positionshape, size, positionshape, size, position, …

You can transform your elements using 2D or 3D transformations

http://bit.ly/IroJ7S

Page 51: CSS3 Refresher

Transforms

http://bit.ly/IrpUnX

Page 52: CSS3 Refresher

Transforms

http://bit.ly/IrpUnX

Page 53: CSS3 Refresher

Transitions

They are used to add an effect when changing from onestyle to anotherstyle to another

The effect can be gradualgradualgradualgradual

A transition is composed of 2 parts:1. The CSS property to add the effect2. The duration of the effect

The effect will start when the specified CSS property changes value

Page 54: CSS3 Refresher

Transition syntax

A transition contains 4 properties:

• propertypropertypropertyproperty• propertypropertypropertyproperty– the name of the CSS property the transition effect is for (can be all)

• durationdurationdurationduration– how many seconds (or milliseconds) the transition effect takes to completetakes to complete

• timingtimingtimingtiming----functionfunctionfunctionfunction– linear, ease, ease-in, ease-out, ease-in-out

• delaydelaydelaydelay– when the transition effect will start

Page 55: CSS3 Refresher

Example

.imageThumbnail {

width; 200px;

transition: all ease-in 3s;transition: all ease-in 3s;

}

.zoomed {

position: absolute;

left: 0px;

top: 0px;top: 0px;

width: 480px;

}

$(‘.imageThumbnail’).addClass(‘zoomed’);

Page 56: CSS3 Refresher

Animations

An animation is an effect that lets an element gradually element gradually element gradually element gradually change from one style to anotherchange from one style to anotherchange from one style to anotherchange from one style to another

You can change style in loop, repeating, etc.

To bindbindbindbind an animation to an element, you have to specify at least:

1. Name of the animation1. Name of the animation

2. Duration of the animationdiv {

animation: test 5s ease-in;

}

Page 57: CSS3 Refresher

Animation Definition

An animation is defined in a keyframekeyframekeyframekeyframe

It splits the animation into parts, and assign a specific style to each part

The various steps within an animation are given as percentuals

0% � beginning of the animation (from)

100% � end of the animation (to)

Page 58: CSS3 Refresher

Example

@keyframes test{

0% {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

results inresults in

http://bit.ly/IrtfTYhttp://bit.ly/IrtfTYhttp://bit.ly/IrtfTYhttp://bit.ly/IrtfTY

Page 59: CSS3 Refresher

Animation Properties

http://bit.ly/IrpUnX

Page 60: CSS3 Refresher

Transitions VS Animations

• Trigger– Transitions must be bound to a CSS property change– Transitions must be bound to a CSS property change

– Animations start autonomously

• States– Transitions have start and end states

– Animations can have multiple states

• Repeats• Repeats– Transitions can be perfomed once for each activation

– Animations can be looped

Page 61: CSS3 Refresher

Roadmap

• Intro

• Basics• Basics

• Selectors

• Box Model

• Positioning & Floats

• Fonts• Fonts

• Visual Effects

• Media Queries

Page 62: CSS3 Refresher

Media Types

Media Queries are based on Media Media Media Media TypesTypesTypesTypes

A media type is a specification of the actualactualactualactual media media media media thatis being used to access the page

Examples of media types include

• screenscreenscreenscreen: computer screens

• printprintprintprint: printed document

• braillebraillebraillebraille: for Braille-based devices

• tvtvtvtv: for television devices

Page 63: CSS3 Refresher

Media Types

There are two main ways to specify a media type:

• <link> <link> <link> <link> in the HTML page• <link> <link> <link> <link> in the HTML page

<link rel=“stylesheet”

href=“style.css” media=“screen” />

• @media@media@media@media within the CSS file

@media screen {

div { color: red; }

}

Page 64: CSS3 Refresher

Media Queries

TheyTheyTheyThey allowallowallowallow youyouyouyou totototo totototo change style based on specific change style based on specific change style based on specific change style based on specific conditionsconditionsconditionsconditionsconditionsconditionsconditionsconditions

For example, they can be about

• device’s display sizedisplay sizedisplay sizedisplay size

• orientationorientationorientationorientation of the device

• ResolutionResolutionResolutionResolution of the display

• ...

Page 65: CSS3 Refresher

Example

http://bit.ly/I5mR1u

Page 66: CSS3 Refresher

Media Queries

A media query is a booleanbooleanbooleanboolean expressionexpressionexpressionexpression

The CSS associated with the media query expression isapplied only if it evaluates to true

A media query consists of1. a media type1. a media type2. a set of media features

@media screen and orientation: portrait

Page 67: CSS3 Refresher

The Full Media Feature List

http://slidesha.re/I5oFHZ

Page 68: CSS3 Refresher

The AND operator

You can combine multiple expressions by usingthe andandandand operatorthe andandandand operator

@media screen and (max-device-width: 480px){

/* your style */

}

Page 69: CSS3 Refresher

The COMMA operator

The comma keyword acts as an orororor operator

@media screen and (color),

handheld and (color) {

/* your style */

}

Page 70: CSS3 Refresher

The NOT operator

You can explicitly ignore a specific type of device byusing the notnotnotnot operatorusing the notnotnotnot operator

@media not (width:480px) {

/* your style */

}

Page 71: CSS3 Refresher

The ONLY expression

It is used to “hidehidehidehide” the CSS to older browsers that can read media types but cannot handle media queriesread media types but cannot handle media queries

In this case the styling information will not be visible tothose browsers

@media only screen@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Styles */

}

Smartphones(portrait and landscape)

Page 72: CSS3 Refresher

Examples

Retina Displays@media only screen and -webkit-min-device-pixel-ratio: 2@media only screen and -webkit-min-device-pixel-ratio: 2

iPad in landscape orientation@media only screen and

(device-width: 768px) and (orientation: landscape)

iPhone and Android devicesiPhone and Android devices@media only screen and

(min-device-width: 320px) and (max-device-width: 480px)

Page 73: CSS3 Refresher

References

http://www.w3schools.com