?
Solved

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

Posted on 2008-10-14
3
Medium Priority
?
283 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 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

840 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