Introduction to whats new in css3

WHAT’S NEW IN
HTML5 AND CSS3

Created by : Usman Mehmood
Type: In-house workshop
Organization: Systemsltd.

AGENDA: TRAINING (WHAT’S NEW IN HTML5 AND
CSS3 )
















Series Introduction
Creating Your First HTML5 Web Page (with example).
Understanding the HTML5 You Wrote (with example)
Working with Paragraphs and Text (with example)
Defining the Structure of Your Document(with example)
Working with Figures and Images(with example)
Creating Tables why and when to use tables(with example)
Form Validation (with example)
Styling Your First HTML5 Web Page with CSS3 (with
example)
What’s new in CSS3
Css3 round corner example (with example)
CSS3 Pseudo selectors (with example)
Other New features in CSS3

TOOL FOR PLAYGROUND



http://jsfiddle.net

http://coding.smashingmagazine.com/2011
/11/18/html5-semantics/

New Tags
Tag
<article>

Description
Defines an article

<aside>

Defines content aside from the page content

<bdi>

Isolates a part of text that might be formatted in a different direction from other text outside it

<command>

Defines a command button that a user can invoke

<details>

Defines additional details that the user can view or hide

<dialog>

Defines a dialog box or window

<summary>

Defines a visible heading for a <details> element

<figure>

Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

<figcaption>

Defines a caption for a <figure> element

<footer>

Defines a footer for a document or section

<header>

Defines a header for a document or section

<mark>

Defines marked/highlighted text

<meter>

Defines a scalar measurement within a known range (a gauge)

<nav>

Defines navigation links

<progress>

Represents the progress of a task

<ruby>

Defines a ruby annotation (for East Asian typography)

<rt>

Defines an explanation/pronunciation of characters (for East Asian typography)

<rp>

Defines what to show in browsers that do not support ruby annotations

<section>

Defines a section in a document

<time>

Defines a date/time

<wbr>

Defines a possible line-break

Media tags

Tag

Description

<audio> Defines sound content

<video> Defines a video or movie
<source Defines multiple media resources for <video> and
>
<audio>
<embed Defines a container for an external application or
>
interactive content (a plug-in)
<track> Defines text tracks for <video> and <audio>

FORM VALIDATION AND NEW INPUTS
















color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
http://jsfiddle.net/mehmoodusman786/7wn
Hz/

http://jsfiddle.net/mehmoodusman786/jruK
6/1/

http://image.online-convert.com/convert-tosvg

CREATING YOUR FIRST HTML5 PAGE












<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta charset="utf-8">
<title>
HTML5 Title
<title>
</head>
<body>
</body>
</html>

Using the new semantic elements
To illustrate how the new semantic HTML5 elements should be used, you
will now add these to the index.html file. The basic structure of these
elements will adhere to the following outline:

http://www.w3schools.com/html/html5_sem
antic_elements.asp
http://jsfiddle.net/mehmoodusman786/uce9
D/

TABLES OR DIVS


Tables generally increase the complexity of documents and make them more difficult to
maintain. Also, they reduce a website’s flexibility in accommodating different media and
design elements, and they limit a website’s functionality.



Table contains different tags: the table tag being the wrapper, tr for each row and td for
each cell. The thead and tbody tags are not used for structural purposes because they
add semantic meaning to the content. For readability, each tag is normally given its own
line of code, with indention. The colspanand rowspan attributes make the code even
more complex, and any developer maintaining that page in future has to go through a lot
of code to understand its structure.



Another drawback to tables is that they make it harder to separate content from design.
The border, width, cellpadding and cellspacing tags are used in about 90% of all websites
that use tables, according to MAMA. This adds code to the HTML that should instead go
in the style sheet.



Rule of Thumb



Use tables to display tabular data. Use div's for structure. This is tabular data so go with
a table.

LOCAL AND SESSION STORAGE
What is HTML5 Web Storage?
 With HTML5, web pages can store data locally
within the user's browser.
 Earlier, this was done with cookies. However, Web
Storage is more secure and faster. The data is not
included with every server request, but used ONLY
when asked for. It is also possible to store large
amounts of data, without affecting the website's
performance.
 The data is stored in key/value pairs, and a web
page can only access data stored by itself.
 http://www.w3schools.com/html/html5_webstorage.
asp


