New HTML5/CSS3 techniques

Make your design shine with
HTML5 and CSS3

Beatriz Oliveira

HTML5
Collection of features
Don’t throw anything away
Easy to get started
It already works!
It’s here to stay!

<!DOCTYPE html>

New semantic elements
HTML5 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>

CSS3
It’s here to stay!
Use in non critical areas
Focus on experience level
Start 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 fonts
CSS3 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

border-radius
CSS3 properties

.foo { border-radius: 10px; }

box-shadow
CSS3 properties

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

opacity
CSS3 properties

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

.foo { opacity: 0.5; }

vendor-specific prefixes
CSS3 properties

css transforms
CSS3 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 transitions
CSS3 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-shadow
CSS3 properties

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

new selectors
CSS3 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.pt
Twitter – bindskins
beatrizoliveira@bind.pt

questions?

New HTML5/CSS3 techniques

by mbeatrizoliveira on Jun 17, 2011

Accessibility

Upload Details

Usage Rights

Statistics

New HTML5/CSS3 techniques — Presentation Transcript