Solved

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

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

760 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

21 Experts available now in Live!

Get 1:1 Help Now