StyleWired » (X)HTML Tips http://www.stylewired.com It's All About Internet Marketing Actually Sun, 01 May 2011 18:17:39 +0000 en hourly 1 http://wordpress.org/?v=3.1 How to create a ‘flash mimic’ animated rollover link using just HTML and CSS http://www.stylewired.com/xhtml-tips/how-to-create-a-flash-mimic-animated-rollover-link-using-just-html-and-css http://www.stylewired.com/xhtml-tips/how-to-create-a-flash-mimic-animated-rollover-link-using-just-html-and-css#comments Fri, 26 Feb 2010 13:28:21 +0000 Chris http://www.stylewired.com/?p=225 This is an extremely simple and lightweight way of created a link that animates on hover. All you have to do is create your link in the normal way using HTML. For example:

  1. <p class="animated-rollover"><a href="#">Link text</a></p>

Now style this code so that you have a background image for ‘p.animated-rollover a’ and a different background image for ‘p.animated-rollover a:hover’. The hover state background image is going to be an animated gif. This is how you get the animation on hover.

  1. p.animated-rollover { width: 150px; height: 40px; background: url(images/animated_rollover_a_hover.gif); text-align: center; line-height: 40px; }
  2.  
  3. p.animated-rollover a { width: 150px; height: 40px; background: url(images/animated_rollover_a.gif); display: block; }
  4.  
  5. p.animated-rollover a:hover { background: url(images/animated_rollover_a_hover.gif); }

I’ve left out any text styling in this example. You could use ‘text-indent: -5000px; overflow: hidden’ and use the background image for the text if you like.

]]> http://www.stylewired.com/xhtml-tips/how-to-create-a-flash-mimic-animated-rollover-link-using-just-html-and-css/feed 0 Emulating HTML5 using comment tags to make your HTML easier to edit http://www.stylewired.com/xhtml-tips/emulating-html5-with-comments-to-make-html-easier-to-edit http://www.stylewired.com/xhtml-tips/emulating-html5-with-comments-to-make-html-easier-to-edit#comments Wed, 29 Oct 2008 13:21:28 +0000 Chris http://www.stylewired.com/?p=88 This is something I’ve been doing in all of the pages I’ve been coding for the last year or so. I’ve noticed other designers doing similar things. This is a simple little trick that makes hand editing code a lot easier.

Associating end tags with start tags using comments

Quite simply all I do is this:

  1. <div id="footer">
  2.  
  3. <p>footer content here</p>
  4.  
  5. </div>
  6. <!– /#footer –>

If I need to edit the code quickly I can easily establish the start and end of any particular element. This is similar to the HTML5 format, which is not yet being used by browsers, because HTML5 is going to be formatted something like this:

  1. <footer>
  2.  
  3. <p>footer content here</p>
  4.  
  5. </footer>
]]> http://www.stylewired.com/xhtml-tips/emulating-html5-with-comments-to-make-html-easier-to-edit/feed 0