Click here to load reader

Contemporary webdesign

  • View

  • Download

Embed Size (px)


Slides for the contemporary webdesign workshop at BTK:

Text of Contemporary webdesign

  • 1. Contemporary Webdesign Lukas Oppermann

2. ask in english 3. web design? 4. design. 5. wireframes & usability. 6. ideas & content. 7. strategy. 8. code. 9. contemporary? 10. user centered. 11. targeted. 12. animated & fun. 13. fast. 14. responsive. 15. responsive? 16. size. 17. bandwidth. 18. usage situation. 19. you loose control. 20. functionality look 21. The Good 22. Inspector 23. Chrome (+ + j) Firefox (+ + i) Safari (+ + i) 24. CSS 25. position static (default browser behavior) absolute & xed (at specied top, left, bottom, right position) 26. position (2) relative takes element out of normal scope for positioning. Positioned by oat: left|right; Only other relative elements matter for positioning. 27. colors rgb: (red green blue); rgba: (red green blue alpha); #RRGGBB 28. border-radius border-radius: top right bottom left; border-radius: all-corners; 29. box-shadow box-shadow: offset-x offset-y blur-size spread color; box-shadow: inset offset-x offset-y blur-size spread color; box-shadow: shadow-declaration, shadow-declaration; 30. text-shadow text-shadow: color offset-x offset-y blur-size; text-shadow: shadow-declaration, shadow- declaration; 31. gradients You need to at least dene a gradient for webkit and the standard one. background-image: -webkit-linear-gradient(top, RGB RGB); background-image: linear-gradient(top, RGB, RGB); 32. box-sizing This attribute denes how element sizes are calculated by the browser. Options are: content-box (only content = set size) padding-box (content + padding = set size) border-box (content + padding + border = set size) box-sizing: border-box; -moz-box-sizing: border-box; 33. none Attributes can be disabled using none. For. e.g. if you want to disabled a box shadow on hover you can assign none: a:hover{ box-shadow: none; } 34. THE END Lukas Oppermann 35. Links Which CSS3 / HTML5 are save to use CSS properties explained docs/Web/CSS CSS properties explained CSS properties explained Libraries & Plugins Very helpful community 36. Links (2) Artikel & Tutorials