Mobile applications Development - Lecture 11

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Roadmap • Intro • Basics • Basics • Selectors • Box Model • Positioning & Floats • Fonts • Fonts • Visual Effects • Media Queries

Slide 3

Slide 3 text

Intro CSS3 is the presentation companion of HTML5

Slide 4

Slide 4 text

Intro Let’s imagine Flipboard without CSS3

Slide 5

Slide 5 text

Intro Its features are supported by almost any mobile browser

Slide 6

Slide 6 text

CSS3 Main Drivers Simplicity Simplicity Simplicity Simplicity – less images – less images – less markup – less Javascript – less Flash Better Better Better Better performance performance performance performance – fewer HTTP requests – fewer HTTP requests Better Better Better Better Search Search Search Search Engine Engine Engine Engine Placement Placement Placement Placement – text as real text, not images or Flash – speed

Slide 7

Slide 7 text

Roadmap • Intro • Basics • Basics • Selectors • Box Model • Positioning & Floats • Fonts • Fonts • Visual Effects • Media Queries

Slide 8

Slide 8 text

Basics Generic Generic Generic Generic Syntax Syntax Syntax Syntax: :: : selector { property: value; property2: value2, value3; ... ... }

Slide 9

Slide 9 text

Inheritance If an HTML element B B B B is nested into another element A A A A - 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; }

Slide 10

Slide 10 text

Combining Selectors Selectors can be combined h1, h2, h3 { background-color: red; }

Slide 11

Slide 11 text

Lists div { list-style-image: url(image.png); list-style-image: url(image.png); list-style-position: inside; list-style-style: circle; } Style disc | circle square | decimal Position inside | outside square | decimal lower-roman | upper-roman | lower-alpha | upper-alpha | none

Slide 12

Slide 12 text

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; } repeat no-repeat | repeat repeat-x | repeat-y origin top left | top center | top right | center left | border-box | content-box etc.

Slide 13

Slide 13 text

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 + opacity HSL RGBA = RGB + opacity HSLA = HSL + opacity HSL hue saturation lightness

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Text p { color: grey; Text-align left | right color: grey; letter-spacing: 5px; text-align: center; text-decoration: underline; text-indent: 10px; text-transform: capitalize; left | right center | justify Text-decoration text-transform: capitalize; word-spacing: 10px; } Text-decoration none underline overline line through text-transform None | capitalize | Lowercase | uppercase

Slide 16

Slide 16 text

Text Effects p { text-shadow: 2px 10px 5px #FF0000; text-shadow: 2px 10px 5px #FF0000; text-overflow: ellipsis; word-wrap:break-word; } 2px horizontal shadow 10px vertical shadow 10px vertical shadow 5px blur distance #FF0000 color

Slide 17

Slide 17 text

Other Text Properties

Slide 18

Slide 18 text

Roadmap • Intro • Basics • Basics • Selectors • Box Model • Positioning & Floats • Fonts • Fonts • Visual Effects • Media Queries

Slide 19

Slide 19 text

Selectors Classical ways to select elements in CSS2: • by type type type type a { color: red; } • by id id id id #redLink { color: red; } • by class class class class • by class class class class . .. .redLink { color: red; }

Slide 20

Slide 20 text

Other Selectors from CSS1 & CSS2 • div p div p div p div p all

elements inside a

• div>p div>p div>p div>p all

elements where the parent is a

• div>p div>p div>p div>p all

elements where the parent is a

• div+p div+p div+p div+p all

elements that are placed immediately after

• [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:first p:first p:first p:first- - - -child child child child every

element that is the first child of its parent

Slide 21

Slide 21 text

Some selectors introduced in CSS3 • a[ a[ a[ a[src src src src^="https"] ^="https"] ^="https"] ^="https"] every element whose src attribute value begins with "https” attribute value begins with "https” • a[ a[ a[ a[src src src src$=". $=". $=". $=".pdf pdf pdf pdf"] "] "] "] every element whose src attribute value ends with ".pdf” • a[ a[ a[ a[src src src src*=“mobile"] *=“mobile"] *=“mobile"] *=“mobile"] every element whose src attribute value contains the substring “mobile“ • p:nth p:nth p:nth p:nth- - - -child(2) child(2) child(2) child(2) every

element that is the second • p:nth p:nth p:nth p:nth- - - -child(2) child(2) child(2) child(2) every

element that is the second child of its parent • p:nth p:nth p:nth p:nth- - - -last last last last- - - -child(2) child(2) child(2) child(2) every

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

element

Slide 22

Slide 22 text

Roadmap • Intro • Basics • Basics • Selectors • Box Model • Positioning & Floats • Fonts • Fonts • Visual Effects • Media Queries

Slide 23

Slide 23 text

The Box Model All HTML elements can be considered as boxes boxes boxes boxes

Slide 24

Slide 24 text

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; }

Slide 25

Slide 25 text

Images as borders div { border-image:url(border.png) 30 30 round; border-image:url(border.png) 30 30 round; }

Slide 26

Slide 26 text

Roadmap • Intro • Basics • Basics • Selectors • Box Model • Positioning & Floats • Fonts • Fonts • Visual Effects • Media Queries

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

The Display Property Other usual values: block block • 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

Slide 29

Slide 29 text

Flex Box It helps in styling elements to be arranged horizontally or vertically vertically box: • a new value for the display property • a new property box-orient #div { display: box; box-orient: horizontal; }

Slide 30

Slide 30 text

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: horizontal horizontal horizontal horizontal | vertical | inherit How should the box's children be aligned aligned aligned aligned? box-direction Values: normal normal normal normal | reverse | inherit sets the order order order order in which the elements will be displayed

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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; }

