Click here to load reader

Contemporary webdesign

  • View
    211

  • Download
    1

Embed Size (px)

DESCRIPTION

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) https://developer.mozilla.org/en-US/docs/Web/CSS/position http://css-tricks.com/absolute-relative-xed-positioining-how-do-they-differ/ 26. position (2) relative takes element out of normal scope for positioning. Positioned by oat: left|right; Only other relative elements matter for positioning. http://css-tricks.com/absolute-relative-xed-positioining-how-do-they-differ/ 27. colors rgb: (red green blue); rgba: (red green blue alpha); #RRGGBB https://developer.mozilla.org/en-US/docs/Web/CSS/color_value http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/ 28. border-radius border-radius: top right bottom left; border-radius: all-corners; https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius 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; https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow 30. text-shadow text-shadow: color offset-x offset-y blur-size; text-shadow: shadow-declaration, shadow- declaration; https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow 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); https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients 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; https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 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; } https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow 34. THE END Lukas Oppermann lukas@vea.re 35. Links Which CSS3 / HTML5 are save to use http://caniuse.com CSS properties explained https://developer.mozilla.org/en-US/ docs/Web/CSS CSS properties explained http://www.w3schools.com/ CSS properties explained http://css-tricks.com/snippets/css/ Libraries & Plugins https://github.com/ Very helpful community http://stackoverow.com 36. Links (2) Artikel & Tutorials http://smashingmagazine.com/ http://net.tutsplus.com/ http://webdesign.tutsplus.com/ http://alistapart.com