A warning is different to an error and will pass validation.
This is the demo code mocked-up into a basic HTML5 web page. If you paste it as direct input into WC3 Validator http://validator.w3.org/ , you can see that is passes validation;
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spinning Icons</title>
<meta name="description" content="Spinning Icons">
<meta name="author" content="Dynamic Drive">
<style type="text/css">
p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
border:0;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border:0;
}
p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
border:0;
}
p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>
</head>
<body>
<p><b>360 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons">
<a href="http://www.dynamicdrive.com/"><img src="rss.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="delicious.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="facebook.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="twitter.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="yahoo.png" alt="" /></a>
</p>
<p><b>60 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons2">
<a href="http://www.dynamicdrive.com/"><img src="rss.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="delicious.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="facebook.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="twitter.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="yahoo.png" alt="" /></a>
</p>
<p><b>-360 degree spin onMouseover ONLY</b></p>
<p id="socialicons3">
<a href="http://www.dynamicdrive.com/"><img src="rss.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="delicious.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="facebook.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="twitter.png" alt="" /></a>
<a href="http://www.dynamicdrive.com/"><img src="yahoo.png" alt="" /></a>
</p>
</body>
</html>
I made the changes that I previously posted and I also replaced the border="0" attributes in the <img> tag with border:0; in the CSS.
sorry but in html5 you get warnings saying to put the images into css instead of html5 w3c
no, the warning was to remove the border="" attribute, not the image itself. Even without these changes, the document still passed validation (they just flagged as additinal warnings, but the doc still passed)
There are now only 2 warning showing on screen;
1 - is the warning that advises that the HTML5 conformance checker is an experimental feature.
2 - is the warning that ties to character encoding on direct pastes, which always defaults to UTF-8 regardless of what is defined into the pasted markup.
As I said before though, this is still a valid document.
New Comer (less than 5 posts)
spinning icons css3
Originally Posted by Beverleyh
Posting Permissions
Reply With Quote
Bookmarks