?
Solved

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

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

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

777 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