• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 286
  • Last Modified:

Can't get the CSS fuzzy shadow effect to work.

I believe I followed the tutorial I found here correctly (http://www.alistapart.com/articles/cssdrop2/ ), but apparently not.

Please take a look at my attempt and let me know what I need to do to make it work. http://www.discretedata.com/A1/RD/FuzzyShadEffect.html.  

Thanks!

John
0
John Carney
Asked:
John Carney
1 Solution
 
brundoCommented:
First, delete all your five "»" sign. Then you'll see the shadow, but the white border around the image, too (like on photos).

Second, define

.alpha-shadow img {
  border: none;
  padding: 0;
}

The shadow will be thinner than the shadow on your picture, but this is because of thin shadows in shadow2 images (look at the shadows in the article you mentioned).
0
 
RapturerCommented:
Hi John -

Try the attached code in your test page.

It is another way of going about fixing this. I would personally avoid using Microsoft effects because of sketchy support for other browsers.

Best,

Rapturer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Fuzzy Shadow</title>
 
<style>
.text{ clear:both; padding: 20px 0 0 15px}
.pic{margin: 10px 0 0 14px;}
/******************This is the CSS element I would use...This way Firefox users will get to see the dropshadow also**************/
.alpha-shadow{
  float: left;
  background-image: url(http://www.discretedata.com/A1/RD/images/shadow1.gif);
  	background-repeat:no-repeat;
	background-position:bottom right;
	padding-bottom:1px;
	padding-right:6px;
  margin: 10px 0px 10px 10px !important;
 /* margin: 10px 0 0 5px; */
	
}
/*
.alpha-shadow div {
  background: url(http://www.discretedata.com/A1/RD/images/shadow2.png) »
  no-repeat left top !important;
  background: url(http://www.discretedata.com/A1/RD/images/shadow2.gif) »
  no-repeat left top;
  padding: 0px 5px 5px 0px;
}
 
.alpha-shadow img {
  background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 4px;
}
.alpha-shadow div {
  filter:progid:DXImageTransform.Microsoft»
.AlphaImageLoader(src='http://www.discretedata.com/A1/RD/images/shadow1.png', »
  sizingMethod='crop');
  background: none;
}
 
*/
body,td,th {
	font-family: Gill Sans MT;
	font-size: 16px;
}
</style>
<!--[if gte ie 5.5000]>
<link
  rel="stylesheet"
  type="text/css"
  href="ie.css"
/>
<![endif]-->
 
</head>
 
<body>
 
 
 
<div class="text"> I was expecting this:</div>
<div class="pic"><img src="http://www.discretedata.com/A1/RD/images/cosmeticCounterWShad.jpg" width="447" height="126" /><br />
</div>
<div class="text"> But I got this instead:</div>
 
<div class="alpha-shadow">
 
    <img src="http://www.discretedata.com/A1/RD/images/cosmeticCounter.jpg" alt="just a test" />
 
</div>
 
<div class="text">Please correct my html and css so that I get the fuzzy shadow effect.<br />
 
  <br />
Thanks!<br />
<br />
John</div>
 
</body>
</html>

Open in new window

0
 
John CarneyReliability Business Tools Analyst IIAuthor Commented:
Thanks, brundo.  It works great.

John
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now