Introduction to whats new in css3
70
WHAT’S NEW IN HTML5 AND CSS3 Created by : Usman Mehmood Type: In-house workshop Organization: Systemsltd.
-
Upload
usman-mehmood -
Category
Education
-
view
114 -
download
3
description
Whats new in Css3 and html5
Transcript of Introduction to whats new in css3
WHAT’S NEW IN HTML5 AND CSS3
Created by : Usman Mehmood Type: In-house workshopOrganization: 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
http://coding.smashingmagazine.com/2011/11/18/html5-semantics/
Tag Description<article> 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
New 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>
Media tags
FORM VALIDATION AND NEW INPUTS color date datetime datetime-local email month number range search tel time url week
http://jsfiddle.net/mehmoodusman786/7wnHz/
http://jsfiddle.net/mehmoodusman786/jruK6/1/
http://image.online-convert.com/convert-to-svg
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 elementsTo 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://jsfiddle.net/mehmoodusman786/uce9D/
http://www.w3schools.com/html/html5_semantic_elements.asp
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 serverhttp://www.w3schools.com/html/html
5_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_websocket.htm
http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/
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
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.
WHAT'S NEW CSS3
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 selectorsUsed to define styles that can be used without redefining plain HTML tags.
ID selectorsUsed 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 SELECTORSMost 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 theattribute 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 classfakelink that has a title attribute containing the string info, such as "Click here for more information."
Some Real time Examples
More 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
:enabledA user interface element that’s enabled.:disabledConversely, a user interface element that’s disabled.:checkedRadio buttons or checkboxes that are selected or ticked.:validApplies to elements that are valid, based on the type or pattern attributes :invalidApplies to empty required elements, and elements failing to match the requirements defined by the type or
pattern attributes.:in-rangeApplies to elements with range limitations, where the value is within those limitations. This applies, for
example, to numberand range input types with min and max attributes:out-of-rangeThe opposite of :in-range: elements whose value is outside the limitations of their range.:requiredApplies to form controls that have the required attribute set.:optionalApplies to all form controls that do not have the required attribute.:read-onlyApplies to elements whose contents are unable to be altered by the user. This is usually most elements other
than form fields.:read-writeApplies to elements whose contents are user-alterable, such as text input fields
STRUCTURAL PSEUDO-CLASSES
:rootThe 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-childThe element E that is the first child E of its parent. This is the same as :nthchild(1).E:last-childThe element E that is the last child E of its parent, same as :nth-last-child(1).E:first-of-typeSame as :nth-of-type(1).E:last-of-typeSame as :nth-last-of-type(1).E:only-childAn element that’s the only child of its parent.E:only-of-typeAn element that’s the only one of its type inside its parent element.E:emptyAn 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
CSS3 structural pseudo-class selector tester
Learn more
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.
Child (>) combinator
SUMMARY
USING FONTS IN CSS3
Sample text generators
Another font playground
CSS3 MULTIPLE COLUMNS
Newspaper-style columns have been close to impossible to accomplish with CSSand HTML without forcing column breaks at fixed positions
With CSS3 columns, the browser determines when to end one column and begin the next withoutrequiring any extra markup. You retain the flexibility to change the number of columns as well as theirwidth, without having to go back in and alter the page’s markup.
The column-count-propertyThe column-count property specifies the number of columns desired, and the maximum number ofcolumns 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;
}
A good tutorial to get you started
Try you self
BORDER IN CSS3
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
CSS3 TRANSFORMS
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 (Y-axis) 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.
Another Example
You can get all information about transformations from here
Cards Example
Understanding behaviour
TRANSITIONS
These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately
How it Works Sample1 Sample2
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_animations.asp
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 couldmake building pages that are usable in both the mobile as the normal web a lot easier.
MEDIA QURIESFor 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" />
iPad and Android Orientation Code
Realtime Example
sample free Media Query generator
CSS3 GRADIENTS WHY USE THEM?
Jump start guide
Run time Example
Auto gen1
Auto Generator 2
MENU AND BUTTONS GENERATORS
http://purecssmenu.com/ http://www.devdude.com/tools/css/button_tex
t/
http://cssmenumaker.com/ http://jigsaw.w3.org/css-validator/
CSS3 GENERATORSBorder generator
font generator
styling text
noise-texture
box-shadow
http://lea.verou.me/css3patterns/
http://prefixmycss.com/
Css Generators database
grid_layout_generator
Css3 maker1
Grid layout genrator
http://cssdesk.com/
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://matthewlein.com/ceaser/
http://www.joelambert.co.uk/morf/
http://www.css3-generator.de/transform.html
http://www.joelambert.co.uk/morf/
http://www.css3animationgenerator.com/
transition genrators
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/css-speech-bubble-generator.htmlhttp://www.fontsquirrel.com/tools/webfont-generator
JQUERY WIDGET CREATOR
http://jsfiddle.net/KeesCBakker/QkPBF/ http://www.webappers.com/2010/07/01/how-t
o-build-a-web-widget-using-jquery/
http://bitovi.com/blog/2010/10/writing-the-perfect-jquery-plugin.html
http://ajaxian.com/archives/iwidgets-public-beta-impressive-widget-builder
