6 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

Well, here's something. I find myself (strange thing, employment) in the position of needing to create an html link that is drop-shadowed. Simple enough, yes? However, I also need to reverse the colors of the front-text and drop-shadow on rollover. Tricky, yes? I wish it were less tricky. Here's my most recent prototype, which is about 1/4 working in IE and not at all in Netscape.

<html>
<head>
<style>

.top {
	position: relative;
	left: 1px;
	top: 1px;
	
	font-family : sans-serif;
	font-size : 14pt;
	font-stretch : ultra-expanded;
	font-weight : 900;
	color : #3366FF;
	text-decoration : none;
}

.bottom {
	position: absolute;
	left: -2px;
	top: -2px;
	
	font-family : sans-serif;
	font-size : 14pt;
	font-stretch : ultra-expanded;
	font-weight : 900;
	color : #33FFFF;
	text-decoration : none;
}

a:hover .top {
	color : #33FFFF;
}

a:hover .bottom {
	color : #3366FF;
}


</style>
</head>
<body>

<div align=center>
	<a href='#'>
		<div class=top>DROPSHADOW<div class=bottom>DROPSHADOW</div></div>
	</a>
</div>


</body>
</html>

This is big pain in rears, yes? Anybody got any idea how to work this?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Drop-Shadow Rollover Drop-Kick

Hi Duke,
The only thing I could suggest is to give each of the divs an id and call a javascript function to change the colors onmouseover.

function swapcolor(id1, id2){
   var fst=document.getElementById(id1);
   var snd=document.getElementById(id2);
   var tmpc=fst.style.color; 
   fst.style.color=snd.style.color;
   snd.style.color=tmpc;
}

 
   <a href='#' onmouseover="javascript:swapcolor('x','y');"> 
      <div id="x" class="top" style="color:#3366FF" >
   DROPSHADOW<div id="y" class="bottom" style="color:#33FFFF">
DROPSHADOW
</div></div> </a> 
 

May need some refining but at least it's a start.

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 13 years 20 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

Drop-Shadow Rollover Drop-Kick

It would be nice if this effect could be achieved purely through CSS. The first method above duplicates the text, and the second requires javascript in the page.

In later versions of IE, you could of course use filters to achieve a drop shadow directly, but it's limited to that browser.

But anyway, I had a hack at trying to get the div-in-anchor-link version to work, but had all sorts of nasty problems.

A thought - you could always render the drop-shadowed text as an image, set that as the background image for the anchor link, then switch the image on hover... you'd want to make sure you still used the title tag, etc, so that the link is available to those without image/css support, however.

Anonymous
Anonymous's picture
Guru

Drop-Shadow Rollover Drop-Kick

Yeah, I was hoping to do it without javascript. And the reason I'm even trying to do such a monstrous thing is for the 'lite' (as in beer) version of the website that cuts out 90% of all images (and the guy I'm doing it for just loves wordart), so using an image would be redundant.

I've been toying with this for way to long, and have actually gotten it to work in netscape, but not in IE. The way it works in netscape is:

<html>
<head>
<style>

.top, .bottom {
	font-family : sans-serif;
	font-size : 14pt;
	font-stretch : ultra-expanded;
	font-weight : 900;
	text-decoration : none;
	background-color : transparent;
}

.top {
	position: relative;
	left: 0px;
	top: 0px;
	
	color : #3366FF;
}

.bottom {
	position: absolute;
	left: -2px;
	top: -2px;
	
	color : #33FFFF;
}

a:hover span.top {
	color : #33FFFF;
}

a:hover span.bottom {
	color : #3366FF;
}

</style>
</head>
<body>

<div align=center>
	<div>
		<a href='#' style='text-decoration:none;'>
			<span class=top>DROPSHADOW<span class=bottom>DROPSHADOW</span></span>
		</a>
	</div>
</div>


</body>
</html>