WHAT IS APPLICATION CACHE?
HTML5 introduces application cache, which means
that a web application is cached, and accessible
without an internet connection.
 Application cache gives an application three
advantages:
 Offline browsing - users can use the application
when they're offline
 Speed - cached resources load faster
 Reduced server load - the browser will only
download updated/changed resources from the
server
http://www.w3schools.com/html/html5_app


_cache.asp

WEB WORKERS
What is a Web Worker?
 When executing scripts in an HTML page, the page
becomes unresponsive until the script is finished.
 A web worker is a JavaScript that runs in the
background, independently of other scripts, without
affecting the performance of the page. You can
continue to do whatever you want: clicking,
selecting things, etc., while the web worker runs in
the background.




http://www.w3schools.com/html/html5_webworkers.
asp

WEB SOCKETS


Web Sockets is a next-generation bidirectional
communication technology for web applications
which operates over a single socket and is exposed
via a JavaScript interface in HTML 5 compliant
browsers.

http://www.tutorialspoint.com/html5/html5_websock
et.htm
 http://net.tutsplus.com/tutorials/javascript-ajax/startusing-html5-websockets-today/


LINKS


http://html5demos.com/

INTRODUCTION TO CSS3
Successor of CSS2
 It comes with new modules
 Below is a non exhaustive list of features that tend to be labelled as
“css3" in the medias:









Some of the most important CSS3 modules are:
Selectors
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

BORDERS

WHAT'S NEW CSS3

With CSS3, you can create rounded borders, add shadow to boxes, and use an
image as a border - without using a design program, like Photoshop , animate
objects, apply transition functions etc.

CSS SELECTORS



Selectors are the names that you give to your
different styles.

In the style definition you define how each selector
should work (font, color etc.).
Then, in the body of your pages, you refer to these
selectors to activate the styles.

FOR EXAMPLE

With CSS3, In this case B.headline is the selector.
The above example would result in this output:

THERE ARE MANY TYPES OF SELECTORS:


HTML TAG selectors



Used to define styles associated to HTML tags. (A
way to redefine the look of tags)
Class selectors
Used to define styles that can be used without
redefining plain HTML tags.
ID selectors
Used to define styles relating to objects with a
unique ID (most often layers) and more….

TAG SELECTORS


The general syntax for an HTML selector is:
HTMLSelector {Property:Value;} HTML selectors
are used when you want to redefine the general
look for an entire HTML tag.

Out put

CLASS SELECTORS
Class selectors are used when you want to define a style that does not
redefine an HTML tag entirely.
When referring to a Class selector you simply add the class to an
HTML tag like in the above example (class="headline").

ID SELECTORS
ID selectors are used when you want to define a style relating to an
object with a unique ID.
This selector is most widely used with layers (as in the above
example), since layers are always defined with a unique ID.

GROUPED SELECTORS
Most often selectors will share some of the same styles, for example, being
based on the same font.In these cases, rather than defining the font for each
and every selector, one by one, you can group them, and thus assign the font
to all the selectors at once.Look at this example, made without grouping:

As you can see, the only style that varies is the font-size.
In the next example we have grouped the selectors, and defined the common styles at once.

Less to type, easier to change and guaranteed to be the same for all styles.

ATTRIBUTE SELECTORS
E[attr$=val] (IE8+, WebKit, Opera, Mozilla)
Matches any element E whose attribute attr ends in val. In other words, the val
matches the end of the
attribute value.
E[attr*=val] (IE8+, WebKit, Opera, Mozilla)
Matches any element E whose attribute attr matches val anywhere within the
attribute. In other words,
the string val is matched anywhere in the attribute value. It is similar to
Using the same example as above, .fakelink[title~=info] {} would match any
element with the class
fakelink that has a title attribute containing the string info, such as "Click here
for more information."
More Examples
Some Real time Examples

PSEUDO CLASS SELECTORS

They are immensely useful in a variety of situations. Some of them are
CSS3, some CSS2... it depends on each particular one. Outside of
IE, they have great browser support. In IE land, even IE8, support is
pretty barren. However, the IE9 preview has full support of them. The
link-related ones work but not much else. Let's take a brief look at each
one of them. Don't worry, there isn't that many.

