CSS - Css Drop Shadow On Object/flash

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'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.

I really strive to stay as close to design when I get a psd from a graphic designer. Sometimes that can be a challenge such as the situation I am having now. If you look at this page

Osake Restaurant

you will see a header on the page that reads Restaurant Menu. This header is using a custom font called Lato.

I have uploaded a screenshot of the layer styles for drop shadow and gradient.
Screen Shot

Below is some code I found from a tutorial for css drop-shadow -

Code:

/* default setup that everything sees */
.shadow {
  /* needed for Internet explorer */
  height: 1em;
  filter: Shadow(Color=#666666, 
                 Direction=135, 
                 Strength=5);

  /* Needed for Gecko */
  line-height: 2em;
  white-space: nowrap;

}

/* 
 * used by browsers which know about
 * :before to create the shadow 
 */
.shadow:before {
  display: block;
  margin: 0 0 -2.12em 0.15em;
  padding: 0;
  color: #666666; 
}

#shadow_1:before { 
  content: 'In shadow'; 
}
#second_2:before { 
  content: 'Happy Shadowing!'; 
}

/*\*/
html*.shadow {

  [color:red;/* required by Safari 
              * so that [] is correctly
              * begun. associated with
              * the property, yet hiding
              * it. Seen by IE6 */

    /* 
     * seen by IE6 and Safari, but hidden
     * from Gecko 
     */
    text-shadow: #666666 5px 5px 5px; 

  ]color:auto; /* resets color for IE6 */
}/**/

/* 
 * end hack using dummy attribute selector
 * for IE5 mac
 */
.dummyend[id]{clear: both;}

/*\*/
html*.shadow:before {

  [color:red;/* required by Safari. 
                seen by IE6 */

    /* 
     * seen by IE6 and Safari, but hidden
     * from Gecko 
     */
    display: none;

  ]color:auto; /* resets color for IE6 */
}/**/

/* 
 * end hack using dummy attribute selector
 * for IE5 mac
 */
.dummyend[id]{clear: both;}

My question is how do I go from those settings in PSD to a equivalent look in HTML w/ CSS. Do I just play around with it or is there a more precise way.

Also what about for gradient. Hopefully others can learn from this thread as well. Thanks! Tom

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

I have a flash that is embeded inside a div. however, I only want to show the upper right corner first, when user mouse over, the div will expand.

This works good in Firefox and chrome, but not in IE

I put the flash to align to the right, but IE keep it in the left, and keep showing the upper left corner instead of upper right.

Please help.. thanks

Ok, well I have a simple flash movie embedded into my html like this:

PHP Code:
 object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="160" height="199">
<param name="movie" value="images/welcome.swf">
<param name="quality" value="high">
<embed src="images/welcome.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="199"></embed></object> 






And I wish to add this style to it but Im not sure how ?? :

PHP Code:
 img.right { border: 0.06em solid #FF66CC; 
            border-right: 0em solid #FF66CC; 
            border-bottom: 0em solid #FF66CC;
} 





Thanks for your time.

(-:

NEVER MIND

So, I'm workin on a site that has a drop down menu in CSS. It worked fine when I had a banner (gif). Dropped down over the image perfectly. But now I changed the .gif to an animation and made it an .swf file. Now the drop down menu drops down behind the flash banner. How do I make the drop down appear over the swf?

Thanks.

We've recently redesigned our company's website and went live with it. Unfortunately we've just noticed on the pages with Flash on them, the CSS drop-downs go behind the text, flash objects, etc.

Does anyone know how to fix this? You can see what is happening on these pages.

http://www.callan.co.uk/locate_school.php
http://www.callan.co.uk/callanschool_student_pgs/callan_english_lessons_video.php

You'll notice in the second link the far right drop-down menu doesn't go behind the right side navigation div. I think this is because it's the flash causing it and there is no Flash under that last drop-down menu.

Please look at this page

http://www.tmhdesign3.com

and this one

http://www.tmhdesign3.com/real-estate-broker.asp

The first one used a flash file, the second does not.

On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success...

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

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