More Related Content
What's hot
What's hot (10)
Viewers also liked
Viewers also liked (16)
Similar to CSS3: Common problems and best practices
Similar to CSS3: Common problems and best practices (20)
Recently uploaded
Recently uploaded (20)
CSS3: Common problems and best practices
- 1. © 2013 KMS Technology
- 2. © 2013 KMS Technology CSS3: COMMON PROBLEMS AND BEST PRACTICES
- 3. OBJECTIVES • How to layout a webpage • Introduce top new features in CSS3 • Introduce CSS best practices • Introduce common problems that a web developer usually encounter when working with CSS Confidential 3
- 4. TARGET AUDIENCES • Web developers, web designers • Required: Know CSS Confidential 4
- 5. AGENDA • How to layout a webpage • Top New Features in CSS 3 • Best practices • The solution for common problems • Extended Q&A Confidential 5
- 6. HOW TO LAYOUT A WEBPAGE
- 7. HOW TO LAYOUT A WEBPAGE First is horizontal, second is vertical Confidential 7
- 8. TOP NEW FEATURES IN CSS 3
- 9. TOP NEW FEATURES IN CSS 3 • Border-radius • Gradient background • Box-shadow • Text-shadow • Background-size • Multiple background • Opacity • Add special font Confidential 9
- 10. BORDER-RADIUS .my-css { border-radius: 10px; } Confidential 10
- 11. GRADIENT BACKGROUND .my-css { background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); } Ex: http://www.colorzilla.com/gradient-editor/ Confidential 11
- 12. BOX-SHADOW .my-css { box-shadow: 10px 10px 5px #888; } Confidential 12
- 13. TEXT-SHADOW .my-css { text-shadow: 2px 2px 2px #000; } Confidential 13
- 14. BACKGROUND-SIZE .my-css { background-size: 300px 400px; } Confidential 14
- 15. MULTIPLE BACKGROUND .my-css { background-image: url(../images/ball.png), url(../images/grass.jpg); } Confidential 15
- 17. WEB FONTS @font-face { font-family: "Harry Potter"; src: url(../font/harrypotter.ttf); } Confidential 17
- 18. BEST PRACTICES
- 19. BEST PRACTICES • Don't use inline style • Should not use id attribute • If possible should be use sprite image • Call html, we don’t need edit on html • Combine Elements • Introduce Twitter Bootstrap (http://twitter.github.io/bootstrap/) Confidential 19
- 20. DON'T USE INLINE STYLE <div style=“margin-left: 25px”> bayer munich </div> <div class=“name”>bayer munich </div> Confidential 20
- 21. SHOULD NOT USE ID ATTRIBUTE <div id=“name”> Real madrid</div> <div class=“name”> Real madrid </div> Confidential 21
- 22. IF POSSIBLE SHOULD BE USE SPRITE IMAGE If they are same size: .my-css{ width:20px; height:20px; background:url(img_nav.gif) 60px 20px; } Confidential 22
- 23. CALL HTML, WE DON’T NEED EDIT ON HTML <body> <div>Tom</div> <div>Bend</div> <div>Bond</div> <div>David</div> </body> Confidential 23 body div:nth-child(4) { Color: red; }
- 24. COMBINE ELEMENTS .one { width: 840px; } .two { width: 840px; } .three { width: 840px; } .four { width: 840px; } .one, .two, .three, .four { width: 840px; } Confidential 24
- 26. THE SOLUTION FOR COMMON PROBLEMS
- 27. THE SOLUTION FOR COMMON PROBLEMS • Not consistent between IE, Firefox, Chrome… • How to create your css on system css • How to resize the picture by css Confidential 27
- 28. NOT CONSISTENT BETWEEN IE, FIREFOX, CHROME…
- 29. NOT CONSISTENT BETWEEN IE, FIREFOX, CHROME… • Do not let your css use default Confidential 29 Chrome FireFox IE
- 30. HOW TO CREATE YOUR CSS ON SYSTEM CSS
- 31. HOW TO CREATE YOUR CSS ON SYSTEM CSS • Use new file css and overwrite system css by “ !important ” .my-css { color: blue !important; } Confidential 31
- 32. HOW TO RESIZE THE PICTURE BY CSS
- 33. HOW TO RESIZE THE PICTURE BY CSS .my-css { background-size: 300px 400px; } Confidential 33
- 34. ANY QUESTIONS ?
- 35. © 2013 KMS Technology THANK YOU !