Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Send Mail Via SMTP Replacement/Rework 11 61
Javascript Hashmap output 8 47
is this a cms? 8 35
How to get this page layout correct 13 4
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

867 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now