CSS - Drop Shadow Background Effect

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.

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

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

Hi all, I have searched all over and can't seem to find an answer. I am looking for a template or tutorial on how to build a center content area with a drop shadow on top of a gradient background. An exact example would be:

www.fatwallet.com
points2shop.com

Thanks for any guidance!

(-:

This is basically what my html looks like:
Code:

<tr class=bullish><td>BLAH</td><td>blah</td><td>Blah</td></tr>

Here's the relevant section of my external style sheet:
Code:

tr.bullish { background-color: #CCFFCC; font-weight: bold;}
tr.bearish { background-color: #FFCCCC; }
tr.neutral { background-color: #FFFFFF; }

here is a screenshot showing the rendered webpage plus the source plus the CSS source. The background colors are for the table rows with up to 5 checkboxes. The screenshot shows them to be white, rather than the light red / light green that I'm going for.

Screenshot

Here's my CSS.

Code:

body { 	margin: 0; 	paddeing: 0; } #overall { 	padding: 0; 	margin: 0; } #content { 	padding-top: 40px; 	padding-left: 10px; } #nav { 	width: 100%; 	float: left; 	margin: 0 0 0 0; 	height: 30px; 	padding: 0 0 0 0; 	background-color: #660000; 	boder-bottom: 1px solid #000000; } #navbar { 	margin: 0; 	padding: 0; 	border-bottom: 1px solid #000000; 	height: 30px; 	background-color: #660000; } #navbar ul { 	list-style: none; 	width: 100%; 	margin-left: auto; 	margin-right: auto; 	margin-top: 0; 	margin-bottom: 0; 	padding: 0; } #navbar li { 	list-style: none; 	margin-left: auto; 	margin-right: auto; 	width: 150px; 	height: 30px; 	background-image:url('images/block.jpg'); 	float: left; } #navbar li a { 	display: block; 	margin: 0 0 0 0; 	padding: 5 0 6 0; 	text-align: center; 	color: #ffcc00; 	text-decoration: none; } #navbar li a:hover { 	background-image:url('images/blockselect.jpg'); } #navbar li ul { 	display: none; 	width: auto; 	background-color: #660000; } #navbar li:hover ul { 	display: block; 	position: absolute; 	margin: 0; 	padding: 0; } #navbar li:hover li { 	float: none; } #navbar li: hover li a { 	background-image:url('images/block.jpg'); 	color: #ffccoo; } #navbar li li a:hover { 	background-image:url('images/blockselect.jpg'); }

And my HTML:

Code:

<link rel="stylesheet" type="text/css" href="style.css"> <div id="overall"> 	<div id="nav"> 		<div id="navbar"> 			<ul> 				<li><a href="#">Item One</a><ul> 					<li><a href="#">Sub Item One</a></li> 					<li><a href="#">Sub Item Two</a></li> 					<li><a href="#">Sub Item Three</a></li></ul> 				</li> 				<li><a href="#">Item Two</a><ul> 					<li><a href="#">Sub Item Four</a></li> 					<li><a href="#">Sub Item Five</a></li> 					<li><a href="#">Sub Item Six</a></li></ul> 				</li> 				<li><a href="#">Item Three</a><ul> 					<li><a href="#">Sub Item Seven</a></li> 					<li><a href="#">Sub Item Eight</a></li> 					<li><a href="#">Sub Item Nine</a></li></ul> 				</li> 			</ul> 		</div> 	</div> 	<div id="content"> 	Sauce 	</div> </div>

Now, here's what I want to do: Take the nav-bar, and center it horizontally across the page. However, I want to retain the drop-down box background image and width, so the image doesn't get screwed up. I'd also like (rather than the nav bar wrapping to the next line) when the window gets too short, for a scroll bar to appear.

Here's my question: HOW THE HECK? I started trying to learn CSS a couple years ago, never really got into it. Trying again, but I need help...

dimensions of the background image(s) are 150x30.

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

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;
}

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

Hi guys

I've seen a few websites that use a fixed width column in the middle of the screen that appear to cast a shadow over the background. I want to achieve that but I can't figure out how.

The central div is 800px wide so I tried creating a very wide but short background image with this image on but I can't position it bang in the middle where I need it (the image is 2400x8px and 1.46KB)

Can anyone help? Either with the positioning of this image or with a better solution?

Cheers guys

Hi:

I'm trying to create text with a drop-shadow without having to resort to an image.

I have found the "shadow" command for CSS and have used it as such:
Code:

p.title_drop_shadow_yellow {
    margin:0px auto;
    font-family: Biondi, Serif; 
    text-transform: capitalize; 
    font-variant: small-caps;   
    width:650px;
    filter:shadow;
    color:#FBDE80;
    font-size:250%;
}

This gives the desired effect in MS Internet Explorer (granted the color choice needs some work) but it gives no effect at all in firefox.

Does anyone know how to make this work on other browsers? Is there another way to get a drop-shadow?

Thanks.

Hello, I am wanting to add a shadow to both sides of the container box i have for my css site layout. Is this possible. I was using border-left and border right applying the border settings but i would like to have a more of a shadow result. Can anyone help me with this please? Many thanks in advance.