1 / 14

HTML/HTML5 Practice

HTML/HTML5 Practice. Multimedia Interactive andry.alamsyah@gmail.com @andrybrew. CSS3 Rules. - moz - for Firefox - webkit - for Safari and Chrome -o- for Opera - khtml - for Konqueror - ms - for Internet Explorer -chrome- specific for Google Chrome.

aldis
Télécharger la présentation

HTML/HTML5 Practice

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML/HTML5 Practice Multimedia Interactive andry.alamsyah@gmail.com @andrybrew

  2. CSS3 Rules • -moz- for Firefox • -webkit- for Safari and Chrome • -o- for Opera • -khtml- forKonqueror • -ms- for Internet Explorer • -chrome- specific for Google Chrome

  3. PRACTICE 1 (Flexible Box Model) <!DOCTYPE html> <html lang="en"> <head> <title>Flexible Box Model sample</title> <link rel="stylesheet" href="test.css"> </head> <body> <section id="parentbox"> <div id="box-1">Box 1</div> <div id="box-2">Box 2</div> <div id="box-3">Box 3</div> <div id="box-4">Box 4</div> </section> </body> </html>

  4. #parentbox { display: -webkit-box; box-orient: horizontal; } #parentbox { display: -webkit-box; box-orient: horizontal; } #box-1{ width: 100px; height: 100px; } #box-2{ width: 100px; height: 100px; } #box-3{ width: 100px; height: 100px; } #box-4{ width: 100px; height: 100px; }

  5. next : open Windows CSS Style from Dreamweaver CS5 • create solid border for #parentbox • create dash/dotted border for every box • change color for every box • create margin 10px for every box • set width 600px for #parenthood • set box-pack: center for #parentbox • Set box-pack: justify for #parentbox • remove width from every #box and insert box-flex: 1 into every #box • Change the value of box-flex: 1 to box-flex: 2 in #box-1 only

  6. PRACTICE2: CSS3 <!DOCTYPE html> <html lang="en"> <head> <title>New CSS3 styles</title> <link rel="stylesheet" href="newcss3.css"> </head> <body> <header id="mainbox"> <span id="title">CSS Styles Web 2.0</span> </header> </body> </html> body { text-align: center; } #mainbox{ display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; } #title { font: bold 36px verdana, sans-serif; }

  7. body { text-align: center; } #mainbox{ display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } #title { font: bold 36px verdana, sans-serif; } body { text-align: center; } #mainbox{ display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-border-radius: 20px / 10px; -webkit-border-radius: 20px /10px; border-radius: 20px / 10px; } #title { font: bold 36px verdana, sans-serif; }

  8. body { text-align: center; } #mainbox{ display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-shadow: rgb(150,150,150) 5px 5px; -webkit-box-shadow: rgb(150,150,150) 5px 5px; box-shadow: rgb(150,150,150) 5px 5px; } #title { font: bold 36px verdana, sans-serif; text-shadow: rgb(0,0,150) 3px 3px 5px; } body { text-align: center; } #mainbox{ display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-shadow: rgb(150,150,150) 5px 5px; -webkit-box-shadow: rgb(150,150,150) 5px 5px; box-shadow: rgb(150,150,150) 5px 5px; } #title { font: bold 36px verdana, sans-serif; }

  9. body { text-align: center; } #mainbox{ display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-shadow: rgb(150,150,150) 5px 5px 10px; -webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; box-shadow: rgb(150,150,150) 5px 5px 10px; } #title { font: bold 36px MyNewFont, verdana, sans-serif; text-shadow: rgb(0,0,150) 3px 3px 5px; } @font-face { font-family: 'MyNewFont'; src: url('font.ttf'); }

  10. #title { font: bold 36px MyNewFont, verdana, sans-serif; text-shadow: rgb(0,0,150) 3px 3px 5px; } @font-face { font-family: 'MyNewFont'; src: url('font.ttf'); } GRADIENT body { text-align: center; } #mainbox{ display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-shadow: rgb(150,150,150) 5px 5px 10px; -webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; box-shadow: rgb(150,150,150) 5px 5px 10px; background: -webkit-linear-gradient(top, #FFFFFF, #006699); background: -moz-linear-gradient(top, #FFFFFF, #006699); }

  11. TRY THIS !! • background: linear-gradient(30deg, #FFFFFF, #006699); • background: linear-gradient(top, #FFFFFF 50%, #006699 90%); • background: radial-gradient(center, circle, #FFFFFF 0%, #006699 200%); • write this : • write this #title { font: bold 36px MyNewFont, verdana, sans-serif; text-shadow: rgba(0,0,0,0.5) 3px 3px 5px; color: hsla(120, 100%, 50%, 0.5); } #mainbox { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; outline: 2px dashed #000099; outline-offset: 15px; }

  12. #mainbox { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-transform: scale(2); -webkit-transform: scale(2); } #mainbox { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-transform: scale(1,-1); -webkit-transform: scale(1,-1); } #mainbox { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-transform: skew(20deg); -webkit-transform: skew(20deg); } #mainbox { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); }

  13. #mainbox { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; } #mainbox:hover{ -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); } #mainbox { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-transform: translate(100px); -webkit-transform: translate(100px); } #mainbox { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-transform: translateY(100px) rotate(45deg) scaleX(0.3); -webkit-transform: translateY(100px) rotate(45deg) scaleX(0.3); }

  14. #mainbox { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; -moz-transition: -moz-transform 1s ease-in-out 0.5s; -webkit-transition: -webkit-transform 1s ease-in-out 0.5s; } #mainbox:hover{ -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); }

More Related