Basics of html5, data_storage, css3
•Als PPT, PDF herunterladen•
1 gefällt mir•784 views
Basic intro to HTML5, its feature data storage and CSS3
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (12)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Basics of html5, data_storage, css3
Ähnlich wie Basics of html5, data_storage, css3 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Basics of html5, data_storage, css3
- 1. Basics of HTML5, Data Storage & CSS3 Sreejith M Akhilraj N S Jones V Rajan Anurag R S POD 5
- 4. Syntax <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 5: <!doctype html> <html> <head> <meta charset="utf-8"> Basics of HTML5
- 5. Basics of HTML5 Semantic Tags
- 6. Basics of HTML5 New form types
- 7. Basics of HTML5 Markup for applications
- 8. Basics of HTML5 Native Drag & Drop
- 9. Basics of HTML5 Geolocation
- 10. Basics of HTML5 Audio & Video
- 11. Basics of HTML5 Canvas example
- 12. Basics of HTML5 Inline SVG
- 15. Javascript API common for localStorage and sessionStorage interface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any value); deleter void removeItem(in DOMString key); void clear(); }; Client-side Data Storage Web Storage Note: For firefox web storage causes security warning and break out your js, if cookies aren't enabled
- 18. var videoDetails = { author: ‘bruce’, description: ‘how to leverage synergies’, rating: ‘-2’ }; sessionStorage.setItem(‘videoDetails’, JSON.stringify(videoDetails) ); Client-side Data Storage sessionStorage - e.g. Storing Video information
- 19. // later on, as in page reloads later, we can extract the stored data var videoDetails = JSON.parse(sessionStorage.getItem(‘videoDetails’)); Client-side Data Storage sessionStorage
- 23. Client-side Data Storage client-side databases Open / Create database Create table Insert
- 24. Client-side Data Storage client-side databases - Select
- 26. Client-side Data Storage Inspecting Client-side Data Storage Value
- 27. Basics Of CSS3
- 28. CSS level 1 CSS level 2 CSS level 2.1 CSS level 3 CSS, An Introduction
- 30. CSS 3 CODE div { border-radius:25px; -moz-border-radius:25px; /* Firefox */ -webkit-border-radius:25px; /* Safari and Chrome */ -o-border-radius:25px; /* Opera */ }
- 31. CSS 3 v/s CSS 2
- 32. Example 1 Design Demo
- 33. CSS 3 h1 { text-shadow: -3px 2px 0px #514d46; } #nav { -moz-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7); -webkit-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7); box-shadow: 0px 0px 12px rgba(88, 83, 74, .7); background-image: -moz-linear-gradient(top, #5c5850, #48473e); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5c5850),color-stop(1, #48473e)); background-image: -webkit-linear-gradient(#5c5850, #48473e); background-image: linear-gradient(top, #5c5850, #48473e); } nav a { -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } nav a:hover { background-color: #3a3e38; background-color: rgba(47, 54, 48, .7); } nav a.active { background-color: #070807; background-color: rgba(7, 8, 7, .7); } body { background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 10%, 500, from(#FBF8E3), to(#E6E3D0)); background-image: -moz-radial-gradient(50% 10%, farthest-side, #FBF8E3, #E6E3D0); }
- 34. CSS 3 #learn_more, #details img { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0px 0px 8px rgba(88, 83, 74, .2); -moz-box-shadow: inset 1px 0px 1px rgba(88, 83, 74, .2); box-shadow: inset 0px 0px 1px rgba(88, 83, 74, .2); } #learn_more a { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background-color: #cc3b23; background-image: -moz-linear-gradient(top, #cc3b23, #c00b00); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #cc3b23),color-stop(1, #c00b00)); background-image: -webkit-linear-gradient(#cc3b23, #c00b00); background-image: linear-gradient(top, #cc3b23, #c00b00); } a { -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } /*-----CSS3 Finished Total Time Taken (49 minutes) -----*/
- 35. CSS 2 #header { background: url(../img/navbg.png) left top repeat-x; } body { background: #e6e3d0 url(../img/radial_gradient.jpg) no-repeat center top; } #nav { background-color: transparent; } h1 { background: url(../img/mercuryautomobiles.png) no-repeat center center;text-indent: -9999px; } #learn_more { background-image: url(../img/learn_morebg.jpg);} #details img { background-image: url(../img/detailsbg.jpg);} #learn_more a { background: url(../img/learn_more_abg.jpg) no-repeat;} .css3 { background: url(../img/css3_hover.png) no-repeat center top; }
- 36. CSS 2 .backend { background: url(../img/smashing_hover.png) no-repeat center top; } .trent { background: url(../img/trentwalton_hover.png) no-repeat center top;} .css3:hover { background: url(../img/css3_hover.png) no-repeat center -20px;} .css:hover { background: url(../img/css_hover.png) no-repeat center -20px;} .smashing:hover { background: url(../img/smashing_hover.png) no-repeat center -20px;} .trent:hover { background: url(../img/trentwalton_hover.png) no-repeat center -20px; } .css { background: url(../img/css_hover.png) no-repeat center -50px; } /*-----CSS (the image-based approach) Total time taken (1 hour and 13 minutes)-----*/
- 37. Comparison
- 38. Thank You POD 5