More Related Content Similar to Implementing Awesome: An HTML5/CSS3 Workshop (20) Implementing Awesome: An HTML5/CSS3 Workshop10. Text: Elements
<abbr title=“Oh My God”>OMG</abbr>
<small>Good for legalese</small>
<address>555 Sector 5, Planet Earth</address>
<time>April, 1 2050</time>
11. Text: Formatting
<strong> = Importance (bold)
<b> = Stylistically Different
<em> = Emphasis (italic)
<i> = Alternate Voice or Mood
14. Semantic
Hierarchy
<h1>Page Title</h1>
<section>
<h1>Section Title</h1>
...
</section>
15. Links Just Got
Awesome
<a href=“/the-future.html”>
<div>
<p>Yep, this validates now.</p>
</div>
</a>
20. What Can I
Use Now?
Updating an Existing Document
21. Change your
DOctype
<!DOCTYPE html>
VS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
23. Cleaner Charset
<meta charset=”utf-8”>
VS
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
26. Have Fun With
New Elements
<header> ... </header>
Or for More Compatibility
<div class=”header”> ... </div>
27. Less is Still
More
<script src=”script.js”
type=”text/javascript”></script>
Please don’t put me in the <head>.
31. Experiences
Will Be
Different
Just make Sure they’re usable
34. Stay Up TO Date
html5rocks.com
developers.whatwg.org
36. More Than A Box
<div class=”box”>
<p>
I’m a box!
</p>
</div>
38. div.box {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
39. div.box {
-moz-border-radius: 300px;
-webkit-border-radius: 300px;
border-radius: 300px;
}
40. Vendor Prefixes
element {
-moz-property: x;
-webkit-property: x;
-o-property: x;
-ms-property: x;
property: x;
}
42. div.box {
border-top-left-radius: 10px;
border-bottom-right-radius: 120px;
}
43. div.box {
background: #DDD;
text-shadow: 0 1px 1px #FFF;
}
44. div.box {
background: #DDD;
background: rgba(255,255,255,0.75);
/* r, g, b, a */
}
45. div.box {
background: #DDD;
background: linear-gradient(top, #FFF 0%, #777 100%);
}
46. div.box {
background: #DDD;
background: radial-gradient(
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 70%);
}
47. div.box {
box-shadow: 10px 10px 0 #FA0;
}
48. div.box {
box-shadow: inset 0 0 15px #000;
}
49. div.box:before {
content: '';
position: absolute;
top: -30px;
left: -30px;
width: 300px;
height: 300px;
z-index: -1;
background:
rgba(255,221,0,0.5);
}
div.box {
position: relative;
}
50. div.box:after {
content: '';
position: absolute;
top: 30px;
left: 30px;
width: 300px;
height: 300px;
z-index: -2;
background:
rgba(255,165,0,0.5);
}
52. div.box:after {
animation-name: rotate;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
56. A Special
Thanks To:
PAM
Gloria
PYGotham
Mint Digital