Solved

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

Posted on 2008-10-14
3
248 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
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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ebay seller html tags 2 25
Scroll 5 news at a time. 4 27
Change of column alignment in div 2 18
Wordpress plugins not working in html 3 23
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

773 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