Shadow around a div

Is it possible to put a shadow around a div? or around the border of a div? an image won't work (i don't think) because I want it to be scalable for different screen sizes and the div width is 80%....

Do it with your CSS. For example, add:
/*background-color: rgb(255,255,255); Needed for IEs */
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
/*filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30) ";
zoom: 1;*/
to the class or id style you've established for the div in question. Adjust widths and rgba settings to fit your design.
Chris

Similar Messages

Drop shadow around wrapper div

I have done this successfully in past and can't figure out why it's not working now.
I just want a soft shadow around wrapper to make it stand out.
I'm using:
-webkit-box-shadow: 1px 1px 12px 12px rgba(0,0,0,0.3);
On line 25
The site is:
http://timsframes.com
Thank you for any help!
FM

These are your styles:
<style type="text/css">
body {
text-align: center;
margin-top: 25px;
background-color: #FFF;
background-repeat: repeat;
background-image: url(images/browserbg2.jpg);
html.body {
margin: 0px;
padding: 0px;
#wrapper {
width: 988px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
color: rgba(0,0,0,1);
background-color: rgba(0,0,0,1);
.header {
float: left;
height: 345px;
width: 988px;
background-image: url(images/IMG_3030.png);
background-repeat: no-repeat;
.headlinetype {
font-family: "TeX Gyre Adventor";
font-size: 36px;
float: left;
height: 200px;
width: 588px;
color: #FFF;
padding-left: 400px;
padding-top: 150px;
.belowheaderband {
float: left;
height: 20px;
width: 988px;
background-image: url(images/woodtexture.png);
background-repeat: repeat-x;
border-top-width: thin;
border-top-style: solid;
border-top-color: #DDC79C;
#mainNav {
background-color: #627F41;
height: 45px;
width: 898px;
float: left;
margin: 0px;
padding-left: 90px;
#footer {
width: 988px;
clear: both;
float: left;
#main_visual_banner_box {
height: 550px;
width: 588px;
float: left;
background-image: url(images/sandbg.png);
background-repeat: repeat;
background-color: #FFF;
padding-right: 25px;
padding-left: 25px;
line-height: 35px;
padding-top: 40px;
.overviewpictures {
float: left;
height: 565px;
width: 315px;
padding-top: 25px;
padding-left: 35px;
color: #627F41;
background-image: url(images/woodgrainbg.png);
.title-box1 {
float: left;
height: 125px;
width: 300px;
margin-bottom: 30px;
color: #000;
.titlebox2 {
color: #000;
float: left;
height: 145px;
width: 300px;
margin-bottom: 25px;
.title3 {
color: #000;
float: left;
height: 125px;
width: 300px;
.product-box1 {
background-color: #000;
float: left;
height: 110px;
width: 300px;
.product-box2 {
background-color: #333;
float: left;
height: 120px;
width: 279px;
margin-bottom: 50px;
padding-right: 10px;
padding-left: 10px;
.productbox3 {
background-color: #333;
float: left;
height: 100px;
width: 300px;
h1 {
font-size: small;
h2 {
font-size: xx-small;
body,td,th {
font-family: "TeX Gyre Adventor";
#apDiv1 {
position:absolute;
width:316px;
height:300px;
z-index:25;
top: 40px;
margin-left: 60px;
background-image: url(images/tim.png);
background-repeat: no-repeat;
#apDiv2logo {
position:absolute;
width:200px;
height:115px;
z-index:50;
.left-infobox {
background-color: #627F41;
float: left;
height: 200px;
width: 200px;
padding-left: 25px;
color: #FFF;
padding-top: 25px;
text-align: left;
.middle-box {
background-color: #627F41;
float: left;
height: 200px;
width: 120px;
color: #FFF;
padding-left: 20px;
border-left-width: medium;
border-left-style: dotted;
border-left-color: #92744F;
padding-top: 25px;
text-align: left;
.addressbox-bottom {
background-color: #627F41;
float: left;
height: 200px;
width: 618px;
color: #FFF;
padding-top: 25px;
text-align: left;
.logobox {
float: left;
height: 200px;
width: 300px;
.address-box {
float: left;
height: 200px;
width: 240px;
.belowfooterdecorbar {
float: left;
height: 40px;
width: 988px;
background-image: url(images/woodtexture.png);
background-repeat: repeat-x;
</style>
you also need to validate your page for HTML unbalanced DIVs and Ps.

Print Module: Faint shadow around printed image (Mac OS, Canon 9500)

I am seeing a faint shadow around my prints. On 8.5x11 prints it extends above and below the image as though it's completing the parts of the cell that don't contain the image. On 13x19 prints it extends above and below the image in thin strips, but not all the way to the cell size. This is for 3:2 aspect ratio images.
It looks like Lightroom is trying to print white within the parts of the cell not containing the image, but that white is being translated into near white before being printed, perhaps because of a bad color management setting. But I don't understand why Lightroom is doing this at all, rather than just not printing anything where there is no image. The colors in the image itself look accurate, at least to my eyes.
I got this printer about a year ago, and I wasn't seeing this at first. I just noticed this recently, but I went and looked at some older prints and some of them have it and some don't, so sadly I am not certain when it started or what changed when it did.
I am using Lightroom 2.5 on Mac OS X 10.6.2 using the printer drivers that came with Snow Leopard. The printer is a Canon PIXMA Pro9500 using standard LUCIA ink. The paper is Ilford Galerie Golf Fibre Silk, and I'm using Ilford's ICC profile for this paper and printer.
As for color management, in the Print Module I have the profile set to the Ilford profile, and I have the rendering intent set to perceptual, although this happens with relative as well.
In the printer driver, when I click "Print Settings…" in the Print Module, color matching is set to ColorSync. The only other choice is Canon Color Matching, but that's grayed out.
Is anyone else seeing this and can it be fixed?
I am frustrated that Lightroom is printing where there is no image. It's very obvious when I print a square image so there is a great deal of empty space on either side of the image. I can see the print head going back and forth for a couple of inches where there is no image. I don't understand why Lightroom can just make the printer advance the paper to where the actual image starts.
I'm not looking for a workaround. I know I could just live with it or just mat the print such that the faint shadow can't be seen. I'd rather actually understand what Lightroom or my printer is doing.
Thanks!

I played around with it and it's definitely Lightroom. The faint color is being laid down inside the area defined by Cell Size where there is no image.
For example, I have a 3:2 aspect ratio image. I am using US Letter size paper. I have 1-inch margins left and right, and 1.38-inch margins top and bottom. That translates into a Cell Size of 8.24 by 6.5 inches. To fit into the cell, my image size is 8.244 by 5.496 inches. So my image is the same height as the cell, but it's about 1 inch shorter in width, so I get a pair of 1/2-inch wide faint color bars on either side of the image.
If I change Cell Size so that it is the same width but longer height than my image, then I get faint bars above and below the image, rather than on either side. As long as the Cell Size is not equal to the image size, then I'll get the faint bars anywhere in the cell where there is no image.
If I manually type in the the Cell Size to exactly match the image size, then I get no bars.
This means to me that Lightroom is "printing" white everywhere inside the cell where there is no image, and for some reason that white is being rendered as something other than white on the paper. I don't understand why, nor do I understand why Lightroom needs to print anything at all where there is no image.
But at least for now I have a workaround, although I'd rather fix the problem.

"Shadow" around Canvas in PS CS5 and how to remove it?

Hi everybody,
forgive me if this was answered before, I did a search but did not find anything relevant ...
I upgraded to PS CS5 recently and there seems to be a new "Feature" of a sort of shadow around every page/canvas.
Maybe the correct term would be "Page Shadow" ... ?
Imagine a plain white document of, say, 500 by 500 pixels.
When I resize its (non-tabbed) window to make it bigger than the document itself, I don't get a sharp border between the white document and the grey window-background as it used to be.
Instead there is this "Page Shadow" around it, which I find very annoying and it wasn't there before in CS4 or any other version I remember.
I looked everywhere, but I can't find any option to remove this shadow.
I really want to get rid of it though, any tips on what I may be missing ??
Thanks
Duuude
P.S.: I hope what I wrote makes any sense, English is not my first language ...

Hi Zeno,
Thank you for letting us know this. I turned it off. Its really annoying when working on images
as it give it a fuzzy edge look that bugs my eye.
CHEERS...Mathew
Date: Wed, 19 May 2010 02:31:00 -0600
From: [email protected]
To: [email protected]
Subject: Re: "Shadow" around Canvas in PS CS5 and how to remove it?
Just an FYI, the drop shadow around the image was first introduced in CS4 but it needs OpenGL Drawing enabled from Edit->Preferences->Performance to work.
>

Xcompgr + urxvt with true transparency no shadows around the window

hello!
i have a big problem. i want a terminal with real transparency. making a other terminal transparent with transset is bad, because it makes the whole window transparent, also the borders!
so i decided to try urxvt. i start urxvt with the following command:
urxvt -fn "xft:Monospace:pixelsize=11" +sb -depth 32 -fg white -bg rgba:2000/2000/2000/dddd
it works, the terminal has real transparency, but it has no shadows around the window/terminal. when i start urxvt with a depth of 24, there are shadows but no transparency!
i'm running e17 with xcompmgr and the following settings:
xcompmgr -c -f -r4 -t-3 -l-3 -D5 -o 0.7 -d :0.0&
is there someone who can help me? i hope it!
mfg iggy
Last edited by iggy (2007-12-04 11:45:42)

Actually I do and I have no shadows either - but I wasn't even aware of this issue until you pointed it out.
But I like it without shadow, using OpenBox here.

Shadows around icons/thumbnail images

I notice that iTunes U forces a small shadow around all the 60x60 thumbnail images.
Is there a way to turn that off, somehow? If not, can I put in a feature request to have an option to remove those shadows?
I don't like the way they look, and would like to remove them if possible.
Thanks any help.

I'm not sure that shadows can be turned off ... they seem to be a feature of the iTunes Store generally speaking. Still, you can't win if you don't play ... 'er ask Apple if it's possible.
MacBook Pro Mac OS X (10.4.8) I lied. I'm running Leopard

Unwanted white border around a div

I placed a div that I am using for a background. Before I add an image I am testing it out by giving it a blue background. I have the width and height set to 100% and left to 0px and top to 0px. When I test it in a browser (IE 8) or view it in Design view it has a white border around it. There is no border setting or margin setting. Is there some preference setting in Dreamweaver that makes this aproximately 10px border? If so how do I get rid of it?

Thank you both - that helped to clear up some of the issues but others remain. I'm assuming I can keep the dialogue going but will start a new thread if that is required.
I uploaded the page and css files to my server. The page file is http://www.wlvs.com/untitled-1.html and the css file is http://www.wlvs.com/test.css I ame using these file to try out styles. The background div (backgnd) will ultimately be an image but for now I'm just using a color. The "wraper" has an image that I gave a padding to at the top and bottom and for some reason it is showing a dark blue color. - I thought it would allow the background color to show through - shouldn't it??
The other issue is centering the logo in the "header". I suppose I could use <center> but I am trying to figure out what is the css code for doing it. Nothing seems to work. I was able to center the "wraper" image but could not do the logo.
Any help would be much appreciated...

How do I get rid of black shadows around layered sparkles in file imported from Illustrator CC to After Effects CC?

I have a background with a logo that will have various stars or sparkles around the logo. I eventually want the sparkles to flicker on and off around the logo in my Premiere Pro video.
I created my layered logo/sparkle artwork in Illustrator CC. Each sparkle is on a separate layer. The sparkles came from clip art. In Illustrator CC the sparkles are white or yellow. In After Effects CC they have a black background around each sparkle, almost like a drop shadow.
I want to get rid of the drop shadow/black background.
Any suggestions?

Check the problematic layers in the comp by soloing them and then press the u key twice to reveal everything that is not set to the defaults. Make sure there are no layer styles or other effects checked. If all is normal but the art still looks odd open up the footage interpretation, Click the More Options button at the bottom left. and set the anti aliasing for vector art to More Accurate. You can do similar in Preferences>Previews and set Zoom Quality to More Accurate.
Here's another tip for using Illustrator files for video. Any stroked artwork must have a minimum stroke of 1 point or 1 pixel. 2 is better. Fine details in your artwork should be drawn with the snap to pixel option enabled in Illustrator and artwork should be an even number of pixels (points) high and wide.
If none of that works, save out just some of the problematic layers in you AI file and send us a link so we can check out the file or post a screenshot of the problem viewed at a zoom factor of 100% with resolution set to Auto or Full and the properties of your layer with problems revealed.

Border around container div

I have a veeerrrrrryyyy rough design going so please bear
with that... (i know it needs lots of graphic tweaking)
I am trying to put a thin dotted border #6600FF around the
container div and can't seem to make it work. Any ideas? (DW8)
http://www.nsbcustomjewelry.com/DIVTEST.shtml
Thanks!

#container {
border:2px dotted #60F;
}

Drop Shadow Around Edge of Website

I am trying to make a drop shadow all around the edge of a site in Dreamweaver CS4. I know I need to make a container around the wrapper and place it as a background image and repeat y. I know how to make the graphic in PS. What I can't figure out is how to make it look like it flows into the body background color. If the body has a sold background color it's not a problem, but what if the body backround is a gradient? If there is a gradient it doesn't look correct because I can't pic a color for my layer under the shadow in photoshop.
Also how do I get the background to show at the very bottom of the page.
Please help I have been trying to figure this out for hours

Also how do I get the background to show at the very bottom of the page.
If you are talking about a gradient, there are two ways to give that appearance.
1. Make the gradeint image longer that the page, for example create the gradient a size like 5px x 2500px. You will run into issues on differnet height pages.
or
2. And I thin a better suggestion. Create your gradient, then have it blend into the the background color. So for example if your gradient goes from black to light gray, make the background color the last light gray of your image...then it blends. On extra long pages you lose the gradient.
Gary

Shadows around shapes

Hi hoping someone can help...
I have used rounded edged square shapes in iWeb. In the program this looks fine; but when published these shapes look like they sit in a white box with square edges and the shadow follows this white box rather than the shape itself.
How can I remove this white box and have the shadow follow the shape?
Thanks in anticipation,
Kirstie

Welcome to the Apple Discussions. Are you seeing this issue in Safari or another browser? What's the URL of your site so we can examine it first hand?
You can get around the problem by following the method described in this tutorial to convert the shape and it's shadow to a single jpeg file: #7 - Converting Photos w/Frames, Drop Shadows and/or Reflections into a Single JPG Image.
Happy Holidays

Terminal (xfce4): no composite shadow around it! :(

hello!
i have enabled composite shadows but there are not around my terminal.
can it be, that i have to enable it manually for all xfce components?
more information about my configs:
http://bbs.archlinux.org/viewtopic.php?id=33848
plz help, thx
Last edited by iggy (2007-06-06 14:30:41)

The setting for shadows is a global setting as far as various applications go, so you do not have to enable it per-application. Anyway, it is only Terminal that is not being shadowed, right? If that is the case, there might be something somewhere explicitly disabling it, which is the most likely cause. Perhaps you could try creating a new user account, or signing into xfce4 as root then seeing if it works there? If not, then it might be something a bit more confusing.

How to get rid of white border around Container Div (main box)?

I have look and look for a solution but couldn't find one. I'm developing a website but the main issue is the white (I changed it black so you can see what I'm talking about) border around the website when i go to preview it from DW to Google Chrome or Internet Explorer.
I've tried everything! from setting body margins all to zero but nothing works... can anyone help me?!

No that's not what I'm talking about, the black div bot on the top is what i put, I put the entire style.css code in my last post, I'm talking about the white border on the right inside the scroll bar.
let me explain from the bottom, let say I don't put Margin: 0 under Body in my style.css . I get a white (I made it Green to show you better) border around my entire webpage looking like this:
so this made me curios because I wanted to know why it gave me this border without putting Margin: 0 under Body in my Style.css sheet. so i went to inspect element inside Google Chrome and saw this:
I was shocked because it automatically added 8 px in Margin around the body. So I took all the advice i was given in this thread and put the Margin: 0 ; under Body in my Style.css Sheet and it did this:
for Some reason it says Margin 0 in the inspect element under body but put a default white border there to the right....
I have explained this the best way possible. PLEASE CAN ANYONE HELP ME?!
ps. its doing this for all browsers so i know it not a chrome issue!

Soft shadows around photos on a particular website appear as heavy black frames in Firefox 5.0 although they look like proper shadows in Firefox 4.0 and in other browsers. How can I get the shadows to display correctly??

The shadow effect on two sides of the photos on this site looked fine in Firefox 4.0. When I upgraded to 5.0, the heavy black "frames" appeared in place of the shadows. No change had been made to the website between the time I looked at it in 4.0 and 5.0 (I know because I know the builder of the site). Indeed, it was only about an hour between my two viewings. So I figure the odd appearance has to have something to do with 5.0. But what? Is this fixable? Or do I need to wait for 5.1?

That is either a bug in Firefox 5 or the script has a problem with Firefox 5.<br />
It works in all other Firefox versions like Firefox 3 and 4 and 6 (Aurora) and 7 (Nightly).

Unwanted shadow around menu bar.

I'm sure this is an easy fix, but I can't get rid of the stroke or back shadow that is on my content menu. I attached a screen shot. Anyone know what I'm missing here? And can I just say, I HATE the change Muse made in asking questions! It took me 10 minutes to figure out how to even ask this question!

Depends on where the stroke is applied. You can set a stroke & fill on the menu bar itself, or each menu item, or the text frame inside the menu item. Here's an example menu bar with a different stroke/fill on each of those things:
The first click on the menu bar selects the menu bar, then you can change the fill stroke for the bar itself(brown & red in my example).
If you click again, you should get a menu item selected, and you can change that stroke/fill(yellow & green in my example).
If you click again on the text, you should get the text frame selected and you can change that stroke/fill(orange & blue-grey in my example).
Hope that helps.

Shadow around a div

Similar Messages

Maybe you are looking for