CSS - Help W/ Font Drop Shadow & Gradient Effect

Hi there

I am busy making a drop shadow for a div on my site. Works great in everything except IE (well there's a surprise).

What I would like to have is a shadow that emanates from a light source directly above the element (figuratively speaking). The shadow will in other words extend in all directions (or ideally to the left, right and bottom, but not the top) from underneath the div.

I can't seem to get the spread right in IE. It seems that in IE I can only have the shadow extend in one direction.

Here is what it looks like in Chrome, Firefox and Safari (what I want it to loo like)


And this is what I have managed to do for IE 7 & 8


And here is the code:
Code:

#myDiv{-moz-box-shadow: 0px 10px 33px #000; -webkit-box-shadow: 0px 10px 33px #000; box-shadow: 0px 10px 33px #000; /* For IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000');}

I have been considering using three different elements each with it's own shadow going in different directions. This means a lot of tweaking to only display these elements in IE, and just seems messy in general.

Does anyone have any ideas on how I can solve this in a simpler way?

Any advice would be much appreciated

CODE TITLE:
CSS drop shadow

DESCRIPTION:
Technique to build flexible CSS drop shadows (realistic) applied to arbitrary block elements (no images).

URL TO CODE:
CSS drop shadow

Hello,

Quick Q:

How would I go about getting this effect (drop-shadow/rounded corners around the main container div - here are a couple examples):

http://urlgreyhot.com/personal/

http://www.fiftyfoureleven.com/sandbox/weblog/

I am aware of the tutorials found on ALA site... but those tuts do not use .png's to achieve the drop-shadow/rounded-corner effect.

Can someone point me to a nice tutorial?

I have tried viewing the CSS of above sites, but I have found it a bit confusing, and I would prefer a simplified version of the code.

Anyone feel like sharing techniques?

Thanks in advance!
Cheers
M

I want to add a css drop shadow on flash object (embedded using the object tag) that works with Firefox, Internet Explorer and Safari... anyone know how I can code that or know where there examples of it?

TIA

I'm learning CSS and creating a blog at annieagarwal.com/blog (again, work in progress!)

I want to recreate the shadow on the sides of the main container of this blog

the url is blocked just google robin cornett and then find the style sheets

How do I do that?
The blog has two style sheets


My style sheet is at
annieagarwal.com/blog/wp-content/themes/tofurious/style.css

I created a png of the shadow that is 1000px wide at annieagarwal.com/blog/wp-content/themes/tofurious/images/shadow.png

But I can't seem to get the code right. I want to use a background image/color along with the container having a drop shadow.

How do I apply a css drop shadow around the search widget generated by this script code?
Code:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dfacd65d-6514-4845-ad81-7249d33a6280');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/college-search">College search</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript>

I am using this:
http://alistapart.com/articles/cssdropshadows/

for use on a gallery. Each image it is applied to is in a table cell. However, because its floated left, it floats to the left of the table cell even though I have cent the text-align to center

(-:

hey all, i have just been looking at this site http://www.dynasig.net/index.php after seeing a link on devshed to it and i really like the menu...thing is i can't seem to get the gradient like they have it... any ideas??

thanks in advanced to anyone who can reply

RF

Hi.

I would like to create a gradient similar to the microsoft website.

http://www.microsoft.com/downloads

Look how the gradients at the top and bottom of the page work. Im sure this is not simply repeating an image.

Does anyone know how this works?
or can point me in the direction of a tutorial on how to achieve this?

I looked at the microsoft site in Opera and NS, and the dynamic grad only seems to work in IE.

So im guessing that you can also set a bkgnd image?
for the other browsers?

many thanks.

Hey everyone.

First of all, I apologise for imposing on you another question about drop shadows in CSS. I have tried my hardest with what I've been trying to achieve here (including using the resources that gave me the info to use this technique in the first place) but I've hit a brick wall.

Allow me to demonstrate: http://www.hrfc.org.uk/test2/index.htm

At the top right of the content, there is a box I've created, within which the ultimate user of this site will be able to put screen shots, and then type their captions below.

Ideally, I want to be able to have this box (.grabcontainer in the CSS) have a drop shadow.

I was able to achieve a drop shadow for the <img> on its own (as can be seen by scrolling further down the page to the image at the bottom)... but I can't think of a way of extending this technique so that it works for my .grabcontainer class.

If anyone has any suggestions I'd really appreciate it. I've played with this all day but every attempt normally ruins the careful arrangement of the divs.

Thanks for reading

Eldoc

Thanks for taking the time to read my question.

I have a box in which I have text. I would like to make that box look like it has a shadow to the bottom right.

I can't seem to figure out how to do that with my CSS.

here is the <div> and my CSS


Code:

<body>
<div id="MainContainer">
<div id="Title">Landmark Feeds - Links to Standard Operating Procedures</div>
	<hr />
	<div class="dtree">
		<p id="TreeLinks"><span><a class="QuickLink" href="javascript:%20d.openAll();">Open All Folders</a> <a class="QuickLink" href="javascript:%20d.closeAll();">Close All Folders</a></span></p>
		<p id="TreeLinks"><span><a class="QuickLink" href="javascript: d.openTo(1, true);">Open Terms</a> <a class="QuickLink" href="javascript: d.openTo(2, true);">Open Payment Schedules</a> <a class="QuickLink" href="javascript: d.openTo(3, true);">Open SOP's</a></span></p>
		<p><script type="text/javascript" src="JavaScript/dtreeDocWrite.js"></script></p>
	</div>
	<hr />
	
</div>
<div id="CR">Last Updated: February 28, 2006</div>
</body>

Code:

#Title {
font-size: 26px;
color: black;
border-width: 3px;
border-color: #d81f03;
border-style: solid;
margin-top: -55px;
margin-left: 0px;
float: left;
background-color: #F5F5F5;
padding: 5px;
}

Thanks,

Brad

I've got a div tag that I show and hide on an accessKey press. It is used for special navagation in the site. The div tag has a background color defined in the CSS. The background color only shows up in FF.

I know I'm using tables when I don't need to, and this is pretty sloppy right now.. but I'm going to clean it up a bit... I just finished writing a function to keep the div tags above select elements in IE and haven't had a chance to do the cleaning up yet.

But I think my problem is probably very simple and is something stupid in my style sheet or some behavior of IE I don't know about or have forgotten about.

Code:

<div id="gotoSmall"><input type="image" id="hiddenGoTo" src="<c:out value='${pageContext.request.contextPath}'/>/images/XXXXyyyy/empty.gif" name="hiddenGoTo" accessKey="g" onfocus="showHideGoto('show');"/></div>
<div id="gotoDiv">
	<form name="GoToScreen" class="form" onsubmit="javascript:return goToNextScreen(this,'<c:out value='${pageContext.request.contextPath}'/>')" method="post">
	
	<table class="goToTable" id="gotoTable">						
		<tr>
			<td align="right" nowrap="nowrap">
				<label class="XXXXGoToLabel" id="goTo">go to</Label> 
			</td><td>
		      	<input name="screenName" autocomplete="off" class="XXXXGoToInput" id="XXXXGoToInput" type="text" onblur="return toUpper(this);" size="12"  height="20px" value="" maxlength="12" tabindex="-1"/>										  		
  			</td>
  			<td>&nbsp;
  				<input type="hidden" name="XXXXActionOrTab" value="Refresh"/>
		  		<input type="hidden" name="useSessionKeys" value="true"/>
		  		<input type="hidden" name="backButtonCheck" value="pageLoad"/>		
		  	</td>
  		</tr><tr>
  			<td align="center" colspan="3">
  				<table>
  					<tr>
  						<td align="right">
  							<input type="submit" name="GoTo" value="Goto" onclick="buttonClick(this);"/>						
						</td><td align="left">
							<input type="button" name="cancel" value="Cancel" onclick="showHideGoto('hide')"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	</form>	
</div>

Code:

#gotoDiv{
	display: block;
	left:450;
	top:200;
	z-index:10000;
	width:204px;
	height:54px;
	visibility:hidden;
	position: absolute;
	background-color: grey;
}#gotoSmall{
	display: block;	
	z-index:10000;
	width:0px;
	height:0px;
	position: absolute;
}
.goToTable{
	width:200px;
	height:50px;
	background-color: #e0dfe3;
	border: 1px solid black;
	border-style: groove;
	border-spacing: 0px;
	border-collapse: collapse;
}

Hey everyone. Can anyone tell me why the blue container backgrounds on my development site... http://cmsbase.stealthwd.ca are having a gradient in ie? I'm talking about the news, twitter, main copy etc containers. It's supposed to just repeat the image, but its making the image a gradient from left to right.

Other browsers are fine.

Please and thanks!