Gran Sasso Science Institute
Ivano Malavolta
HTML5 & CSS3 refresher
Roadmap
Anatomy of a web app
HTML5
CSS3
What is a Web App?
A software built with web technologies that is accessible via a mobile
browser


The browser may be eit...
Anatomy of a Web App
Data 
Usually mobile apps do not talk directly with the database

à do not even think about JDBC, drivers, etc!
à They p...
Data
•  Data can be stored in any classical way:
– Relational
– Graph
– Key-value
– Document-based

Latest trend à backen...
BaaS
1.  Developers build a visual model of
their DB

2.  The service generates APIs and
client-side libraries(compatible
...
Example of Baas software: BaasBox


Main features:
•  User management 
–  ACL
–  Friendships
–  Authentication via Faceboo...
Roadmap
Anatomy of a web app
HTML5
CSS3
HTML 5
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web S...
HTML 5

HTML5 will be the new standard for HTML


HTML5 is still a work in progress

W3C final recomendation: 2020



Top b...
What is HTML5?
HTML5
Markup
 JavaScript
CSS3
Multimedia
The minimal HTML5 page
<!DOCTYPE	
  html>	
  
<html>	
  
	
  <head>	
  
	
  <title>Title</title>	
  
</head>	
  
	
  <body...
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web ...
New Structural Tags
Main Goal: separate presentation from content

•  Poor accessibility
•  Unnecessary complexity
•  Larg...
New Structural Tags
<header> header region of a page or section

<footer> footer region of a page or section

<nav> naviga...
New Structural Tags
http://bit.ly/JCnuQJ
Other Structural Tags
<command> a command button that a user can invoke
<details> additional details that the user can vie...
Custom Data Attributes
Can be used to add metadata about any element within an
HTML5 page

They are ignored by the validat...
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web ...
Forms
Main Goal: reduce the Javascript for validation and format
management
Example:
Form Input Types
Form input types degrade gracefully
à Unknown input types are treated as text-type
http://bit.ly/I65jai
Form Input Types
<input type="search"> for search boxes
<input type="number"> for spinboxes
<input type="range"> for slide...
Form Field Attributes
Autofocus
–  Support for placing the focus on a specific form element
<input type="text“ autofocus>
P...
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web ...
Audio
<audio> : a standard way to embed an audio file on a web page

<audio controls>
<source src="song.ogg" type="audio/og...
Audio Attributes
Audio Javascript API
HTML5 provides a set of Javascript APIs for interacting with an
audio element

For example:

play() p...
Video
<video> : a standard way to embed a video file on a web page

<video width="320" height="240" controls>
<source src="...
Video attributes
Video Javascript API
HTML5 provides a set of Javascript APIs for interacting with a
video element

For example:

play() pa...
A note on YouTube videos
<video> works only if you have a direct link to the
MP4 file of the YouTube video

If you have jus...
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web ...
Offline Data
LocalStorage

stores data in key/value pairs

it is tied to a specific domain/app

persists across browser sess...
Offline Data
WebSQL Database

relational DB

support for tables creation, insert, update, …

transactional

tied to a speci...
Offline data
Mobile browsers compatibility matrix
We will have a dedicated lecture to offline data
storage on mobile devices
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web ...
Geolocalization
Gets Latitude and Longitude from the user’s browser

There is also a watchPosition method wich calls a JS ...
Example
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} els...
getCurrentPosition()
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web ...
WebSockets
Bidirectional, full-duplex communication between devices and
server

Specifically suited for

chat, videogames, ...
WebSockets - Overview
1.  Client notifies websocket server (EventMachine) of an event,
giving ids of recipients
2.  The ser...
Alternative - Polling via AJAX
+ Near real-time updates (not purely real-time)
+ easy to implement
+ no new technologies n...
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web ...
Canvas & SVG
Canvas & SVG allow you to create graphics inside the browser
We will have a dedicated
lecture to canvas & SVG...
Canvas & SVG
Canvas

draws 2D graphics, on the fly

you use Javascript to draw on the canvas
  
rendered pixel by pixel

SV...
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web ...
Roadmap
Anatomy of a web app
HTML5
CSS3
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
Intro
Let’s imagine Flipboard without CSS3
CSS3 Main Drivers
Simplicity
–  less images
–  less markup
–  less Javascript
–  less Flash
Better performance
–  fewer HT...
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
Basics
Generic Syntax:

selector {
property: value;
property2: value2, value3;
...
}
Inheritance
If an HTML element B is nested into another element A 
à B inherits the style of A unless B has an explicit s...
Combining Selectors
Selectors can be combined


h1, h2, h3 {
background-color: red;
}
Lists
div {
list-style-image: url(image.png);
list-style-position: inside;
list-style-style: circle;
}

Position
inside | ...
Backgrounds
You can style a background of any element

div {
background:url(img.png), url(img2.png);
background-size:80px ...
Background & Colors
div {
background-color: blue;
background-color: rgba(0, 0, 255, 0.2);
background-color: hsla(240, 100%...
Gradients
They can be used in every place you can use an image

div {
background: -webkit-gradient(linear, right top,
left...
Text
p {
color: grey;
letter-spacing: 5px;
text-align: center;
text-decoration: underline;
text-indent: 10px;
text-transfo...
Text Effects
p {
text-shadow: 2px 10px 5px #FF0000;
text-overflow: ellipsis;
word-wrap:break-word;
}
2px à horizontal sha...
Other Text Properties
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
Selectors
Classical ways to select elements in CSS2:

•  by type 
a { color: red; }

•  by id 
#redLink { color: red; }
• ...
Other Selectors from CSS1 & CSS2
•  div p à all <p> elements inside a <div>
•  div>p à all <p> elements where the parent...
Some selectors introduced in CSS3
•  a[src^="https"] à every <a> element whose src attribute
value begins with "https”
• ...
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
The Box Model
http://www.adamkaplan.me/grid/
http://www.adamkaplan.me/grid/
Tip





Tells the browser not to include borders and padding in the
width of your content
...
http://www.adamkaplan.me/grid/
Tip
Borders & dimensions
div {
width: 100px;
height: 40px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
border-radius:...
Images as borders
div {
border-image:url(border.png) 30 30 round;
}
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
The Display Property
It specifies if and how an element is displayed

div {
display: none;
}
The element will be hidden, an...
The Display Property
Other usual values:

block
•  a block element is an element that takes up the full width
available, a...
The visibility Property
It specifies if an element should be visible or hidden

div.hidden {
visibility: hidden;
}
The elem...
Flex Box
It helps in styling elements to be arranged horizontally or
vertically
box:
•  a new value for the display proper...
Flex Box main elements
display: box

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

box-orient

Va...
Flex Box main elements
box-pack

Values: start | end | center | justify

Sets the alignment of the box along the box-orien...
Flex Box main elements
box-align

Values: start | end | center | baseline | stretch

Sets how the box's children are align...
Flex Box Children

by default child elements are not flexible

à their dimension is set according to their width
box-flex ...
Positioning
•  Static
•  Relative
•  Absolute
•  Fixed
•  Inherit
Static Positioning
Elements will stack one on top of the next

http://bit.ly/I8cEaF
Relative Positioning
Elements behave exactly the same 
way as statically positioned elements

we can adjust a relatively p...
Relative Positioning
It is possible to create a coordinate system for child elements
http://bit.ly/I8cEaF
Absolute Positioning
an absolutely positioned element is removed from the normal flow

it won’t affect or be 
affected by a...
Fixed Positioning
shares all the rules of an absolutely positioned element

a fixed element does not scroll with the docume...
Float

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

Elements are floated only horizontally

The float C...
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
Fonts
Before CSS3, web designers had to use fonts that were already
installed on the user's device

With CSS3, web designe...
Fonts Usage
To use the font for an HTML element, refer to the name of the
font (NAME) through the font-family property
div...
Some Fonts Sources...
www.dafont.com
www.urbanfonts.com
www.losttype.com
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
Visual Effects
Three main mechanisms:

1.  Transforms (both 2D and 3D)
2.  Transitions
3.  Animations
Transforms
A transform is an effect that lets an element 
change shape, size, position, … 

You can transform your element...
Transforms
http://bit.ly/IrpUnX
Transforms
http://bit.ly/IrpUnX
Transitions
They are used to add an effect when changing from one style to
another

The effect can be gradual


The effect...
Transition syntax
A transition contains 4 properties:

•  property
–  the name of the CSS property the transition effect i...
Example
.imageThumbnail {
width; 200px;
transition: all ease-in 3s;
}
.zoomed {
position: absolute;
left: 0px;
top: 0px;
w...
Animations
An animation is an effect that lets an element gradually change
from one style to another

You can change style...
Animation Definition
An animation is defined in a keyframe

It splits the animation into parts, and assign a specific style t...
Example
@keyframes test{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {back...
Animation Properties
http://bit.ly/IrpUnX
Transitions VS Animations
•  Trigger
–  Transitions must be bound to a CSS property change
–  Animations start autonomousl...
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
Media Types
Media Queries are based on Media Types

A media type is a specification of the actual media that is being
used ...
Media Types
There are two main ways to specify a media type:

•  <link> in the HTML page


<link rel=“stylesheet”
href=“st...
Media Queries
They allow you to to change style based on specific conditions

For example, they can be about
•  device’s di...
Example
http://bit.ly/I5mR1u
Media Queries
A media query is a boolean expression

The CSS associated with the media query expression is applied
only if...
The Full Media Feature List
http://slidesha.re/I5oFHZ
The AND operator
You can combine multiple expressions by using the and operator


@media screen and (max-device-width: 480...
The COMMA operator
The comma keyword acts as an or operator


@media screen and (color),
handheld and (color) {
/* your st...
The NOT operator
You can explicitly ignore a specific type of device by using the not
operator


@media not (width:480px) {...
Examples
Retina Displays
@media only screen and -webkit-min-device-pixel-ratio: 2
iPad in landscape orientation
@media onl...
References







http://www.w3schools.com
https://developer.mozilla.org/en-US/docs/Web/CSS
+ 39 380 70 21 600
Contact
Ivano Malavolta | 
Gran Sasso Science Institute
iivanoo
ivano.malavolta@univaq.it
www.ivanomala...
HTML5 and CSS3 refresher
Upcoming SlideShare
Loading in...5
×

HTML5 and CSS3 refresher

918

Published on

Anatomy of a web app
HTML5
CSS3

This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.

http://www.ivanomalavolta.com

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
918
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
65
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 and CSS3 refresher

  1. 1. Gran Sasso Science Institute Ivano Malavolta HTML5 & CSS3 refresher
  2. 2. Roadmap Anatomy of a web app HTML5 CSS3
  3. 3. What is a Web App? A software built with web technologies that is accessible via a mobile browser The browser may be either the standard device browser or an embedded browser (Hybrid app)
  4. 4. Anatomy of a Web App
  5. 5. Data Usually mobile apps do not talk directly with the database à do not even think about JDBC, drivers, etc! à They pass through an application server and communicate via: •  standard HTTP requests for HTML content (eg PHP) •  REST-full services (XML, JSON, etc.) •  SOAP
  6. 6. Data •  Data can be stored in any classical way: – Relational – Graph – Key-value – Document-based Latest trend à backend-as-a-service
  7. 7. BaaS 1.  Developers build a visual model of their DB 2.  The service generates APIs and client-side libraries(compatible with Android, Windows Phone, etc.) 3.  The data produced/consumed in the app can be pushed/pulled to their DB –  Communication is handled via REST-based APIs
  8. 8. Example of Baas software: BaasBox Main features: •  User management –  ACL –  Friendships –  Authentication via Facebook and Google+ •  Document-based data manegement (via OrientDB) •  Assets management (fotos, documents, or files) •  Push notifications The “Box” in BaasBox means that all the features are in a standalone server, just like a box. No Application Server, no Database Server, just a JVM and nothing more Rest API Web dashboard http://www.baasbox.com/
  9. 9. Roadmap Anatomy of a web app HTML5 CSS3
  10. 10. HTML 5 •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  11. 11. HTML 5 HTML5 will be the new standard for HTML HTML5 is still a work in progress W3C final recomendation: 2020 Top browsers support many (not all) of the new HTML5 elements http://mobilehtml5.org http://caniuse.com
  12. 12. What is HTML5? HTML5 Markup JavaScript CSS3 Multimedia
  13. 13. The minimal HTML5 page <!DOCTYPE  html>   <html>    <head>    <title>Title</title>   </head>    <body>   …   </body>   </html>  
  14. 14. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  15. 15. New Structural Tags Main Goal: separate presentation from content •  Poor accessibility •  Unnecessary complexity •  Larger document size Most of the presentational features from earlier versions of HTML are no longer supported
  16. 16. New Structural Tags <header> header region of a page or section <footer> footer region of a page or section <nav> navigation region of a page or section <section> logical region of a page <article> a complete piece of content <aside> secondary or related content
  17. 17. New Structural Tags http://bit.ly/JCnuQJ
  18. 18. Other Structural Tags <command> a command button that a user can invoke <details> additional details that the user can view or hide <summary> a visible heading for a <details> element <meter> an amount within a range <progress> shows real-time progress towards a goal <figure> self-contained content, like illustrations, diagrams, photos, code listings, etc. <figcaption> caption of a figure <mark> marked/highlighted text <time> a date/time <wbr>Defines a possible line-break
  19. 19. Custom Data Attributes Can be used to add metadata about any element within an HTML5 page They are ignored by the validator for HTML5 documents They all start with the data- pattern They can be read by any browser using Javascript via the getAttribute() method
  20. 20. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  21. 21. Forms Main Goal: reduce the Javascript for validation and format management Example:
  22. 22. Form Input Types Form input types degrade gracefully à Unknown input types are treated as text-type http://bit.ly/I65jai
  23. 23. Form Input Types <input type="search"> for search boxes <input type="number"> for spinboxes <input type="range"> for sliders <input type="color"> for color pickers <input type="tel"> for telephone numbers <input type="url"> for web addresses <input type="email"> for email addresses <input type="date"> for calendar date pickers <input type="month"> for months <input type="week"> for weeks <input type="time"> for timestamps <input type="datetime"> for precise timestamps <input type="datetime-local"> for local dates and times
  24. 24. Form Field Attributes Autofocus –  Support for placing the focus on a specific form element <input type="text“ autofocus> Placeholder –  Support for placing placeholder text inside a form field <input type="text“ placeholder=“your name”>
  25. 25. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Server-Sent Events •  Canvas & SVG
  26. 26. Audio <audio> : a standard way to embed an audio file on a web page <audio controls> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Not Supported </audio> Multiple sources à the browser will use the first recognized format
  27. 27. Audio Attributes
  28. 28. Audio Javascript API HTML5 provides a set of Javascript APIs for interacting with an audio element For example: play() pause() load() currentTime ended volume… à http://www.w3.org/wiki/HTML/Elements/audio
  29. 29. Video <video> : a standard way to embed a video file on a web page <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Not Supported </video> Multiple sources à the browser will use the first recognized format
  30. 30. Video attributes
  31. 31. Video Javascript API HTML5 provides a set of Javascript APIs for interacting with a video element For example: play() pause() load() currentTime ended volume… à http://www.w3.org/wiki/HTML/Elements/video
  32. 32. A note on YouTube videos <video> works only if you have a direct link to the MP4 file of the YouTube video If you have just a link to the YouTube page of your video, simply embed it in your page <iframe width="560" height="315" src="http:// www.youtube.com/embed/Wp20Sc8qPeo" frameborder="0" allowfullscreen></iframe>
  33. 33. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  34. 34. Offline Data LocalStorage stores data in key/value pairs it is tied to a specific domain/app persists across browser sessions SessionStorage stores data in key/value pairs it is tied to a specific domain/app data is erased when a browser session ends
  35. 35. Offline Data WebSQL Database relational DB support for tables creation, insert, update, … transactional tied to a specific domain/app persists across browser sessions Its evolution is called IndexedDB, but it is actually not supported by most mobile browsers
  36. 36. Offline data Mobile browsers compatibility matrix We will have a dedicated lecture to offline data storage on mobile devices
  37. 37. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  38. 38. Geolocalization Gets Latitude and Longitude from the user’s browser There is also a watchPosition method wich calls a JS function every time the user moves We will have a dedicated lecture to geolocalization on mobile devices
  39. 39. Example function getLocation() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { console.log(‘no geolocalization’); } } function showPosition(position) { console.log(position.coords.latitude); console.log(position.coords.longitude); }
  40. 40. getCurrentPosition()
  41. 41. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  42. 42. WebSockets Bidirectional, full-duplex communication between devices and server Specifically suited for chat, videogames, drawings sharing, real-time info Requires a Web Socket Server to handle the protocol
  43. 43. WebSockets - Overview 1.  Client notifies websocket server (EventMachine) of an event, giving ids of recipients 2.  The server notifies all the active clients (subscribed to that type of event) 3.  Clients process event when given recipient Id matches the client’s one http://bit.ly/Ixcupi
  44. 44. Alternative - Polling via AJAX + Near real-time updates (not purely real-time) + easy to implement + no new technologies needed -  they are requested from the client and cause increased network traffic -  AJAX requests generally have a small payload and relatively high amount of http headers (wasted bandwith)
  45. 45. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  46. 46. Canvas & SVG Canvas & SVG allow you to create graphics inside the browser We will have a dedicated lecture to canvas & SVG on mobile devices http://bit.ly/Ie4HKu
  47. 47. Canvas & SVG Canvas draws 2D graphics, on the fly you use Javascript to draw on the canvas   rendered pixel by pixel SVG describes 2D graphics in XML every element is available within the SVG DOM JavaScript event handlers for an element
  48. 48. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Server-Sent Events •  Canvas & SVG
  49. 49. Roadmap Anatomy of a web app HTML5 CSS3
  50. 50. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  51. 51. Intro Let’s imagine Flipboard without CSS3
  52. 52. CSS3 Main Drivers Simplicity –  less images –  less markup –  less Javascript –  less Flash Better performance –  fewer HTTP requests Better Search Engine Placement –  text as real text, not images or Flash –  speed
  53. 53. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  54. 54. Basics Generic Syntax: selector { property: value; property2: value2, value3; ... }
  55. 55. Inheritance If an HTML element B is nested into another element A à B inherits the style of A unless B has an explicit style definition body { background-color: red; } div { background-color: green; }
  56. 56. Combining Selectors Selectors can be combined h1, h2, h3 { background-color: red; }
  57. 57. Lists div { list-style-image: url(image.png); list-style-position: inside; list-style-style: circle; } Position inside | outside Style disc | circle square | decimal lower-roman | upper-roman | lower-alpha | upper-alpha | none
  58. 58. 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; } repeat no-repeat | repeat repeat-x | repeat-y origin top left | top center | top right | center left | border-box | content-box etc.
  59. 59. Background & Colors div { background-color: blue; background-color: rgba(0, 0, 255, 0.2); background-color: hsla(240, 100%, 50%, 0.2); } RGBA = RGB + opacity HSLA = HSL + opacity HSL hue saturation lightness
  60. 60. Gradients They can be used in every place you can use an image div { background: -webkit-gradient(linear, right top, left bottom, from(red), green)); } 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
  61. 61. Text p { color: grey; letter-spacing: 5px; text-align: center; text-decoration: underline; text-indent: 10px; text-transform: capitalize; word-spacing: 10px; } text-align left | right center | justify Text-decoration none underline overline line through text-transform none | capitalize | lowercase | uppercase
  62. 62. Text Effects p { text-shadow: 2px 10px 5px #FF0000; text-overflow: ellipsis; word-wrap:break-word; } 2px à horizontal shadow 10px à vertical shadow 5px à blur distance #FF0000 à color
  63. 63. Other Text Properties
  64. 64. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  65. 65. Selectors Classical ways to select elements in CSS2: •  by type a { color: red; } •  by id #redLink { color: red; } •  by class .redLink { color: red; }
  66. 66. Other Selectors from CSS1 & CSS2 •  div p à all <p> elements inside a <div> •  div>p à all <p> elements where the parent is a <div> •  div+p à all <p> elements that are placed immediately after <div> •  [target] à all elements with a target attribute •  [target=_blank] à all elements with target= "_blank“ •  p:first-child à every <p> element that is the first child of its parent
  67. 67. Some selectors introduced in CSS3 •  a[src^="https"] à every <a> element whose src attribute value begins with "https” •  a[src$=".pdf"] à every <a> element whose src attribute value ends with ".pdf” •  a[src*=“mobile"] à every <a> element whose src attribute value contains the substring “mobile“ •  p:nth-child(2) à every <p> element that is the second child of its parent •  p:nth-last-child(2) à every <p> element that is the second child of its parent, counting from the last child •  :not(p) à every element that is not a <p> element
  68. 68. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  69. 69. The Box Model http://www.adamkaplan.me/grid/
  70. 70. http://www.adamkaplan.me/grid/ Tip Tells the browser not to include borders and padding in the width of your content à  you have more control on the layout of your app
  71. 71. http://www.adamkaplan.me/grid/ Tip
  72. 72. Borders & dimensions div { width: 100px; height: 40px; padding: 10px; border: 5px solid gray; margin: 10px; border-radius: 10px; box-shadow: 10px 10px 5px red; }
  73. 73. Images as borders div { border-image:url(border.png) 30 30 round; }
  74. 74. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  75. 75. The Display Property It specifies if and how an element is displayed div { display: none; } The element will be hidden, and the page will be displayed as if the element is not there
  76. 76. The Display Property Other usual values: 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
  77. 77. 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
  78. 78. Flex Box It helps in styling elements to be arranged horizontally or vertically box: •  a new value for the display property •  a new property box-orient #div { display: box; box-orient: horizontal; }
  79. 79. Flex Box main elements display: box opts an element and its immediate children into the flexible box model box-orient Values: horizontal | vertical | inherit How should the box's children be aligned? box-direction Values: normal | reverse | inherit sets the order in which the elements will be displayed
  80. 80. Flex Box main elements box-pack Values: start | end | center | justify Sets the alignment of the box along the box-orient axis box-orient: horizontal; box-pack: end;
  81. 81. Flex Box main elements box-align Values: start | end | center | baseline | stretch Sets how the box's children are aligned in the box box-orient: horizontal; box-align: center;
  82. 82. 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; } #box3 { box-flex: 2; }
  83. 83. Positioning •  Static •  Relative •  Absolute •  Fixed •  Inherit
  84. 84. Static Positioning Elements will stack one on top of the next http://bit.ly/I8cEaF
  85. 85. Relative Positioning Elements behave exactly the same way as statically positioned elements we can adjust a relatively positioned element with offset properties:  top, right, bottom, and left http://bit.ly/I8cEaF
  86. 86. Relative Positioning It is possible to create a coordinate system for child elements http://bit.ly/I8cEaF
  87. 87. Absolute Positioning an absolutely positioned element is removed from the normal flow it won’t affect or be affected by any other element in the flow http://bit.ly/I8cEaF
  88. 88. Fixed Positioning shares all the rules of an absolutely positioned element a fixed element does not scroll with the document http://bit.ly/I8cEaF
  89. 89. Float A floated element will move as far to the left or right as it can Elements are floated only horizontally The float CSS property can accept one of 4 values:  left, right, none, and inherit
  90. 90. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  91. 91. Fonts Before CSS3, web designers had to use fonts that were 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; font-style: normal; } font-style normal italic oblique font-weight normal bold 100 200 …
  92. 92. Fonts Usage To use the font for an HTML element, refer to the name of the font (NAME) through the font-family property div { font-family: NAME; }
  93. 93. Some Fonts Sources... www.dafont.com www.urbanfonts.com www.losttype.com
  94. 94. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  95. 95. Visual Effects Three main mechanisms: 1.  Transforms (both 2D and 3D) 2.  Transitions 3.  Animations
  96. 96. Transforms A transform is an effect that lets an element change shape, size, position, … You can transform your elements using 2D or 3D transformations http://bit.ly/IroJ7S
  97. 97. Transforms http://bit.ly/IrpUnX
  98. 98. Transforms http://bit.ly/IrpUnX
  99. 99. Transitions They are used to add an effect when changing from one style to another The effect can be gradual The effect will start when the specified CSS property changes value
  100. 100. Transition syntax A transition contains 4 properties: •  property –  the name of the CSS property the transition effect is for (can be all) •  duration –  how many seconds (or milliseconds) the transition effect takes to complete •  timing-function –  linear, ease, ease-in, ease-out, ease-in-out •  delay –  when the transition effect will start
  101. 101. Example .imageThumbnail { width; 200px; transition: all ease-in 3s; } .zoomed { position: absolute; left: 0px; top: 0px; width: 480px; } $(‘.imageThumbnail’).addClass(‘zoomed’);
  102. 102. Animations An animation is an effect that lets an element gradually change from one style to another You can change style in loop, repeating, etc. To bind an animation to an element, you have to specify at least: 1.  Name of the animation 2.  Duration of the animation div { animation: test 5s ease-in; }
  103. 103. Animation Definition An animation is defined in a 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)
  104. 104. Example @keyframes test{ 0% {background: red; left:0px; 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 http://goo.gl/kFZrLs
  105. 105. Animation Properties http://bit.ly/IrpUnX
  106. 106. Transitions VS Animations •  Trigger –  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 –  Transitions can be perfomed once for each activation –  Animations can be looped
  107. 107. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  108. 108. Media Types Media Queries are based on Media Types A media type is a specification of the actual media that is being used to access the page Examples of media types include •  screen: computer screens •  print: printed document •  braille: for Braille-based devices •  tv: for television devices
  109. 109. Media Types There are two main ways to specify a media type: •  <link> in the HTML page <link rel=“stylesheet” href=“style.css” media=“screen” /> •  @media within the CSS file @media screen { div { color: red; } }
  110. 110. Media Queries They allow you to to change style based on specific conditions For example, they can be about •  device’s display size •  orientation of the device •  Resolution of the display •  ...
  111. 111. Example http://bit.ly/I5mR1u
  112. 112. Media Queries A media query is a boolean 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 2.  a set of media features @media screen and orientation: portrait
  113. 113. The Full Media Feature List http://slidesha.re/I5oFHZ
  114. 114. The AND operator You can combine multiple expressions by using the and operator @media screen and (max-device-width: 480px){ /* your style */ }
  115. 115. The COMMA operator The comma keyword acts as an or operator @media screen and (color), handheld and (color) { /* your style */ }
  116. 116. The NOT operator You can explicitly ignore a specific type of device by using the not operator @media not (width:480px) { /* your style */ }
  117. 117. Examples Retina Displays @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 @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
  118. 118. References http://www.w3schools.com https://developer.mozilla.org/en-US/docs/Web/CSS
  119. 119. + 39 380 70 21 600 Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@univaq.it www.ivanomalavolta.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×