2. Index No Index No
HTML5 - Introduction 01 Canvas 16
Why HTML5 ? 02 SVG 17
What is new in HTML5? 03 Drag & Drop 18
HTML5 Doctype 04 Form Elements - email 19
Article 05 Form Elements - number 20
Header 06 Form Elements - url 21
Footer 07 Form Elements - tel 22
Nav 08 Form Elements - search 23
Main 09 Form Elements - color 24
Aside 10 Form Elements - range 25
Details & Summary 11 Form Elements - datetime 26
Figure & Figcaption 12 Form Elements – datetime-local 27
Audio 13 Form Elements - date 28
Video 14 Form Elements - time 29
Embed 15 Form Elements - week 30
3. Index No Index No
Form Elements - month 31 Application Cache – Manifest File 46
Form Attributes - Pattern 32 Web SQL 47
Form Attributes - Required 33 Web SQL – Open database 48
Form Attributes - min, max, step 34 Web SQL – Transaction 49
Form Attributes - maxlength 35 Web SQL – Queries 50
Form Attributes - Pattern 36 Geolocation 51
Form Attributes - novalidate 37 Web workers 52
Form Attributes - datalist 38 Web Sockets 53
Form Attributes - multiple 39 CSS3 - Introduction 54
Form Attributes - output 40 Vendor Prefixes 55
Form Attributes - autocomplete 41 Color Formats 56
Form Attributes - autofocus 42 Gradient 57
Form Attributes - placeholder 43 Linear Gradient 58
Web storage 44 Radial Gradient 59
Application Cache 45 Web fonts 60
4. Index No Index No
Text Shadows 61 Align Items 76
Word Wrapping 62 Align Contents 77
Multi Column Text 63 Order 78
Border Radius 64 Flex Grow 79
Border Images 65 Flex Shrink 80
Box Shadows 66 Flex Basis 81
Background size 67 Flex 82
Multiple Background Images 68 Align Self 83
Background Origin 69 Transition 84
Clip Background 70 Transform 85
Flex Container 71 Animation 86
Flex Direction 72 Selectors 87
Flex Wrap 73 Media Queries 88
Flex Flow 74
Justify Content 75
6. HTML5 - Introduction
HTML5 is the latest version of HTML
HTML stands for Hypertext Markup Language
It is still in development phase
But has amazingly broad browser support
First draft was announced in the year 2008
HTML5 is most widely used currently
It eases the web development with the inclusion of support for many new features
01
7. Why HTML5 ?
02
HTML5 is an evolution of HTML over XHTML
Previous specifications left error handling up to user agents
XHTML did not offer backward compatibility
With the strict error handling XHTML would stop rendering millions of older web pages
Whereas HTML5 specifies rules for error handling
Offers backward compatibility thereby provides support for older versions of HTML
Has support for several new elements
Reduces the need for third party plugins by supporting those features directly in the browser
8. What is new in HTML5?
03
HTML5 has several new elements such as:
Article, section, header, footer, nav, menu, main, details, summary, command, figure, figcaption…
Several attributes have been included too
Web forms 2.0 is now included in HTML5
Date picker, color picker controls and numeric stepper controls are added
Input fields such as date, url, email, number, etc are included
Supports autocomplete and validation
Supports APIs
Audio, video, offline apps, drag and drop, geolocation, web storage, web workers, etc
9. HTML5 Doctype
04
HTML5 doctype has been simplified
HTML5 does not need reference to DTD as it is not based on SGML
<!doctype html>
SGML (Standard Generalized Markup Language) is a standard for how to specify a document
markup language or tag set. Such a specification is itself a document type definition (DTD). SGML is
not in itself a document language, but a description of how to specify one.
10. Article
05
Syntax <article></article>
Description Used to define independent content in a page Can have a header tag and
can enclose para, span or other tags
Illustration <article>
<h2>Paragraph Examples</h2>
<p>Web designers who haven't kept up with the development of HTML
standards (tut-tut) will find this to be the biggest difference between
HTML</p>
</article>
Notes Can have multiple article tags in a web page
11. Header
06
Syntax <header></header>
Description Used to specify a header for a document or section
Used as a container for introductory content or set of navigational links
Illustration <header>
<nav>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
Notes Cannot be placed within a <footer> or another <header> element.
Can be used more than once in a document
12. Footer
07
Syntax <footer></footer>
Description Used to define the FOOTER area of the page
Used to contain information such as who wrote it, links to related
documents, copyright data, and the like.
Illustration <footer class="footer" >
@Copyright Reserved to RSolutions
<a href="#">Html </a>
<a href="#">CSS </a>
<a href="#">Sql </a>
<a href="#">JavaScript </a>
</footer>
13. Nav
08
Syntax <nav></nav>
Description Used to create navigational links such as menu
Can be included within the header, footer, side menu, etc
Illustration <nav>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Notes Do not enclose all links within nav tags
14. Main
09
Syntax <main></main>
Description Indicates where the main content begins
Illustration <main>
<section>
<article >
<h1> Heading h1 Example</h1>
<h2> Heading h2 Example</h2>
<h3> Heading h3 Example</h3>
</article>
…………..
…………..
</main>
Notes Should be used only once in a web page
15. Aside
10
Syntax <aside></aside>
Description Used to define independent content in a page
Can have a header tag and can enclose para, span or other tags
Illustration <aside>
<h3>RSolutions Group Companies</h3>
<a href="http://www.rsolutionsglobal.co.in">Rsolutions Global</a><br/>
<a href="http://www.rsolutionsglobal.com/"> Rsolutions Products</a><br/>
</aside>
Notes Can have multiple aside tags in a web page
16. Details & Summary
11
Syntax <details><summary></summary></details>
Description Used to implement show and hide functionality
Details is the wrapper for all the content we want to show and hide
Summary contains the text that is clickable to view the hidden content
Illustration <details>
<summary>Technologies: </summary>
<p> Web: HTML, CSS, JavaScript, jQuery, JSON, AJAX, XML</br>
DOTNET: C#, ASP.NET, ASP.NET MVC</br> Database: SQL.</p>
</details>
Notes Can have multiple details tag in a web page
Summary tag is optional
17. Figure & Figcaption
12
Syntax <figure><figcaption></figcaption></figure>
Description Used to call an image file inside the fixed container
It has its fix container properties which is relevant to the remaining
text
It automatically adjust the paragraph text and figure alignment
Illustration <figure>
<img src="/Rsolutions-Logo.jpg" alt=“Rsolutions Logo">
<figcaption>Tulip Garden</figcaption>
</figure
Notes Can also contain code blocks, charts, etc
18. Audio
13
Syntax <audio></audio>
Description Used to play audio file in the browser with full user control support
Illustration <audio controls preload loop autoplay muted>
<source src="04-Death_Becomes_Fur.mp4" type='audio/mp4'>
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
Notes Prior to HTML5 additional plugins were required to play audio files in
browsers
19. Video
14
Syntax <video></video>
Description Used to play a movie or video clip on the website
Illustration <video id="videotag" preload muted loop controls autoplay
poster="http://dailydropcap.com/images/A-11.jpg" >
Your user agent does not support the HTML5 Video element. <source
src="movie.mp4#t=0,30" type="video/mp4">
</video>
Notes Earlier to add video to web pages we had to use the object and embed
element and lengthy scripts
20. Embed
15
Syntax <embed></embed>
Description Used to call a media file in browser
A browser plugin may be require to play the media files
Specially used for calling a flash movie
Illustration <embed src="Car-speakers-590x90.swf" </embed
21. Canvas
16
Syntax <canvas></canvas>
Description Represents a rectangular area on an HTML page
Has been built specially for graphical representation
It is incomplete without writing the JavaScript along with it.
Illustration <canvas id="Canvas_Gradient"></canvas><br/>
<script> function Canvas_Gradient(){ var canvas =
document.getElementById('Canvas_Gradient'); var ctx =
canvas.getContext('2d'); var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#00ABEB'); lingrad.addColorStop(1, '#fff');
ctx.fillStyle = lingrad; ctx.fillRect(10,10,130,130);}
</script>
22. SVG
17
Syntax <svg></svg>
Description Stands for Scalable Vector Graphics (SVG)
Also used to draw the graphical representation
It defines the Vector based graphics
The script of SVG is in XML format
Quality is maintained even when scaled up
Every independent element can be animated
Illustration <svg id="svgelem" height="200" >
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
23. Drag & Drop
18
Syntax Draggable = “true”
Description We can move an object from one place to another place It involves
JavaScript
Illustration <div id="boxC" draggable="true" ondragstart="return dragStart(event)">
<p>User 3</p>
</div>
<div id="boxB" ondrop="return dragDrop(event)" ondragover="return
dragOver(event)">
List of Absentees
</div>
Notes ondragover event specifies where the dragged data can be dropped
To allow a drop, we must prevent the default handling of the element
using event. preventDefault() method
24. Form Elements - email
19
Syntax <input type = “email”>
Description Used to enter email addresses
Illustration <input type="email" name="user_email" >
Notes By default it allows only one email id to be entered
By setting the multiple attribute, a comma separated list of email
addresses can be entered
25. Form Elements - number
20
Syntax <input type = “number”>
Description Used to enter numerical values
Illustration <input type="number" name="age" >
Notes Allows only numbers
26. Form Elements - url
21
Syntax <input type = “url”>
Description Used to enter URL
Illustration <input type="url" name="website" >
27. Form Elements - tel
22
Syntax <input type = “tel”>
Description Used to add contact number
Illustration <input type=“tel" name="contact" >
Notes It does not enforce a particular format
28. Form Elements - search
23
Syntax <input type = “search”>
Description Used to implement search field
Illustration <input type="search" name="searchfield" >
29. Form Elements - color
24
Syntax <input type = “color”>
Description Used to add color picker
Illustration <input type="color" name="favColor" >
30. Form Elements - range
25
Syntax <input type = “range”>
Description Used to enter number input using a range control
Illustration <input type="range" name="maxprice" >
31. Form Elements - datetime
26
Syntax <input type = “datetime”>
Description Used to enter a date and time value where the time zone is provided as
GMT
Illustration <input type="datetime" name="dob" >
Notes Not supported in any browsers
32. Form Elements – datetime-local
27
Syntax <input type = “datetime-local”>
Description Used to enter a date and time value where the time zone is the local time
zone
Illustration <input type="datetime-local" name="dob" >
33. Form Elements - date
28
Syntax <input type = “date”>
Description Used to enter date alone without time
Illustration <input type="date" name="dob" >
34. Form Elements - time
29
Syntax <input type = “time”>
Description Used to enter time
Illustration <input type="time" name="batchtime" >
35. Form Elements - week
30
Syntax <input type = “week”>
Description Used to enter week
Illustration <input type="week" name="currentweek" >
36. Form Elements - month
31
Syntax <input type = “month”>
Description Used to enter month
Illustration <input type="month" name="currentmonth" >
37. Form Attributes - Pattern
32
Syntax pattern = <Reg_Exp>
Description Used to specify a regular expression to validate the input
Illustration <input type="text" pattern="[A-Za-z]" >
38. Form Attributes - Required
33
Syntax required
Description Used to specify that the input field must contain a value before the form
can be submitted
Illustration <input type="text" required >
39. Form Attributes - min, max, step
34
Syntax min = val
max = val
step = val
Description Used to specify range and the increment for number and range input
types
Illustration <input type="number" min="0" max="100" step="1">
40. Form Attributes - maxlength
35
Syntax maxlength = val
Description Used to specify the maximum length of an input field
Illustration <input type="text" maxlength="10">
41. Form Attributes - Pattern
36
Syntax pattern = <Reg_Exp>
Description Used to specify a regular expression to validate the input
Illustration <input type="text" pattern="[A-Za-z]" >
42. Form Attributes - novalidate
37
Syntax <form novalidate>
Description Used to indicate not to validate the form on submission
Illustration <form name=“login” novalidate>
43. Form Attributes - datalist
38
Syntax <datalist><options/></datalist>
Description Used to suggest input values to the associated form field
Suggests autocomplete option as the user types data
Illustration <input type="text" id="location" list="cities">
<datalist id="cities">
<option value="Bangalore" />
<option value="Chennai" />
<option value="Mumbai" />
</datalist>
44. Form Attributes - multiple
39
Syntax multiple
Description Used to allow entering multiple values in a single input field Value": on/off
Illustration <input type="email" multiple>
45. Form Attributes - output
40
Syntax <output></output>
Description Used to display the result of a calculation
Illustration <form oninput ="x.value = parseInt(a.value) > parseInt(b.value) ? True : false">
<input type="number" id="a" value="100"> >
<input type="number" id="b" value="50">= <output name="x" for="a
b">true</output>
</form>
46. Form Attributes - autocomplete
41
Syntax autocomplete = val
Description Used to enable or disable autocomplete for entire form or for individual
input fields Value": on/off
Illustration <input type="text" autocomplete="off">
47. Form Attributes - autofocus
42
Syntax autofocus
Description Used to set the focus on an input field
Can be useful when you want the user to start using the form
Illustration <input type="text" autofocus>
48. Form Attributes - placeholder
43
Syntax placeholder = “value”
Description Used to provide a hint to the user to specify what is expected to be
entered
Illustration <input type="text" placeholder="Enter your name">
49. Web storage
44
Syntax localStorage & sessionStorage
Description Web storage can be used to store data locally within the user's
browser
It can replace cookies which was earlier used for similar purpose
Web Storage is more secure and faster
Used to store large amounts of data, without affecting the website's
performance
Data is not included with every server request, but used ONLY when
asked for The data is stored in name/value pairs, and is accessible by
the web page that stored the data
Illustration if (typeof(Storage) != "undefined") {
localStorage.setItem("lastname", "Smith");
document.getElementById("result").innerHTML =
localStorage.getItem("lastname"); }
Notes sessionStorage is similar to localStorage, but the data is deleted when
the web page is closed
50. Application Cache
45
Syntax manifest = filename
Description Used to cache web application and makes web pages accessible without
internet connection Advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - browser will only download updated/changed
resources from the server
Illustration <html manifest="demo.appcache">
Notes Uses a manifest file to specify the files that need to be cached
51. Application Cache – Manifest File
46
Syntax
Description It is a simple text file which tells the browser what to cache (and what to
never cache).
CACHE MANIFEST - Files under this will be cached after they are
downloaded for the first time
NETWORK - Files under this header will never be cached and require a
connection to the server
FALLBACK - used to specify fall-back page if a page is inaccessible
Illustration CACHE MANIFEST
/logo.gif
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Notes Application cache is available till the time:
The user clears the browser's cache
The manifest file is modified
The application cache is programmatically updated
52. Web SQL
47
Syntax
Description Introduces a set of APIs to manipulate client-side databases using SQL
openDatabase: creates database object either using existing database or
creating new one
transaction: gives the ability to control a transaction and performing either
commit or rollback based on the situation
executeSql: used to execute actual SQL query
Illustration
53. Web SQL – Open database
48
Syntax openDatabase
Description Takes care of opening a database if it already exists
This method will create it if it does not exist
Parameters:
Database name
Version number
Text description
Size of database
Creation callback
Illustration openDatabase(‘logsdb', '1.0', 'Test DB', 2 * 1024 * 1024);
54. Web SQL – Transaction
49
Syntax transaction()
Description This function needs a single argument, which is a function that takes care of
actually executing the query as follows
Illustration db.transaction(function (tx) {
});
55. Web SQL – Queries
50
Syntax executeSql()
Description This function needs a single argument, which is a function that takes care of
actually executing the query as follows:
Illustration tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, “start")');
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len =
results.rows.length;
});
56. Geolocation
51
Syntax navigator.geolocation
Description Used to locate the position of current internet user
Not only gives the latitude but can also view the digital map
Can be used on browser, but best suited for smartphones
Illustration function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
} }
function showPosition(position) {
var latlon = position.coords.latitude+","+position.coords.longitude;
alert(latlon);
57. Web workers
52
Syntax worker()
Description Used to run JavaScripts in the background, independently of other scripts
It runs without affecting the performance of the page
Illustration if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
58. Web Sockets
53
Syntax websocket
Description Web Sockets is a next-generation bidirectional communication
technology
It operates over a single socket and exposed via JavaScript interface
You can send data by calling send() method
Data is received by an onmessageevent handler
Illustration if ("WebSocket" in window) {
var ws = new WebSocket("ws://echo.websocket.org");
ws.onopen = function() {
ws.send("Message to send");
};
ws.onmessage = function (evt) {
var received_msg = evt.data; };
}
Notes The socket starts out as a HTTP connection and then upgrades to a TCP
socket after a HTTP handshak
59. Web Sockets
54
Syntax websocket
Description Web Sockets is a next-generation bidirectional communication
technology
It operates over a single socket and exposed via JavaScript interface
You can send data by calling send() method
Data is received by an onmessageevent handler
Illustration if ("WebSocket" in window) {
var ws = new WebSocket("ws://echo.websocket.org");
ws.onopen = function() {
ws.send("Message to send");
};
ws.onmessage = function (evt) {
var received_msg = evt.data; };
}
Notes The socket starts out as a HTTP connection and then upgrades to a TCP
socket after a HTTP handshak
61. CSS3 - Introduction
CSS3 is the latest version of Cascading Style Sheet language
Work on CSS3 began in the year 1998 and the working draft was released in 2001
CSS3 is still under development
CSS3 is divided into different modules
CSS3 offers backward compatibility
Some of the CSS3 modules are:
Background
Box
Font
Layout
Color
Selectors
Media queries
55
62. Vendor Prefixes
55
Syntax Ios, chrome, & safari: -webkit-
Firefox: -moz-
Internet explorer: -ms-
Opera: -o-
Description CSS vendor prefixes or CSS browser prefixes are a way to add support
for new CSS features in a sort of testing and experimentation period
Illustration -moz-border-radius: 10px 5px;
-webkit-border-radius: 10px 5px;
Border-radius: 10px 5px;
Notes Vendor prefixes are temporary
63. Color Formats
56
Syntax HSL (Hue, Saturation, Lightness)
HSLA (Hue, Saturation, Lightness, Alpha)
RGBA (Red, Green, Blue, Alpha)
Description The CSS3 Color module introduces several new, more convenient ways
to specify colors and transparency
Illustration background-color: hsla(190, 30%, 94%, 1);
Notes
64. Gradient
57
Syntax linear-gradient
radial-gradient
Description CSS3 gradients let you display smooth transitions between two or
more specified colors 2 types: Linear gradient & Radial gradient
Illustration background: -webkit-linear-gradient(white, blue);
Notes Earlier images were used for such effects.
CSS3 gradients reduce download time and bandwidth usage
Gradients look better when zoomed, because the gradient is generated
by the browser
65. Linear Gradient
58
Syntax gradient
Description Defined by the direction – down, up, right, left, diagonal
Illustration background: -webkit-linear-gradient(white, blue);
background: -webkit-linear-gradient(left, white, blue);
background: -webkit-linear-gradient(bottom right, white, blue);
background: -webkit-linear-gradient(45deg, white, blue);
background: -webkit-linear-gradient(blue, white, blue);
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
66. Radial Gradient
59
Syntax gradient
Description A radial gradient is defined by its center You can specify the gradient's
center, shape (circle or ellipse) as well as its size. By default, center is
center, shape is ellipse, and size is farthest-corner.
Illustration background: -webkit-radial-gradient(red, green, blue);
background: -webkit-radial-gradient(circle, red, yellow, green);
background: -webkit-radial-gradient(60% 55%, closest-side, blue, green,
yellow, black);
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
67. Web fonts
60
Syntax @font-face
Description Used to add fonts that are not installed on the user’s system Allows you to
use any font which will be downloaded to the user’s system and used
Illustration @font-face {
font-family: newFont;
src: url(sansation_light.woff);
}
p {
font-family: newFont;
}
68. Text Shadows
61
Syntax text-shadow
Description Used to apply shadows to text
You can specify horizontal shadow, vertical shadow, blur distance and the
color of the shadow
Illustration text-shadow:10px 10px 5px #FF0000;
70. Multi Column Text
63
Syntax column-count, column-gap & column-rule
Description Used to display text in multiple columns, like in newspapers Properties:
column-count
column-gap
column-rule
Illustration -webkit-column-count: 4; /* Chrome, Safari, Opera */
-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
-webkit-column-rule:1px outset #ff00ff; /* Chrome, Safari, Opera */
78. Flex Container
71
Syntax display: flex;
Description Used to create a flex container, either inline or block
Applied only to the direct children
Illustration display: flex
Notes This should be applied to the parent element
79. Flex Direction
72
Syntax flex-direction: value;
Description Used to define in direction in which the flex items should be placed in
the flex container
Values: row, column, row-reverse, column-reverse
Illustration flex-direction: column;
Notes This should be applied to the parent element
80. Flex Wrap
73
Syntax flex-wrap: value;
Description Used to allow the items to wrap within the flex container
By default items in a flex container will fit onto one line
Flex-wrap changes this default behavior
Values: wrap, nowrap, wrap-reverse
Illustration flex-wrap: wrap;
Notes This should be applied to the parent element
This property also depends on the direction of the flex items
81. Flex Flow
74
Syntax flex-flow: value;
Description This is a shorthand property for flex-direction and flex-wrap
Values: <flex-direction> <flex-wrap>
Illustration flex-flow: row wrap;
Notes This should be applied to the parent element
82. Justify Content
75
Syntax justify-content: value;
Description Used to distribute the excess space between the flex items
Excess space could be either due to inflexible items or flexible but have
reached their maximum size.
Values: flex-start, flex-end, center, space-between, space-around
Illustration justify-content:flex-start;
Notes This should be applied to the parent element
83. Align Items
76
Syntax align-items: values;
Description Used to define how to align the flex items along the cross axis
Values: flex-start, flex-end, center, stretch and baseline
Illustration align-items: flex-start;
Notes This should be applied to the parent element
84. Align Contents
77
Syntax align-content: values;
Description Used to align extra spaces in the cross-axis
Similar to justify-content, but in the perpendicular direction
Values: flex-start, flex-end, center, stretch, space-between, space-
around
Illustration align-content: flex-start;
Notes This should be applied to the parent element
This property has no effect when there is only one line of flex items
85. Order
77
Syntax order: value;
Description Used to control the order in which the flex item appear in a flex
container By default they are laid out in the order they are defined in
Values: integer value
Illustration order: 1
Notes This should be applied to the child elements
86. Flex Grow
78
Syntax flex-grow: value;
Description Used to define the amount of space a flex item should take up within
the flex container This servers as a proportion
Values: integer value
Illustration flex-grow: 2
Notes This should be applied to the child element
Default value is zero
87. Flex Shrink
79
Syntax flex-shrink: value;
Description Allows a flex item to shrink if required
Values: integer value
Illustration flex-shrink: 2
Notes This should be applied to the child element
Default value is zero
88. Flex Basis
80
Syntax flex-basis: value;
Description Defines the default size of an element before the remaining space is
distributed
Values: length, auto
Illustration flex-basis: 200px
Notes This should be applied to the child element
89. Flex
81
Syntax flex: value;
Description Shorthand for flex-grow, flex-shrink and flex-basis Flex-shrink and flex-
basis parameters are optional and defaults to 0 auto
Values: <flex-grow> <flex-shrink> <flex-basis>
Illustration flex: 1 1 200px;
Notes This should be applied to the child element
Ensures all items are of the same length irrespective of the content
90. Align Self
82
Syntax align-self: value;
Description Used to override default alignment for individual flex items
Values: flex-start, flex-end, center, stretch, baseline
Illustration align-self: flex-end
Notes This should be applied to the child element
91. Transition
83
Syntax transition: <property> <delay> <duration> <timing>
Description Used to add effects while changing styles of elements
Can replace flash or JavaScript to add effects
Property: name of the CSS property the transition effect is for
Delay: specifies the time frame after which the transition starts
Duration: time frame for the animation to complete
Timing: specifies the speed of the transition.
Values: ease, linear, ease-in, ease-out, ease-in-out
Illustration div{
width: 200px;
transition: width 2s;
}
div:hover{
width: 500px;
}
Notes
92. Transform
84
Syntax transform: <transform function>
Description Used to add 2D and 3D transformation to an element
Can be used to rotate, scale, move, skew
Some of the transform functions:
translate(x,y), translateX(x), scale(x,y), scaleX(x), rotate(angle),
rotate(angle), skew(x-angle, yangle), skewX(angle)
Illustration div {
transform: scale(50px, 100px);
}
93. Animation
85
Syntax @keyframes <name>
animation: <name> <duration> <timing-function> <delay> <iteration>
<direction>
Description Used to create animations by changing CSS properties
Can specify when the change will take place using percentage(0%,
100%) or keywords(from, to)
Illustration @keyframes myanimation{
0%{ width: 100px; }
100%{ width: 500px;}
}
div{
animation: myanimation 2s;
}
94. Selectors
86
Syntax
Description Many new selectors are added and implemented in CSS3
Some of the new selectors are:
Structural: root, nth-child(n), nth-last-child(n), last-child, empty, target,
UI element: enabled, disabled, checked, selection
Negation: not(s)
Illustration p:nth-child(2) {
background:#ff0000;
}
95. Media Queries
87
Syntax @media
Description Used to write styles for different screen sizes, multiple devices
Illustration @media screen and (max-device-width: 320px) { }
/* smartphones (portrait) */
@media screen and (max-device-width: 480px) { }
/* smartphones (landscape) */
@media screen and (max-device-width: 1024px) { }
/* tablet */
<link rel="stylesheet" type="text/css" media="only screen and (max-device-
width: 480px)" href="small-device.css" />