Solved

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

Posted on 2008-10-14
3
262 Views
Last Modified: 2012-05-05
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
Comment
Question by:gabrielPennyback
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 13

Accepted Solution

by:
brundo earned 500 total points
ID: 22716081
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
 
LVL 1

Expert Comment

by:Rapturer
ID: 22716362
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
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 22716582
Thanks, brundo.  It works great.

John
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question