Results 1 to 5 of 5

Thread: spinning icons css3

  1. #1
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default spinning icons css3

    1) Script Title: Spinning icons using CSS3 transform

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...ss3_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
    Last edited by james438; 04-09-2013 at 03:43 AM. Reason: Added the ddscript format

  2. #2
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    any one?

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

    Quote Originally Posted by Beverleyh View Post
    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.

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by Beverleyh; 04-09-2013 at 03:21 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Replies: 3
    Last Post: 01-16-2012, 12:39 PM
  2. 3D spinning message
    By newg1950 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-22-2008, 06:23 PM
  3. 3D spinning message
    By SilverWolf in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-22-2008, 11:50 PM
  4. I Need Help With The 3d Spinning Message
    By pinoyscrplaya517 in forum Dynamic Drive scripts help
    Replies: 15
    Last Post: 11-08-2004, 12:51 PM
  5. 3D Spinning Message
    By dinah roseberry in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-02-2004, 01:02 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •