New HTML5/CSS3 techniques

HTML5 and CSS3

Make your design shine with

Beatriz Oliveira

HTML5

HTML5 Collection of featuresDon’t throw anything

awayEasy to get startedIt already works!It’s here to stay!

<!DOCTYPE html>

New semantic elementsHTML5 elements

<!DOCTYPE html><html lang="en"><head>…</head>

<body> <header> <hgroup>…</hgroup> <nav>…</nav> </header>

<section><article>…</article><article>…</article>

</section>

<footer>…</footer>

</body></html>

demo

CSS3

CSS3 It’s here to stay!Use in non critical areasFocus on experience

levelStart today!

multiple background images

CSS3 properties

.foo { background:url(image1.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;

}

parallax scrolling

web fontsCSS3 properties

prepare your IIS server for “.otf”web.config

<system.webServer><staticContent>

http://html5boilerplate.com/http://madskristensen.net/post/Prepare-webconfig-for-HTML5-and-CSS3.aspx

http://html5boilerplate.com/



http://madskristensen.net/post/Prepare-webconfig-for-HTML5-and-CSS3.aspx

http://madskristensen.net/post/Prepare-webconfig-for-HTML5-and-CSS3.aspx

border-radiusCSS3 properties

.foo { border-radius: 10px; }

box-shadowCSS3 properties

.foo { box-shadow: 1px 1px 2px 2px #999 inset; }

opacityCSS3 properties

.foo { color: rgba(0, 0, 0, 0.75); }

.foo { opacity: 0.5; }

vendor-specific prefixesCSS3 properties

IE -ms-

Mozilla -moz-

WebKit -webkit-

Opera -o-

Konqueror -khtml-

css transformsCSS3 properties

what are 2D transforms?

“transform" property

transform functions

.foo { transform: rotate(3deg); }

.foo { transform: scaleX(2) scaleY(3); }

.foo { transform: scale(2,3); }

.foo { transform: skewX(5deg) skewY(-20deg); }

.foo { transform: skew(5deg, -20deg); }

.foo { transform: translateX(10px) translateY(20px); }

.foo { transform: translate(10px, 20px); }

“transform-origin" property

.foo { transform-origin: left bottom; }

css transitionsCSS3 properties

smooth property changes

.foo {transition-property: background;transition-duration: 0.3s;transition-timimg-function: ease;transition-delay: 0.5s;

}

.foo { transition: background 0.3s ease 0.5s; }

text-shadowCSS3 properties

p { text-shadow: 1px 1px 2px #999; }

new selectorsCSS3 selectors

.foo:empty

.foo:first-child

.foo:nth-child(n)

.foo:only-child

.foo:last-child

.foo:target

.foo:checked

.pre ~ .foo

input boxes, css buttons and focus states

CSS3 forms

Contacts

www.bind.ptTwitter – [email protected]

http://www.bind.pt/

mailto:[email protected]

questions?

Documents

New HTML5/CSS3 techniques