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

THE ENDLukas Oppermann

lukas@vea.re

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