PSEUDO-CLASSES
:enabled
A user interface element that’s enabled.
:disabled
Conversely, a user interface element that’s disabled.
:checked
Radio buttons or checkboxes that are selected or ticked.
:valid
Applies to elements that are valid, based on the type or pattern attributes
:invalid
Applies to empty required elements, and elements failing to match the requirements defined by the type or pattern attributes.
:in-range
Applies to elements with range limitations, where the value is within those limitations. This applies, for example, to number
and range input types with min and max attributes
:out-of-range
The opposite of :in-range: elements whose value is outside the limitations of their range.
:required
Applies to form controls that have the required attribute set.
:optional
Applies to all form controls that do not have the required attribute.
:read-only
Applies to elements whose contents are unable to be altered by the user. This is usually most elements other than form fields.
:read-write
Applies to elements whose contents are user-alterable, such as text input fields

STRUCTURAL PSEUDO-CLASSES
:root
The root element, which is always the html element.
E F:nth-child(n)
The element F that is the nth child of its parent E.
E F:nth-last-child(n)
The element F that is the nth child of its parent E, counting backwards from the last one. li:nth-last-child(1) would match the
last item in any list—this is the same as li:last-child (see below).
E:nth-of-type(n)
The element that is the nth element of its type in a given parent element.
E:nth-last-of-type(n)
Like nth-of-type(n), except counting backwards from the last element in a parent.
E:first-child
The element E that is the first child E of its parent. This is the same as :nthchild(1).
E:last-child
The element E that is the last child E of its parent, same as :nth-last-child(1).
E:first-of-type
Same as :nth-of-type(1).
E:last-of-type
Same as :nth-last-of-type(1).
E:only-child
An element that’s the only child of its parent.
E:only-of-type
An element that’s the only one of its type inside its parent element.
E:empty
An element that has no children; this includes text nodes, so <p>hello</p> will not be matched.
E:lang(en)
An element in the language denoted by the two-letter abbreviation (en).
E:not(exception)
This is a particularly useful one: it will select elements that don’t match the selector in the parentheses.

A list of common pseudo classes
Learn more
CSS3 structural pseudo-class selector tester

Child (>) combinator
A child combinator is a "greater-than sign" (>) character that separates
two simple selectors. Whitespace is not significant. A selector of the
form "E>F" matches when element F is a direct descendant of element
E.
Note Requires Windows Internet Explorer 7 or later.
Note Combinators are not supported in webpages that are
displayed in the Microsoft Internet Explorer 5 document mode (also
known as "Quirks" mode). To use attribute selectors, add
a !DOCTYPE directive that specifies a standards-based document.
For more information, see Defining Document Compatibility.

USING FONTS IN CSS3

Sample text generators
Another font playground

CSS3 MULTIPLE COLUMNS
Newspaper-style columns have been
close to impossible to accomplish
with CSS
and HTML without forcing column
breaks at fixed positions
With CSS3 columns, the browser
determines when to end one column
and begin the next without
requiring any extra markup. You
retain the flexibility to change the
number of columns as well as their
width, without having to go back in
and alter the page’s markup.
A good tutorial to get you started
Try you self

The column-count-property
The column-count property specifies the
number of columns desired, and the
maximum number of
columns allowed. The default value of auto
means that the element has one column.
Ex: #primary article .content {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}

BORDER RADIUS IN CSS3

View Example

3. CSS3 BACKGROUND
we will be taking a look at the new background properties. These include background size, using
more than one background for an element, and background origin (which effects the position of a
background).

The new features allow greater control of the background element and will provide designers with a
whole array of new possibilities.

Multiple Backgrounds
The new ability to use multiple backgrounds is a great time saver, allowing you to achieve effects
which previously required more than one div. Whether it will be possible to combine this with
background-size will be interesting to see.
The example below uses one background for the top border, one repeated vertically for the left and
right borders and a third at the bottom.

Example1
Example2

4. CSS3 TEXT EFFECTS

Real Time Example

More on Css3 Text Effects

SHADOWS

Understanding how it works
A Quick Box shadow generator

translate()
rotate()
scale()
skew()
matrix()

<style>
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>

THE TRANSLATE() METHOD


With the translate() method, the element moves
from its current position, depending on the
parameters given for the left (X-axis) and the top (Yaxis) position:

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and
Chrome */
}

Example

THE ROTATE() METHOD


With the rotate() method, the element rotates
clockwise at a given degree. Negative values are
allowed and rotates the element counter-clockwise.

Understanding behaviour