Slide 34

Slide 34 text

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 to visible, collapse, inherit

Slide 35

Slide 35 text

Positioning • Static • Relative • Relative • Absolute • Fixed • Inherit

Slide 36

Slide 36 text

Static Positioning Elements will stack one on top of the next http://bit.ly/I8cEaF

Slide 37

Slide 37 text

Relative Positioning Elements behave exactly the same way as statically positioned elements way as statically positioned elements we can adjust a relatively positioned element with offset properties: top, top, top, top, right, right, right, right, bottom, and bottom, and bottom, and bottom, and left left left left http://bit.ly/I8cEaF

Slide 38

Slide 38 text

Relative Positioning It is possible to create a coordinate system for child elements elements http://bit.ly/I8cEaF

Slide 39

Slide 39 text

Absolute Positioning an absolutely positioned element is removed from the normal flow normal flow it won’t affect or be affected by any other element in the flow http://bit.ly/I8cEaF

Slide 40

Slide 40 text

Fixed Positioning shares all the rules of an absolutely positioned element http://bit.ly/I8cEaF a fixed element does not scroll with the document

Slide 41

Slide 41 text

Inherit Positioning The element inherits inherits inherits inherits 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

Slide 42

Slide 42 text

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 can right as it can right as it can right as it can right as it can right as it can right as it can right as it can Elements are floated only horizontally horizontally horizontally horizontally The float CSS property can accept one of 4 values: left, left, left, left, right, right, right, right, none, and none, and none, and none, and inherit inherit inherit inherit

Slide 43

Slide 43 text

Float The elements before the floating element will not be affected affected The elements after the floating element will flow around it - to avoid this, use the clear clear clear clear 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 width width width width For a deeper explanation of CSS float: http://bit.ly/I8cAb5

Slide 44

Slide 44 text

Roadmap • Intro • Basics • Basics • Selectors • Box Model • Positioning & Floats • Fonts • Fonts • Visual Effects • Media Queries

Slide 45

Slide 45 text

Fonts Before CSS3, web designers had to use fonts that were already installed on the user's device already 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-weight normal bold src: url(Dimbo.ttf); font-weight: normal; font-style: normal; } font-style normal italic oblique bold 100 200 …

Slide 46

Slide 46 text

Fonts Usage To use the font for an HTML element, refer to the name of the font (NAME) through the font font font font- - - -family family family family of the font (NAME) through the font font font font- - - -family family family family property div { font-family: NAME; font-family: NAME; }

Slide 47

Slide 47 text

Some Fonts Sources... www.dafont.com www.urbanfonts.com www.urbanfonts.com www.losttype.com

Slide 48

Slide 48 text

Roadmap • Intro • Basics • Basics • Selectors • Box Model • Positioning & Floats • Fonts • Fonts • Visual Effects • Media Queries

Slide 49

Slide 49 text

Visual Effects Three main mechanisms: 1. 1. 1. 1. Transforms Transforms Transforms Transforms ( ( ( (both both both both 2D and 3D) 2D and 3D) 2D and 3D) 2D and 3D) 2. 2. 2. 2. Transitions Transitions Transitions Transitions 3. 3. 3. 3. Animations Animations Animations Animations

