Download - Contemporary webdesign
Contemporary Webdesign
Lukas Oppermann
ask in english
web design?
design.
wireframes & usability.
ideas & content.
strategy.
code.
contemporary?
user centered.
targeted.
animated & fun.
fast.
responsive.
responsive?
size.
bandwidth.
usage situation.
you loose control.
functionality ≠ look
The Good
Inspector
Chrome (⌥+ ⌘ + j)
Firefox (⌥+ ⌘ + i)
Safari (⌥+ ⌘ + i)
CSS
positionstatic (default browser behavior)
absolute & fixed (at specified top, left, bottom, right position)
https://developer.mozilla.org/en-US/docs/Web/CSS/positionhttp://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
position (2)relative – takes element out of normal scope for positioning. Positioned by float: left|right;
Only other relative elements matter for positioning.
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
colorsrgb: (red green blue);rgba: (red green blue alpha);#RRGGBB
https://developer.mozilla.org/en-US/docs/Web/CSS/color_valuehttp://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/
border-radiusborder-radius: top right bottom left;border-radius: all-corners;
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
box-shadowbox-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
text-shadowtext-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
gradients You need to at least define 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
box-sizing This attribute defines 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
noneAttributes 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
LinksWhich 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://stackoverflow.com
Links (2)Artikel & Tutorials
http://smashingmagazine.com/
http://net.tutsplus.com/
http://webdesign.tutsplus.com/
http://alistapart.com