PDA

View Full Version : spinning icons css3



maltonge
04-09-2013, 03:12 AM
1) Script Title: Spinning icons using CSS3 transform

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/spinning_icons_using_css3_transform/

3) Describe problem: Hi all my first post ok, I love what you have done with the spinning icons however this is not valid html as the images are not called from the css. I was wondering if you could edit the code so that it validates as html 5. The images need to be called from the css rather than html as it is now. Thanks again.

kind Regards

maltonge

maltonge
04-09-2013, 12:11 PM
any one?

Beverleyh
04-09-2013, 12:46 PM
The only markup issues that cause the demo to fail validation are;

1 - The omitted opening <p> tag on the very first line. ( <p><b>360 degree spin onMouseover and onMouseout</b></p>)

2 - The missing a="" attribute from each image.

Put these in and the demo validates without a problem. Whether the images are inserted as background images in CSS, or embedded via <img> tags directly in the page markup, has no negative implications in HTML5.

maltonge
04-09-2013, 02:42 PM
sorry but in html5 you get warnings saying to put the images into css instead of html5 w3c. I can understand this as the best solution is to call all images from css and not bloat the html pages with img tags. its ok i will make a new edition to this and upload it to wordpress as a plugin just not got the time at the minute. I will share the code also here once complete.


The only markup issues that cause the demo to fail validation are;

1 - The omitted opening <p> tag on the very first line. ( <p><b>360 degree spin onMouseover and onMouseout</b></p>)

2 - The missing a="" attribute from each image.

Put these in and the demo validates without a problem. Whether the images are inserted as background images in CSS, or embedded via <img> tags directly in the page markup, has no negative implications in HTML5.

Beverleyh
04-09-2013, 03:01 PM
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;
<!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 w3cno, 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.