• Save
Introduction to whats new in css3
Upcoming SlideShare
Loading in...5
×
 

Introduction to whats new in css3

on

  • 291 views

Whats new in Css3 and html5

Whats new in Css3 and html5

Statistics

Views

Total Views
291
Views on SlideShare
291
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to whats new in css3 Introduction to whats new in css3 Presentation Transcript

  • 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>
  • validation in html5
  • 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.
  • 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 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 IN CSS3
  • BORDER RADIUS IN CSS3 View Example
  • ROUNDED CORNERS 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 (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 