If you run the above page in netscape 7, it works perfectly (I don't have any earlier versions of netscape installed at present, can anyone tells me if it breaks in netscape 6?) In IE 5, it's very peculiar. Only the bottom span is recognized as a link at all, but both spans change colors if the bottom layer is clicked on. It's confusing.

Anonymous
Anonymous's picture
Guru

Drop-Shadow Rollover Drop-Kick

Incidentally, and a bit strangely, I've not been able to get the javascript function you suggested (or a couple alternates I've been trying) to work in either browser.

rangerdave
Offline
newbie
Last seen: 17 years 5 weeks ago
Joined: 2003-09-24
Posts: 1
Points: 0

I've got a solution...

I can get it to work. But not 100%. here is what I've got. If you take this first set of code, save it as your index. Take the second set of code, save it as left.html. Then open them up, you'll see that it works, but only when the linked text wraps to the second line. If anybody can give me a nudge here, that would be great!

-Ranger

<html>
<head>
<title>test</title>

</head>
<!-- frames -->
<frameset  cols="140,*" marginwidth=0 marginheight=0 framespacing=0 frameborder=0 border=0>
    <frame name="left" src="left.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
    <frame name="right" src="right.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" noresize>
</frameset>

<html>
<body background = "background.jpg" bgcolor = #000099>
<div align="left">
  
	    <style type="text/css" >



a:link
{
text-decoration:none;
color:white;
background:#000099 ;
font-weight : bold;
width: 125px;
display:compact;
}

a:active
{
text-decoration:none;
color:white;
background: #000099;
font-weight:bold;
width: 125px;
display:compact;
}

a:visited 
{
text-decoration:none;
color:white;
background:#000099;
font-weight:bold;
width: 125px;
display:compact;	  
}

a:hover
{
text-decoration:none;
color:white;
font-weight:bold;
width: 125px;
background: red;
display:block;	  
}



a {font-size:14px;}

<!--
#title {
font: bold;
font-size: 14px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: relative;
top: 0px;
left: 0px;
}
#text {
position: relative;
top: 0px;
left: 0px;
color: white; 
z-index:2;
}
#shadow {
position: absolute;
top: 2px;
left: 2px;
color: black;
z-index:1;
}
-->

</style>
</div>
<table width="90" border="0" height="123" background="CPIlogo3.jpg">
    <tr> 
      <td height="122">&nbsp;</td>
    </tr>
  </table>



  <table width="90" border="0" height="150" >
    <tr> <td height = "10">&nbsp;</tr>
    <tr><td height = "30"><div id="title"><p><a href="service.html" target = right ><span id="text">Home</span><span id="shadow">Home</span></a></p></div></tr>
    <tr><td height = "30"><div id="title"><p><a href="service.html" target = right ><span id="text">Service and Plants</span><span id="shadow">Service and Plants</span></a></p></div></tr>
    <tr><td height = "30"><div id="title"><p><a href="service.html" target = right ><span id="text">Service and Plants</span><span id="shadow">Service and Plants</span></a></p></div></tr>
    <tr><td height = "30"><div id="title"><p><a href="service.html" target = right ><span id="text">Service and Plants</span><span id="shadow">Service and Plants</span></a></p></div></tr>
    <tr><td height = "30"><div id="title"><p><a href="service.html" target = right ><span id="text">Service and Plants</span><span id="shadow">Service and Plants</span></a></p></div></tr>
  </table>
</font>


</div>
<body>


</body>
</html>

adventurex
adventurex's picture
Offline
newbie
Last seen: 17 years 5 weeks ago
Joined: 2003-09-24
Posts: 10
Points: 0

Drop-Shadow Rollover Drop-Kick

Hi Duke,

Adding following solved the problem in IE 6.0 :

a:hover { 
   color : #33FFFF; 
} 

Although this does not work with Opera 7.2, but works with Mozilla/Netscape/Firebird latest version. I have also attached the file to look at.

adventureX