Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,172
On Slideshare
7,534
From Embeds
1,638
Number of Embeds
10

Actions

Shares
Downloads
215
Comments
0
Likes
3

Embeds 1,638

http://www.ostraining.com 755
http://ceinsur7.blogspot.com 603
http://www.ceinsur7.blogspot.com 236
http://paper.li 35
https://us1.admin.mailchimp.com 3
http://translate.googleusercontent.com 2
http://ceinsur7.blogspot.dk 1
http://webcache.googleusercontent.com 1
http://a0.twimg.com 1
http://www.ceinsur7.blogspot.no 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Beginner & Intermediate Guide to HTML5/CSS3 In Drupal By Kendall Totten (@starryeyez024) & Danté Taylor (@thememaster) Mediacurrent Consultants #drupalcampATL 1
  • 2. BROUGHT TO YOU BYTHE GOOD FOLKS AT DO DRUPAL RIGHT 2
  • 3. About Me• Bachelor of Fine Arts in Graphic Design from Savannah College of Art & Design (SCAD)• Creative Director at Mediacurrent• Working in the web space for about 12 years• Working with Drupal since version 4.7• Favorite Drupal Install is WatchGMC.com   Danté Taylor 3
  • 4. About Me• Bachelors in Communication Technology & Graphic Design from Eastern Michigan University• Drupal Designer & Theme Specialist at Mediacurrent• Working in the Drupal space for about 3 years• Working with Drupal since version 5 Kendall Totten 4
  • 5. What will you learn?HTML5• Semantic Web • What to look for in Drupal 8 • Microformats • Enhancing Adaptive Theme• Form API • HTML5 Themes and• Real Life applications Modules• Tactics to enhance compatibility  CSS3• Enhance UX  • Text in Columns• How HTML5 can help • Transitions  you design for mobile  • CSS3Pie• Semantic captions for • Using SVG images  • The future of CSS 5
  • 6. What isHTML5? 6
  • 7. Web HTML5 HTML 4.01 Flash Help Browser Support Plugins 7
  • 8. Next generation of HTML The latest version of HTML known as HTML5, a set of capabilities that gives web designers and developers the ability to create the next generation of great online applications.“Upgrading” to HTML5 can be as simple aschanging your doctype. <!DOCTYPE html>and resetting your stylesheet:http://html5doctor.comhtml-5-reset-stylesheet 8
  • 9. A Better Blend HTML5 CSS3 JS 9
  • 10. Who Cares? 10
  • 11. From Dries"I believe in HTML5 enough that I wanted to make it one of thetop 5 initiatives for Drupal 8; and switch Drupals defaultdoctype from XHTML to HTML5. This is the fifth official Drupal8 initiative after the Configuration Management, Design,WebServices and Multilingual initiatives." — Dries Buytaert 11
  • 12. HTML5 Fallout• Change Doctype• Start using Outliner• Use Header, Section, Footer, and Nav Tags• Start thinking about Semantics Markup 12
  • 13. HTML5 ElementsHead Sections Grouping Tablesdoctype body p tablehtml article hr captionhead nav pre theadtitle blockquote tbody asidebase ol tfoot section ul trlinkmeta header li thstyle footer dl, dt, dd tdscript h1-h6 figure colnoscript hgroup figcaption colgroup address div 13
  • 14. HTML5 ElementsForms Embedded Text-levelform img a varfieldset iframe emlegend embed strong marklabel object i, b bdiinput param u bdobutton video s ruby, rt, rpselect audio small spandatalist abbr br sourceoptgroup q canvas cite Interactiveoption detailstextarea track dfn map sub, sup summarykeygen area time commandoutput code menuprogressmeter kbd Edits samp del, ins wbr 14
  • 15. http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-flowchart.pdf 15
  • 16. HTML5Semantics 16
  • 17. Getting information off the Internet islike taking a drink from a fire hydrant.  —Mitchell Kapor 17
  • 18. The Missing Link 18
  • 19. What is Semantic Web? "The Semantic Web is a web that is able to describe things in a way that computers can understand." Source: http://www.w3schools.com/semweb/default.asp 19
  • 20. Semantic BenefitsBy making the web understandable to machines:• Programs and web sites can exchange information• Search engines can return more relevant information in results• Data compilers can combine data from different datasets to find new and astounding things, like weather data or stock market info. 20
  • 21. HTML5Structure 21
  • 22. HTML5 Structure <header> <nav> <section> <article> <aside> <article> <footer> 22
  • 23. <header> </hgroup><article> <header> Wrong Way <h1>My best blog post</h1> </header></article>OR<header> <hgroup> <h1>My best blog post</h1> </hgroup> <p>by Rich Clark</p></header> 23
  • 24. <header></hgroup><header> <hgroup>   <h1>The reality dysfunction</h1> <h2>Space is not the only void</h2> Right Way </hgroup> <p>By Richard Clark</p> <p><time datetime="2011-03-20"> March 20th, 2011</time></p></header><article> <header> <h1>Title of this article</h1> <p>By Richard Clark</p> </header> <p>...Lorem Ipsum dolor set amet...</p></article> 24
  • 25. <section><section id="wrapper"> <header> <h1>My super duper page</h1> </header> Wrong Way <section id="main"> Section Content </section> <section id="secondary"> Secondary Content </section><section id="footer"> <footer> Footer Content </footer></section> 25
  • 26. <section><div id="wrapper"> <article> <header> <h1>Document Outlines</h1> Right Way Header Content </header> <section id="what-are-outlines"> <h2>What are document outlines?</h2> ...content </section> <section id="outlines-in-html4"> <h2>Outlines in HTML4</h2> ...content </section> </article> <footer> Footer Content </footer></div> 26
  • 27. Use An Outliner Tool• Use to group content into logical category or sections• With very few exceptions, section should not be used if there is no natural heading for it.• Section should not be used like aside or nav containers just to position content• Check your work in a HTML5 Outliner Tool 27
  • 28. Outliner Outputhttp://gsnedders.html5.org/outliner 28
  • 29. Quick Tip• “<body>” is already a wrapper and can be hacked to achieve some pretty remarkable layout and clean code! It can have a height, width, border, drop-shadow; you name it. • HTML5 Does not require you to actually include the “<body>” tag. 29
  • 30. <nav>The following shouldnʼt beenclosed by <nav> • Pagination controls Wrong Way • Social links • Tags on a blog post • Categories on a blog post • Tertiary navigation • Fat footers 30
  • 31. Semantic CaptionsA caption is the definition of an imageUse Figure to enclose the image and theFigure Caption, and use some CSS3 to add anice slide in effect.http://css-tricks.com/examples/SlideinCaptions/<figure>     <img src="yay.jpg" alt="">     <figcaption class="from-left">         yay!!!     </figcaption></figure> 31
  • 32. Code Sample<figure>    <img src="/kookaburra.jpg" alt="Kooaburra">    <img src="/pelican.jpg" alt="Pelican stood on the beach">    <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">    <figcaption>Australian Birds. From left to right, Kookburra, Pelican        and Rainbow Lorikeet. Originals by        <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a>     </figcaption></figure> 32
  • 33. Microdata vs.Microformats 33
  • 34. 34
  • 35. Microdata & Microformats• Microdata is similar to microformats, in that both extend markup to include machine-readable metadata that describes web content.• As such, microdata has become the third contender in the "my semantic technology is better than yours" argument that has been waging among microformats and RDFa proponents. 35
  • 36. HTML5 &Microdata 36
  • 37. MicrodataGlobal Attributes:• itemscope – Creates the Item and indicates that descendants of this element contain information about it.• itemprop – Indicates that its containing tag holds the value of the specified item property. The properties name and value context are described by the items vocabulary.• itemtype – A valid URL of a vocabulary that describes the item and its properties context.• itemid – Indicates a unique identifier of the item.• itemref – Properties that are not descendants of the element with the itemscope attribute can be associated with the item using this attribute. Provides a list of ids of elements with additional properties elsewhere in the document. 37
  • 38. Microdata <div itemscope itemtype="http://data-vocabulary.org/Event"> <a itemprop="url" href="http://www.example.com/events/spinaltap" > <span itemprop="summary" >Spinal Tap</span> </a> <img itemprop="photo" src="spinal_tap.jpg" /> <span itemprop="description" > After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour. </span>When: <time itemprop="startDate" datetime="2015-10-15T19:00-08:00"> Oct 15, 7:00PM </time>— <time itemprop="endDate" datetime="2015-10-15T19:00-08:00"> Oct 15, 9:00PM </time>Where: <span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization"> <span itemprop="name" >Warfield Theatre</span> <span itemprop="ocality" >San Francisco</span></div> http://schema.org/Event 38
  • 39. Microdata Module Rich Snippets Testing Tool http://www.google.com/webmasters/tools/richsnippets 39
  • 40. Microdata & Microdata• Your web pages have an underlying meaning that people understand when they read the web pages.• But search engines have a limited understanding of what is being discussed on those pages. • Microdata is a set of tags, introduced with HTML5, that allows you to http://schema.org 40
  • 41. HTML5 &Microformats 41
  • 42. Microformats• Used on web pages to describe a specific type of information —for example, a review, an event, a product, a business, or a person.• In general, microformats use the class attribute in HTML tags (often <span> or <div>) to assign brief and descriptive names to entities and their properties. 42
  • 43. Code Sample<div> <a href="http://www.example.com/events/spinaltap" class="url summary">Spinal Tap</a> <img src="spinal_tap.jpg" class="photo" /> <span class="description"> After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour with a San Francisco show. </span> When: <span class="dtstart"> Oct 15, 7:00PM<span class="value-title" title="2015-10-15T19:00-08:00"></span> <span class="dtend"> 9:00PM<span class="value-title" title="2015-10-15T21:00-08:00"></span> </span> Where: <div class="location vcard"> <span class="fn org">Warfield Theatre</span>, <span class="adr"> <span class="street-address">982 Market St</span>, <span class="locality">San Francisco</span>, <span class="region">CA</span> </span> <span class="geo"> <span class="latitude"> <span class="value-title" title="37.774929" ></span> </span> </span> </div></div> 43
  • 44. hCard• hCard uses a class of fn (meaning Full Name) to identify a name. As is this case there’s no element surrounding my name, we can just use a span. • <div class="bio vcard"> <h3>About the author</h3> <p><span class="fn">Kendall Totten</span> is a web developer...• At <a class="org" href="http://www.mediacurrent.com/"> Mediacurrent</a> she works on Drupal Theming and Front-End Development. Kendall keeps a <a class="url" href="http:// www.kendallsdesign.com/">personal weblog</a> covering web development issues and themes.</p> </div> 44
  • 45. Microformat Tools• Microformat biz card creator: http://microformats.org/code/hcard/creator• hReview Creator http://microformats.org/code/hreview/creator• hCalendar Creator http://microformats.org/code/hcalendar/creator 45
  • 46. HTML5Themes 46
  • 47. Drupal Themes• AdaptiveTheme• Genesis• Omega• Gamma (Omega sub theme)• HTML5 Base• Beta (Omega sub theme)• Boron• Zentropy• Plinkhttp://www.qemist.us/content/acquiacom-and-omega-theme-getting-down-brass-tacks 47
  • 48. The Winners Table http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7 48
  • 49. Delta Module• Delta allows you, via the Context module to make duplicates of your theme settings for any context on your site. This gives you the ability for alternative layouts as a reaction in Context... </ awesomesauce> 49
  • 50. JS for your Theme• modernizr-1.6.min.js • Download from: http://www.modernizr.com/• dd_belatedpng.js (IE6 ping fix) • Download from: http://www.dillerdesign.com/experiment/ DD_belatedPNG/• html5.js (HTML5Shim) • Download from: http://code.google.com/p/html5shim/• respond.js (media-size responsive images) • Download from: https://github.com/scottjehl/Respond#readme 50
  • 51. HTML5Modules 51
  • 52. Drupal ModulesThere are 26 HTML5 based modules for Drupal 6 and 22 forDrupal 7. Some of them are still in development.• HTML5 Tools• Elements• Video - most popular HTML5 based module for both Drupal 6 and 7• VideoJS• Media: Vimeo• Media: Archive• Aloha HTML5 Editor• Plupload Integration• MediaFront• JPlayer 52
  • 53. Video ModuleVideo module allows you to upload video in any format, play video in anyformat, transcode video to h246, Theora, VP8 using FFMPEG , automaticallycreates video thumbnails, use video thumbnails in video node teaser, Veryreliable API for converting videos and auto thumbnailing, can be used as anall-in-one video solution for Drupal. http://drupal.org/project/video 53
  • 54. More HTML5 ToolsFeatures you can find in theDrupal 7 version:• Support for the html5shiv plugin (for older browsers)• Support for the innershiv plugin• Support for Google Chrome Frame• Adds new elements for use in the Views module• Support for the html5 doctype with or without RDF.• Tons of other forms and markup changes. 54
  • 55. HTML5 Tools ModuleHTML5 Tools: Override DrupalsForms with their HTML5 Counterparts• Site information• Search block• Search form• User registration• Contact forms yoursite.com/admin/config/markup/html5-tools 55
  • 56. HTML5 Tools ModuleSimplify <HEAD> Markup• Simplify doctype and add html5shiv• Simplify style tags• Simplify javascript tags• Simplify meta tags• Add Google Chrome Frame headers• Adds the X-UA-Compatible: IE=Edge,chrome=1 headers for IE browsers. This will not prompt the user to install Google Chrome Frame, it will just use it if available. yoursite.com/admin/config/markup/html5-tools 56
  • 57. HTML5 Tools ModuleHTML5 Tools: Convert other variables• Alter publication date markup• Make new Elements available in the Views UI• If one of these is not working, it might be because your theme is overriding what is specified here. Themes always get the last say in how something is outputted. Check your themes template.php file. yoursite.com/admin/config/markup/html5-tools 57
  • 58. Google Chrome Frame http://www.youtube.com/watch?v=sjW0Bchdj-w 58
  • 59. 59
  • 60. Code Sample<meta http-equiv="X-UA-Compatible" content="chrome=1" /><IfModule mod_setenvif.c> <IfModule mod_headers.c> BrowserMatch chromeframe gcf Header append X-UA-Compatible "chrome=1" env=gcf </IfModule></IfModule> 60
  • 61. Seamless Integration 61
  • 62. HTML5 & SVG 62
  • 63. SVGScalable Vector Graphics(SVG) is a new graphics fileformat and Web developmentlanguage based on XML.SVG enables Web developersand designers to createdynamically generated, high-quality graphics from real-timedata with precise structuraland visual control. http://svg-wow.org/camera/camera.xhtml 63
  • 64. SVG Benefits• Compatibility SVG is text based and works seamlessly with current Web technologies like HTML, GIF, JPEG, PNG, SMIL, ASP, JSP, and JavaScript.• Quality Graphics created in SVG can be scaled without loss of quality across various platforms and devices. SVG can be used on the Web, in print and even on portable devices while retaining full quality. http://www.w3schools.com/svg/tryit.asp?filename=trysvg_animatemotion2 64
  • 65. SVG Links• Change stylesheets: http://svg-wow.org/alternate-stylesheet/ alternate-stylesheet.xhtml• Punchout: http://webtypographyforthelonely.com/punchout• Colinate: http://webtypographyforthelonely.com/coolinate• SVG JS helper: http://raphaeljs.com/• http://svg-wow.org/• http://svg-wow.org/camera/camera.xhtml 65
  • 66. HTML5 Links• http://diveintohtml5.org/• http://code.google.com/p/html5shiv/• http://www.google.com/chromeframe?prefersystemlevel=true• HTML5 Quick Reference Guide PDF: http://bit.ly/1WaBME• http://groups.drupal.org/html5• http://html5gallery.com/• http://code.google.com/chrome/chromeframe/• http://molly.com/html5/html5-0709.html• http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/• http://html5demos.com• http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by- woork.html• http://www.threestyles.com/tutorials/html5-rocks-my-socks-off/ 66
  • 67. Theme WithCSS3 67
  • 68. The Compatibility Battle 68
  • 69. CSS WarriorPIE (progressive internet explorer) makes InternetExplorer 6-9 capable of rendering several of the most usefulCSS3 decoration features:• border-radius• box-shadow• border-image• multiple background images• linear-gradient as background imagehttp://drupal.org/project/css3pie 69
  • 70. Are We There Yet? http://caniuse.com 70
  • 71. Do Websites need to LookExactlythe Same in Every Browser 71
  • 72. NOhttp://dowebsitesneedtolookexactlythesameineverybrowser.com/ 72
  • 73. Modernizr• Better yet, use Irishs modernizr, “an open source, MIT- licensed JavaScript library that detects (browser) support for many HTML5 & CSS3 features” (http://diveintohtml5.org/detect.html)• If you prefer, you can build your own modernizr script,choosing just the elements you want to use to keep your script small, download your customized library, and add it to the head of your themes page template files with:<script src="(path-to)modernizr.min.js"></script>• In Drupal 6, this would be page.tpl.php and in Drupal 7, html.tpl.php. Read the full instructions here. 73
  • 74. Modernizr FeaturesWhat does Modernizr do?• It will replace that class with the class “js” which allows you to know, in your CSS, whether or not JavaScript is enabled. <html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage no-webworkers no-applicationcache fontface"> http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr 74
  • 75. Modernizr Features• applicationCache • @font-face• border-image: • Geolocation API• border-radius: • hsla()• box-shadow: • HTML5 Audio• Canvas • HTML5 Video• Canvas Text • Input Attributes• CSS 2D Transforms • Input Types• CSS 3D Transforms • localStorage• CSS Animations • Multiple backgrounds• CSS Columns • opacity:• CSS Gradients • rgba()• CSS Reflections • sessionStorage• CSS Transitions • Web Workers 75
  • 76. Modernizr Example.borderradius #content {border: 1px solid #141414;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px; }.boxshadow #content {border: none;-webkit-box-shadow: #141414 3px 3px 6px;-moz-box-shadow: #141414 3px 3px 6px;box-shadow: #141414 3px 3px 6px; } http://css-tricks.com/6731-css-media-queries 76
  • 77. CSS3Media Queries 77
  • 78. 78
  • 79. CSS Media Queries 79
  • 80. CSS Media Queries http://css-tricks.com/6731-css-media-queries 80
  • 81. Code Sample<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Resolution Dependent Layout</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"> <link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css"> <link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css"></head><body> <div id="page-wrap">    <div id="header">Header</div>                 <div id="main-content">Content</div>                     <div id="secondary-one">Secondary</div>    <div id="secondary-two">Extra</div>                   </div>   </body></html> http://css-tricks.com/6206-resolution-specific-stylesheets http://css-tricks.com/6731-css-media-queries 81
  • 82. CSS3@Keyframes 82
  • 83. 83
  • 84. @Keyframe http://www.w3.org/TR/css3-animations/ 84
  • 85. Code Samplediv.noc { @keyframes bounce {   width:100px; height:100px; background:red; from {   position:relative;  top: 100px;   animation:mymove 5s infinite; animation-timing-function: ease-out;   -moz-animation:mymove 5s infinite; /* Firefox */ }   -webkit-animation:mymove 5s infinite;  25% {   /* Safari and Chrome */ top: 50px;  text-indent: -99999px; animation-timing-function: ease-in;} }@keyframes mymove { 50% {   from { top:0px; } top: 100px;   to {left:200px;} animation-timing-function: ease-out;} }@-moz-keyframes mymove /* Firefox */ 75% {{ top: 75px;   from { top:0px; } animation-timing-function: ease-in;   to { left:200px; } }} to {@-webkit-keyframes mymove /* Safari and Chrome */ top: 100px;{ }   from { top:0px; } }   to { left:200px; }} http://css-tricks.com/6731-css-media-queries http://www.w3.org/TR/css3-animations 85
  • 86. CSS3Fonts 86
  • 87. CSS3 @Fonts• Import directly from the Google Webfonts API:@import url(http://fonts.googleapis.com/css?family=Alike+Angular); http://css-tricks.com/6731-css-media-queries 87
  • 88. CSS3 @Fonts• Hinting (for IE)• Font hinting is the use of instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At small screen sizes, hinting is critical for producing clear, legible text for human readers. http://readableweb.com/font-hinting-explained-by-a-font-design-master/ 88
  • 89. CSS3Backgrounds 89
  • 90. Tablecloth http://leaverou.me/css3patterns/#tartan 90
  • 91. Carbon Fiber http://leaverou.me/css3patterns/#carbon-fibre 91
  • 92. Tartanhttp://leaverou.me/css3patterns/#tartan 92
  • 93. Code Sample#tablecloth { background-color:white; background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-size:50px 50px;}#carbon-fiber { radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#282828; background-size:16px 16px;}#tartan { background-color: hsl(2, 57%, 40%); background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba (0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(180deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),repeating-linear-gradient(-35deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba (0,0,0,.2) 5px);} http://css-tricks.com/6731-css-media-queries http://leaverou.me/css3patterns 93
  • 94. CSS ColumnsLorem ipsum dolor sit Duis autem vel eum luptatum zzril delenit Investigationesamet, consectetuer iriure dolor in augue duis dolore te demonstraveruntadipiscing elit, sed hendrerit in vulputate feugait nulla facilisi. lectores legere mediam nonummy nibh velit esse molestie Nam liber tempor cum lius quod ii legunteuismod tincidunt ut consequat, vel illum soluta nobis eleifend saepius.laoreet dolore magna dolore eu feugiat nulla option congue nihilaliquam erat volutpat. facilisis at vero eros et imperdiet doming idUt wisi enim ad minim accumsan et iusto quod mazim placeratveniam, quis nostrud odio dignissim qui facer possim assum.exerci tation blandit praesent ullamcorper suscipit Typi non habentlobortis nisl ut aliquip Accumsan et iusto claritatem insitam; estex ea commodo odio dignissim qui usus legentis in iis quiconsequat. blandit praesent facit eorum claritatem. http://www.netmagazine.com/features/future-css-layouts http://www.makeuseof.com/dir/csstextwrap 94
  • 95. Code Sample.newspaper{    -webkit-columns: 100px 2; /* Safari and Chrome */    -moz-column-gap: 40px; /* Firefox */    -webkit-column-gap: 40px; /* Safari and Chrome */    columns: 200px 4; column-gap: 40px;} http://css-tricks.com/6731-css-media-queries 95
  • 96. CSS Layouts http://www.netmagazine.com/features/future-css-layouts http://www.makeuseof.com/dir/csstextwrap 96
  • 97. CSS3 Links• http://adaptive-images.com/• http://htmlref.labs.oreilly.com/beta/#elements• http://css3pie.com• http://www.modernizr.com• http://html5readiness.com/• http://caniuse.com/• http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/• http://css-tricks.com/ 97
  • 98. Thank You! 98