You can get all information about
transformations from here

Cards Example
Another Example

TRANSITIONS
These transition properties allow elements to
change values over a specified duration, animating
the property changes, rather than having them
occur immediately
Sample1 Sample2
 How it Works


ANIMATION USING CSS3


With CSS3, we can create animations, which can
replace animated images, Flash animations, and
JavaScripts in existing web pages.
http://www.w3schools.com/css/css3_anima
tions.asp

ANIMATION GENERATORS


http://cssanimate.com/

CSS3 MEDIA QUERIES
CSS2 added support for the media="screen" way of defining which stylesheet to use for
which representation of the data. CSS3 adds a new feature to this functionality, by adding
media queries.Basically, this means you can change stylesheets based on for instance the
width and height of theviewport. In a broader sense, this means as the spec puts it: “by
using
Media Queries, presentations
can be tailored to a specific range of output devices without changing the content itself.”
Below are two tests, for min-width and max-width, currently only functional (and thus
green) in Safari 3, Opera, and Firefox 3.1 (Alpha). This is however the future of web
development, and could
make building pages that are usable in both the mobile as the normal web a lot easier.

MEDIA QURIES
For sake of efficiency though, it might be better to place
multiple styles for different browsers and sizes into a single
style sheet. This eliminates the need for multiple requests for
several different sheets. Here are a couple of more examples.
@media screen and (min-width: 600px) {
.sixhundredminwidth {
width: 30%;
float: right;
}
}

and
@media screen and (max-width: 600px) {
.sixhundredmaxwidth {
clear: both;
font-size: 1.3em;
}
}

MULTIPLE STYLE SHEETS USING MEDIA QUERIES




You don’t have to use multiple style sheets to
accommodate for all the different screen sizes and
browsers that your visitors might use. However, if
you prefer a different style sheet for each design,
then you can use the following code as an example
to do so:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />

Realtime Example
iPad and Android Orientation Code

sample free Media Query generator

CSS3 GRADIENTS WHY USE THEM?
Run time Example


Jump start guide

Auto gen1
Auto Generator 2

MENU AND BUTTONS GENERATORS
http://purecssmenu.com/
 http://www.devdude.com/tools/css/button_text/
 http://cssmenumaker.com/
 http://jigsaw.w3.org/css-validator/


IMAGE ENCODING


http://www.cssportal.com/image-to-data/

CSS3 GENERATORS
Border generator
font generator

http://lea.verou.me/css3patterns/

styling text
noise-texture
box-shadow

http://cssdesk.com/

Css3 maker1

http://prefixmycss.com/
Css Generators database

Grid layout genrator
grid_layout_generator

http://www.css3d.net/ribbon-generator

GRADIENT GENERATORS
http://www.colorzilla.com/gradient-editor/
 http://www.cssportal.com/css-color-converter/
 http://csslayoutgenerator.com/
 http://csscheckbox.com/
 css3 cool gallery generator
 http://www.css3factory.com/linear-gradients


VIEW PORT RESIZER


http://lab.maltewassermann.com/viewport-resizer/

TRANSFORMATION ANIMATION GENERATORS
http://westciv.com/tools/3Dtransforms/index.html
 http://www.git-tower.com/blog/css3-transforms/


http://www.joelambert.co.uk/morf/
http://matthewlein.com/ceaser/
http://www.css3generator.de/transform.html
transition genrators
http://www.joelambert.co.uk/morf/
http://www.css3animationgenerator.com/

CSS SPRITES GENERATORS


http://spritegen.website-performance.org/
http://yostudios.github.io/Spritemapper/

FONTS AND TEXT STYLING


http://css3generator.com/
http://www.3dcsstext.com/
http://html-generator.weebly.com/cssspeech-bubble-generator.html
http://www.fontsquirrel.com/tools/webfontgenerator

JQUERY

WIDGET CREATOR

http://jsfiddle.net/KeesCBakker/QkPBF/
 http://www.webappers.com/2010/07/01/how-tobuild-a-web-widget-using-jquery/
 http://bitovi.com/blog/2010/10/writing-the-perfectjquery-plugin.html
 http://ajaxian.com/archives/iwidgets-public-betaimpressive-widget-builder


Introduction to whats new in css3

More Related Content

What's hot

Similar to Introduction to whats new in css3

Recently uploaded

Introduction to whats new in css3