I agree! But I do consider HTML5 to be more than just the spec that the W3C validator checks your document against. Part of html5 vedio playerinvolves standards for bolt on technology including web workers, CSS3, server sent events, etc. that are going to (I hope) revolutionize the web and do away with the need for 3rd party browser plugins
I m beginner : Trying to Make Android that wave his right hand and tweaking eyes using HTML5 and css. I m bad at positioning them - anyone who can help ???
Some heavy grey picture is loading in the background on mobile version.
ReplyDeleteI love the look and feel and the jumbo search bar is nice too. Great job!
ReplyDeletethe unfortunate thing is that symbol in Italy means "cornuto" or the middle finger Anglo derivative #diversity
ReplyDeletehohohoho...\m/
ReplyDeleteI agree! But I do consider HTML5 to be more than just the spec that the W3C validator checks your document against. Part of html5 vedio playerinvolves standards for bolt on technology including web workers, CSS3, server sent events, etc. that are going to (I hope) revolutionize the web and do away with the need for 3rd party browser plugins
ReplyDeleteI m beginner : Trying to Make Android that wave his right hand and tweaking eyes using HTML5 and css. I m bad at positioning them - anyone who can help ???
ReplyDeleteCSS :
.antenna { position: absolute; width: 6px; height: 32px; border-radius: 15px 15px 0 0; -moz-transform-origin: 50% 100%; background-color: #96c03c; }
.antenna.left { -moz-transform: translate3d(0,0,0) rotateZ(-32deg); }
.antenna.right { -moz-transform: translate3d(0,0,0) rotateZ(32deg); }
.head { position: absolute; width: 168px; height: 68px; border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; background-color: #96c03c; }
.eye { position: absolute; width: 20px; height: 20px; border-radius: 10px; background-color: white; -moz-transform: translate3d(0,0,0); -moz-animation: eye-animation 4s ease 1s both infinite; }
.eye.left { left: 30px; }
.eye.right { right: 30px; }
.stomach { width: 168px; height: 152px; border-radius: 0 0 30px 30px; background-color: #96c03c; }
.arm { width: 36px; height: 114px; border-radius: 18px; background-color: #96c03c; -moz-transform-origin: 50% 16%; -moz-transform: translate3d(0,0,0) rotateY(0deg); }
.arm.left { -moz-animation: arm-animation-left 8s ease-in 600ms infinite; }
.leg-wrapper { position: absolute; width: 36px; height: 72px; -moz-transform-style: preserve-3d; -moz-transform: translate3d(0,0,0) rotateY(0deg); }
.leg { width: 36px; height: 72px; border-radius: 0 0 18px 18px; background-color: #96c03c; -moz-transform: translate3d(0,0,0); }
@-moz-keyframes eye-animation {
0% { -moz-transform: scaleY(1); }
5% { -moz-transform: scaleY(0); }
10% { -moz-transform: scaleY(1); }
100% { -moz-transform: scaleY(1); }
}
@-moz-keyframes arm-animation-left {
0% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
4% { -moz-transform: translate3d(0,0,0) rotate(156deg); }
6.5% { -moz-transform: translate3d(0,0,0) rotate(136deg); }
8% { -moz-transform: translate3d(0,0,0) rotate(156deg); }
9% { -moz-transform: translate3d(0,0,0) rotate(136deg); }
11% { -moz-transform: translate3d(0,0,0) rotate(40deg); }
12% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
100% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
}