introduction to whats new in css3
DESCRIPTION
Whats new in Css3 and html5TRANSCRIPT
![Page 1: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/1.jpg)
WHAT’S NEW IN HTML5 AND CSS3
Created by : Usman Mehmood Type: In-house workshopOrganization: Systemsltd.
![Page 2: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/2.jpg)
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
![Page 4: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/4.jpg)
![Page 5: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/5.jpg)
![Page 6: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/6.jpg)
http://coding.smashingmagazine.com/2011/11/18/html5-semantics/
![Page 7: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/7.jpg)
![Page 8: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/10.jpg)
![Page 11: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/11.jpg)
![Page 13: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/13.jpg)
FORM VALIDATION AND NEW INPUTS color date datetime datetime-local email month number range search tel time url week
http://jsfiddle.net/mehmoodusman786/7wnHz/
![Page 14: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/14.jpg)
![Page 15: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/15.jpg)
http://jsfiddle.net/mehmoodusman786/jruK6/1/
http://image.online-convert.com/convert-to-svg
![Page 16: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/16.jpg)
![Page 17: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/17.jpg)
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>
![Page 18: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/19.jpg)
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.
![Page 20: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/23.jpg)
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/
![Page 25: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/25.jpg)
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
![Page 26: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/26.jpg)
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
![Page 27: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/27.jpg)
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.
![Page 28: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/28.jpg)
FOR EXAMPLE
With CSS3, In this case B.headline is the selector.The above example would result in this output:
![Page 29: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/29.jpg)
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….
![Page 30: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/30.jpg)
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
![Page 31: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/31.jpg)
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").
![Page 32: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/32.jpg)
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.
![Page 33: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/33.jpg)
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.
![Page 34: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/34.jpg)
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
![Page 35: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/35.jpg)
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.
![Page 36: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/36.jpg)
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
![Page 37: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/37.jpg)
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
![Page 38: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/38.jpg)
![Page 39: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/39.jpg)
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.
![Page 40: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/40.jpg)
Child (>) combinator
![Page 41: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/41.jpg)
SUMMARY
![Page 42: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/42.jpg)
USING FONTS IN CSS3
Sample text generators
Another font playground
![Page 43: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/43.jpg)
![Page 44: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/44.jpg)
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
![Page 45: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/45.jpg)
BORDER IN CSS3
![Page 46: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/46.jpg)
BORDER RADIUS IN CSS3
View Example
![Page 48: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/48.jpg)
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
![Page 49: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/49.jpg)
4. CSS3 TEXT EFFECTS
Real Time Example
More on Css3 Text Effects
![Page 50: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/50.jpg)
SHADOWS
Understanding how it works
A Quick Box shadow generator
![Page 51: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/51.jpg)
CSS3 TRANSFORMS
![Page 52: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/52.jpg)
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>
![Page 53: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/53.jpg)
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
![Page 54: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/54.jpg)
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
![Page 55: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/55.jpg)
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
![Page 56: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/56.jpg)
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
![Page 58: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/58.jpg)
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.
![Page 59: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/59.jpg)
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; }}
![Page 60: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/60.jpg)
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
![Page 61: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/61.jpg)
CSS3 GRADIENTS WHY USE THEM?
Jump start guide
Run time Example
Auto gen1
Auto Generator 2
![Page 62: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/62.jpg)
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/
![Page 64: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/64.jpg)
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
![Page 65: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/65.jpg)
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
![Page 66: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/66.jpg)
VIEW PORT RESIZER
http://lab.maltewassermann.com/viewport-resizer/
![Page 67: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/67.jpg)
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
![Page 68: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/68.jpg)
CSS SPRITES GENERATORS
http://spritegen.website-performance.org/
http://yostudios.github.io/Spritemapper/
![Page 69: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/69.jpg)
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
![Page 70: Introduction to whats new in css3](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7306f4a79596b058b4571/html5/thumbnails/70.jpg)
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