Basics of html5, data_storage, css3
•Télécharger en tant que PPT, PDF•
1 j'aime•784 vues
Basic intro to HTML5, its feature data storage and CSS3
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (12)
En vedette
En vedette (20)
Similaire à Basics of html5, data_storage, css3
Similaire à Basics of html5, data_storage, css3 (20)
Dernier
Dernier (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