Slide 50

Slide 50 text

Transforms A transform is an effect that lets an element change shape, size, position shape, size, position shape, size, position shape, size, position, … change shape, size, position shape, size, position shape, size, position shape, size, position, … You can transform your elements using 2D or 3D transformations http://bit.ly/IroJ7S

Slide 51

Slide 51 text

Transforms http://bit.ly/IrpUnX

Slide 52

Slide 52 text

Transforms http://bit.ly/IrpUnX

Slide 53

Slide 53 text

Transitions They are used to add an effect when changing from one style to another style to another The effect can be gradual gradual gradual gradual A transition is composed of 2 parts: 1. The CSS property to add the effect 2. The duration of the effect The effect will start when the specified CSS property changes value

Slide 54

Slide 54 text

Transition syntax A transition contains 4 properties: • property property property property • property property property property – the name of the CSS property the transition effect is for (can be all) • duration duration duration duration – how many seconds (or milliseconds) the transition effect takes to complete takes to complete • timing timing timing timing- - - -function function function function – linear, ease, ease-in, ease-out, ease-in-out • delay delay delay delay – when the transition effect will start

Slide 55

Slide 55 text

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’);

Slide 56

Slide 56 text

Animations An animation is an effect that lets an element gradually element gradually element gradually element gradually change from one style to another change from one style to another change from one style to another change from one style to another You can change style in loop, repeating, etc. To bind bind bind bind an animation to an element, you have to specify at least: 1. Name of the animation 1. Name of the animation 2. Duration of the animation div { animation: test 5s ease-in; }

Slide 57

Slide 57 text

Animation Definition An animation is defined in a keyframe keyframe keyframe keyframe 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)

Slide 58

Slide 58 text

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 in results in http://bit.ly/IrtfTY http://bit.ly/IrtfTY http://bit.ly/IrtfTY http://bit.ly/IrtfTY

Slide 59

Slide 59 text

Animation Properties http://bit.ly/IrpUnX

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Roadmap • Intro • Basics • Basics • Selectors • Box Model • Positioning & Floats • Fonts • Fonts • Visual Effects • Media Queries

Slide 62

Slide 62 text

Media Types Media Queries are based on Media Media Media Media Types Types Types Types A media type is a specification of the actual actual actual actual media media media media that is being used to access the page Examples of media types include • screen screen screen screen: computer screens • print print print print: printed document • braille braille braille braille: for Braille-based devices • tv tv tv tv: for television devices

Slide 63

Slide 63 text

Media Types There are two main ways to specify a media type: • in the HTML page • in the HTML page • @media @media @media @media within the CSS file @media screen { div { color: red; } }

Slide 64

Slide 64 text

Media Queries They They They They allow allow allow allow you you you you to to to to to to to to change style based on specific change style based on specific change style based on specific change style based on specific conditions conditions conditions conditions conditions conditions conditions conditions For example, they can be about • device’s display size display size display size display size • orientation orientation orientation orientation of the device • Resolution Resolution Resolution Resolution of the display • ...

Slide 65

Slide 65 text

Example http://bit.ly/I5mR1u

Slide 66

Slide 66 text

Media Queries A media query is a boolean boolean boolean boolean expression expression expression expression The CSS associated with the media query expression is applied only if it evaluates to true A media query consists of 1. a media type 1. a media type 2. a set of media features @media screen and orientation: portrait

Slide 67

Slide 67 text

The Full Media Feature List http://slidesha.re/I5oFHZ

Slide 68

Slide 68 text

The AND operator You can combine multiple expressions by using the and and and and operator the and and and and operator @media screen and (max-device-width: 480px){ /* your style */ }

Slide 69

Slide 69 text

The COMMA operator The comma keyword acts as an or or or or operator @media screen and (color), handheld and (color) { /* your style */ }

Slide 70

Slide 70 text

The NOT operator You can explicitly ignore a specific type of device by using the not not not not operator using the not not not not operator @media not (width:480px) { /* your style */ }

Slide 71

Slide 71 text

The ONLY expression It is used to “hide hide hide hide” the CSS to older browsers that can read media types but cannot handle media queries read media types but cannot handle media queries In this case the styling information will not be visible to those browsers @media only screen @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } Smartphones (portrait and landscape)

Slide 72

Slide 72 text

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 devices iPhone and Android devices @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

Slide 73

Slide 73 text

References http://www.w3schools.com