Gradient wipe on link on underline overline/hover?

  • HKt0p5
  • Graduate
  • Graduate
  • User avatar
  • Posts: 135
  • Loc: Bulgaria

Post 3+ Months Ago

Is there a way to add a gradient wipe into this:
Code: [ Select ]
<style type="text/css">
<!--
A
{cursor:hand;height:1px; }
A:link {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
A:visited {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
A:active {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
A:hover {color: #FFFFFF;text-decoration: underline overline; cursor: hand; height: 9px}
body
{background-color: #333333;
background-attachment:no-repeat;
cursor: default;}
div, table, tr, td, tt, p, a
{ font-family: MS PGothic; font-size: 11pt; color: #FFFFFF;}
-->
</style>
  1. <style type="text/css">
  2. <!--
  3. A
  4. {cursor:hand;height:1px; }
  5. A:link {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
  6. A:visited {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
  7. A:active {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
  8. A:hover {color: #FFFFFF;text-decoration: underline overline; cursor: hand; height: 9px}
  9. body
  10. {background-color: #333333;
  11. background-attachment:no-repeat;
  12. cursor: default;}
  13. div, table, tr, td, tt, p, a
  14. { font-family: MS PGothic; font-size: 11pt; color: #FFFFFF;}
  15. -->
  16. </style>

So that the links seen here:
http://hirasawa2032.com
do something like this on "A:hover":
Image
Um.. get my idea? I remember it was something that had "gradientwipe" or something like that but i couldn't find it googleing.

I hope it's not Javascript, and that it could be displayed in most browsers.. if not, forget it. But if possble just to add to the code as is and work, please, could you post me my code with that added?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • HKt0p5
  • Graduate
  • Graduate
  • User avatar
  • Posts: 135
  • Loc: Bulgaria

Post 3+ Months Ago

Wait, I figured it...
Code: [ Select ]
<style type="text/css">
<!--
A
{cursor:hand;height:1px;behavior:url(link.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}
A:link {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
A:visited {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
A:active {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
A:hover {color: #FFFFFF;text-decoration: underline overline; cursor: hand; height: 9px}
body
{background-color: #333333;
background-attachment:no-repeat;
cursor: default;}
div, table, tr, td, tt, p, a
{ font-family: MS PGothic; font-size: 11pt; color: #FFFFFF;}
-->
</style>
  1. <style type="text/css">
  2. <!--
  3. A
  4. {cursor:hand;height:1px;behavior:url(link.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}
  5. A:link {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
  6. A:visited {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
  7. A:active {color: #FFFFFF;text-decoration: none; cursor: hand; height: 9px;}
  8. A:hover {color: #FFFFFF;text-decoration: underline overline; cursor: hand; height: 9px}
  9. body
  10. {background-color: #333333;
  11. background-attachment:no-repeat;
  12. cursor: default;}
  13. div, table, tr, td, tt, p, a
  14. { font-family: MS PGothic; font-size: 11pt; color: #FFFFFF;}
  15. -->
  16. </style>


Seems like it works only in IE though but it's OK, as long as it doesn't damage anything in other browsers. Would it?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

It doesn't work for me in either browsers. Doesn't work in FF3 or IE7.
  • HKt0p5
  • Graduate
  • Graduate
  • User avatar
  • Posts: 135
  • Loc: Bulgaria

Post 3+ Months Ago

I haven't added it yet, I wanted some opinions first... Sorry.. ._.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Be carefull with applying styles to "a" without a pseudo selector such as ":link" or ":hover" if you ever place text inside of anchors/location-markers. This can sometimes produce unexpected results.

As long as you keep that "filter" on its' own line within the a:hover rule, I don't believe it will cause any [other] browsers to do anything other than ignore that rule.

Code: [ Select ]
a:hover {rules...;
filter:...;
}
  1. a:hover {rules...;
  2. filter:...;
  3. }
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

the example above can be easily done with an animated gif as the background image of the <a>
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Which assumes fonts are the same size in everyones' browser, which is far from the truth even if you use px sizes in CSS. :)
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

yeah the overline/underline combo is a bit of an issue but an animated background, underline, etc should be fine... but perhaps this is one of those places where the design could be adjusted slightly for greater ease and compatibility.

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 35 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.