View
4.527
Download
0
Category
Preview:
DESCRIPTION
New HTML5/CSS3 techniques
Citation preview
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
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 – bindskinsbeatrizoliveira@bind.pt
questions?
Recommended