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

Similar Messages

Flicker when using drop shadow with edge feather

I have encountered a new problem with FCP 5.1.2. When using edge feather and drop shadow together, I encounter a flicker around the edge of the feathered video image. This flicker goes away if I remove the drop shadow. I read in an earlier post that the 5.02 update solved this problem. However, I am using version 5.1.2 and the sugestion to reajust the percentage of the effect and then back to the original percentage, doesn't work. I have used the edge feather, drop shadow combo many times in earlier versions of FCP with no problem. Fixes anyone?
I posted this months ago with no reply so I'm trying again. Anyone with any thoughts? I really don't like having to resort to creating the drop shadow in Photoshop.

What I am trying to do is very simple. I want to soften the edges of an image and give it a drop shadow. This "image" could be a scaled and cropped DV source, or it could be a photoshop file. This is something I have done routinely in previous versions of FCP without any problem. This is very basic. I have opened earlier projects that were edited in those earlier versions of FCP, and what looked fine then, looks horrible now. If others are not having this problem, can I assume my software upgrade is defective in some way?
Please, if someone would perform the following and report back, I would greatly appreciate it.
1- import two DV video files into a new FCP project.
2- place DV file "A" on the V1 track
3- create a V2 track and place DV file "B" over DV file "A"
4- scale DV file "B" to 50% and apply a 100% Edge Feather to it.
5- now check the Drop Shadow box
This will look fine on your computer screen, but when viewing on an external monitor the edges of DV file "B" flicker in a terribly annoying way.
Something this simple and basic shouldn't be causing this much pain. Thanks in advance for your help.

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.

Marks around drop shadows

This has probably been asked before but when I create a drop shadow around an object in Adobe Indesign CS3 it looks fine in the program but when I export to PDF I get like a square of discoloured white surrounding the effect. I'm not sure if this would appear when printed but I assume it would.
Is there any way of getting rid of this? Or is this something to do with CMYK's lack of greys?
Thanks
Ricky55

Check this article:
http://indesignsecrets.com/eliminating-ydb-yucky-discolored-box-syndrome.php

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

Drop Shadow On Placed PDF Illustrator CS2 XPSP3

Hi,
Is it not possible to add a drop shadow to a placed PDF in Illustrator CS2? I'm not managing.
Thanks for any help,
Ariel

I don't have CS2, I have CS4. If you, or someone else, generate in CS4 a PDF in Illustrator and save as Illustrator PDF, then open a new AI file and Place the vector graphic(s) the drop shadows work on the artwork itself. If you generate a vector graphic in Photoshop and save the file as a Photoshop PDF then Place it in Illustrator, it will create a drop shadow around the bounding box of the canvas that you had in PS. I will now try to use a Photoshop PDF with an Alpha Channel and delete the background, save it as a Photoshop PDF and see if it will generate a drop shadow around the artwork, rather than the bounding box. Stay tuned . . .
-markerline

Any way to get rid of the drop shadow on Screen Captures in Leopard?

i do a fair bit of procedure documentation work, and so use screen captures quite a lot. Since upgrading to leopard the screen grab tool now puts a 77(ish) pixel white border and drop shadow around the screen captures, which might look trendy for some things, but for the stuff I am doing is just annoying, and something that I have to remove from all of my screen captures.
Is there any way to turn this "feature" off.

There's a Terminal tweak that I got from Mac OS X Hints here:
http://www.macosxhints.com/article.php?story=20080629181121863
You just copy-paste a line into Terminal.app and after a restart the cursed shadows are gone!
If you do a Command-Shift-4 then hit space for a window grab, then grab the Dock, then there's apparently a single funkiness with this fix, in that the resulting image in this specific case (of the Dock) is stretched horizontally. I haven't seen mention of any other side effects, and otherwise it's working fine on my system, but be aware of that.
The Dock shows up fine in any other type of grab, so since I never take a picture of just my doc using the grab window function, I'm more than pleased to use this and get useful window shots back again.
Hope this helps!
Pres
Message was edited by: Pres Nevins

Drop Shadow Question

I find in Dreamweaver's Manuel the instructions on how to put
a drop shadow
around words and text. Can Dreamweaver put a drop shadow
around a CSS layer
or box? Or does that effect need to be a graphics image?
Thank you!
Best Regards.
Webdesigner

Thank you, Nadia, for this answer. It brings up a another
question which I
just posted in answer to Webbie...
": Nadia : ** Adobe Community Expert **"
<[email protected]> wrote in message
news:f3ihra$8st$[email protected]..
> You can use css to create a shadow but it doesn't render
correctlyacross
> platforms/browsers I believe. You can google for those
words and I'm
> sure you'll come up with some examples.
>
> I would use a graphic image instead and use css to
repeat the shadow the
> length of the box.
>
> --
> Nadia
> Adobe® Community Expert : Dreamweaver
> ----------------------------------------
> CSS Templates |Tutorials |SEO Articles
>
http://www.DreamweaverResources.com
> ~ Customisation Service Available ~
>
http://www.csstemplates.com.au
> ----------------------------------------------------
> Spry Widget Examples
>
http://www.dreamweaverresources.com/spry-widgets/
> ----------------------------------------------------
>
>
>
> "Webdesigner" <[email protected]> wrote in message
> news:f3i7pn$r9o$[email protected]..
>>I find in Dreamweaver's Manuel the instructions on
how to put a drop
>>shadow around words and text. Can Dreamweaver put a
drop shadow around a
>>CSS layer or box? Or does that effect need to be a
graphics image?
>>
>> Thank you!
>>
>> Best Regards.
>> Webdesigner
>>
>
>

DROP SHADOW: Photoshop Elements

Does Adobe Photoshop Elements provide "drop shadow" for version 6, on Mac?
If so, how it is applied, please?

Hi Dave
It’s best to start with a white background so that your shadow will show up best.
1. From The editor menu click File >> New >> Blank File
2. Set any dimensions of your choice and select whit for background color and click OK
3. Click File >> Place and navigate to your photo; select it and click the place button
4. Hold down shift and drag the image coroners to get the size you need on the white background and click the green checkmark.
5. Make sure your placed layer is highlighted in the layers pallet (it’s usually the top layer)
6. Go to the effects pallet and choose the layer styles tab (second from left with a symbol of two overlapping documents)
7. From the dropdown menu choose drop shadow and then select one of the thumbnails and click the apply button
8 A fx symbol will be added to the layer - you can double click the fx symbol to make adjustments
9. Use the sliders to increase distance or position of your drop shadow - you can also change the lighting angle.
After adding text with the T tool - You can add a drop shadow around all the letters using the same method and also to an outer frame.

How do I include a drop shadow effect when I import an Illustrator vector into Edge Animate?

How do I include a drop shadow effect when I import an Illustrator vector into Edge Animate? It should be noted that I also have another effect (an extrude & bevel) applied which does copy over when I paste (or create an SVG and import) into Edge Animate. Any thoughts on why the drop shadow disappears but the extrude & bevel carries over?

Which version of Illustrator are you using?
In earlier versions of Illustrator it is not that easy to apply drop shadows with spot colours.
Another reason why it's always important to tell which version of AI … well …

Thin white line around black .ai logo and drop shadow question

Hello,
There's a very thin white line all around a black .ai logo I made when placed on a color background. It shows up in printing and acrobat (PDF % compatibility) too. Also, is there any way to get a transparent drop shadow (no white boxes) when saving as eps.
Thanks
Running OS10.4.11 In Design CS3, intel mac.

Is the logo rasterized in Illustrator? It sounds like something was antialiased against a white background.
>Also, is there any way to get a transparent drop shadow (no white boxes) when saving as eps
No. EPS does not support transparency. If an area is not fully transparent (because nothing is drawn there) then it is fully opaque. PDF and AI support transparency.

Lines around image with drop shadow

Hello,
I am currently using Illustrator CS 5.1 and am having an issue with my PDF files. I have a graphic that I am building and when I import an image, place a clipping mask around it and then add a drop shadow to it, everything works fine and looks exactly as I want it on screen. However, when I save the document as a pdf, a hazy white line appears around the edges of the image. However, the line is not on the clipping mask itself, instead it is on the square edges of the unmasked version of the image. So when I have 10 masked items on the page with drop shadows, I'm getting 10 faint white squares around each of the images which looks terrible. Has anyone else experienced this? Any recommendations/solutions?
Thanks in advance!
Wil

Also change your acrobat settings to show overprint preview always.
If this comes back in Illustrator PDFs, Print >> Advanced >> Slide tranparency flattener to raster >> done , then save.

Illustrator CS6 crashes using Effect Stylize Drop Shadow. There's a work-around

Illustrator CS6 crashes when using Effect > Stylize > Drop Shadow on a regular shape e.g. rectangle created by the Ractangle Tool.
I select the shape, apply the effect and it will crash giving this warning dialog: "The operation cannot complete of an unknown error: [CANT]". Then Illustrator CS6 crashes.
This is the crash report in Windows 7 32-bit:
Faulting application name: Illustrator.exe, version: 16.0.0.682, time stamp: 0x4f6e762b
Faulting module name: MMXCore.8BX_unloaded, version: 0.0.0.0, time stamp: 0x4f44e8d6
Exception code: 0xc0000005
The crash happens about 90% of the time.
Possible work-around:
Since I experienced some strange behaviour of CS6 applications before, I experimented witn running Illustrator as an administrator (elevated privileges). When I do that, I can apply the effect without Illustrator CS6 crashing. Here I go again..elevated privileges (see http://forums.adobe.com/message/4432510) .
I have to admit, this is one of the many strange behaviours in CS6 applications that make their performance and reliability very unpredictable.
Cheers,
Dave

Wade_Zimmerman wrote:
When will you users on the Window platform learn to repair your permissions the problem when installing any software is that the permissions may not be set properly and this may be caused by the way previously installed software has changed your system.
Because there's no need to do a "repair permissions" thing, that being a bizarre Apple concept. In Windows, the software installation neither "sets permissions properly" nor does previously installed software "change your system" (whatever that means). Windows installation packages run under a special account to copy files into their proper directories without having to "change system properties". It's all done automagically and managed by Windows, not by individual applications.
Wade_Zimmerman wrote:
KNow I know that with windows users it is a very unpopular premise that the permission might need to be repaired but they do from time to time and I believe unfortunately that on the Windows platform it is a manual procedure but there may be a utility that can do it for you.
Like I said, all of that makes no sense on Windows.
Wade_Zimmerman wrote:
Of course your settings folder could also be corrupt.
I did rename the Prefs, and AI did re-create it, and the SFW problem I described was resolved. Great!, I thought, until I closed AI and opened it again -- Boom! Same problem.
The problems I described happen because software developers (and the Q&A testing teams) have an arrogant attitude -- they think "I'm the King of my computer and, by God, I'm going to run my computer as the most powerful user I can be." So they do all their work under the elevated privileges of an administrator account, and are completely surprised and clueless when their software fails to run under a standard user account. (Always running one's computer under the reduced privileges of a standard user account, by the way, is the recognized Best Practice for safe computing; and in these times it is now unacceptable to require elevated privileges to run an application....)
Ken

Refine Edge / Drop Shadows

I'm using the Refine Edge tool to drop out backgrounds of scanned images. I scan against a black background to get the best separation with the item. It works great, but when I test it with a drop shadow, I often see this spackling when I increase the Spread feature in drop shadows. When I back off to a normal spread / opacity, they look fine.
Note I'm greately exaggerating the settings when I test, but as I sell my digital files, I need to make them as fool-proof as possible.
I've played with the refine edge settings to adjust the smoothing/contrast and contract edges. This helps, but I still get some of this effect. I am able to clean up the mask using the pencil tool where the drop shadow goes crazy.
Is this normal? Should I just advise clients to not exaggerate the drop shadow settings?
Is there anything further I need to know? I've researched the Refine Edge settings and I think I understand it pretty well.
Here's an exaggerated example:

lesnicole wrote:
It's only when I jack up the "spread" feature that I start seeing the stray pixels.
To me that says that the mask isn't perfect, but maybe off a level or two from being perfectly black.
I'll do some experimenting with this. I wonder if the Dither feature could affect it, and/or whether it could be related to color-management somehow....
-Noel

IWeb '08 gutted my website. Images are gone. No drop shadows. Ugly!

I updated to iWeb '08 after running the latest iWeb '08 software update. I am running a 24 in. Core2Duo iMac. After installing the update, I double-clicked on the Domain icon in my user/Library/Application Support/iWeb folder and waited while the program converted my website that had been created with iWeb '06 and published to my .Mac account. Everything looked fine in iWeb. I added a graphic to a page and pressed the Publish button. After a long delay while the entire site was uploaded, I was able to visit my site and discovered that dozens of graphic elements were no longer visible. If the item is a hyperlink, the link still works, phantom-like, if I click on the spot where the item should be.
Also, there are no longer any drop shadows. Reflections still appear, however.
I ran some tests, creating page items by importing, dragging, copying and pasting, and creating shapes from the shape menu. The image items appeared normally in iWeb, but did not show up at all after publishing to the site. Shape primitives did appear online. Transparency, reflection, rotation all worked normally on the shapes, but drop shadows did not. The shadows appeared in the iWeb window, but disappeared when the page was published.
Please visit what's left of my site at www.peterweisz.com and see the damage for yourself. Fortunately, I have a back-up copy of my old iWeb 06 Domain file. Short of de-installing iWeb 08 and reinstalling iWeb 06, what can I do to remedy this problem? Evedently iWeb '08 is broken bigtime.
Thank you for your help.

Can only endorse that. My observations with one of my iWeb sites:
Safari 3.0.4 (and previous betas): color management (?) - take a look at this site: http://shivaduo.jan-groh.de - Text and image frames were created with exactly the same web safe color (990033), but they differ a lot.
Firefox 2..., IE 6, Camino 1.5, Shiira: no shadows, (some) no reflections, (all) horizontally broken lines in reflections of frames, (Windows browsers) fonts (Trebuchet MS) get changed (worked perfectly before with iWeb 1... on exactly the same computer).
Is there any remedy to this aestheical disaster (iWeb 2 was the main reason for me to switch to iLife '08)?
I've already three bug reports to apple. They've made crap out of a fine little app...
Rosember

Drop Shadow Around Edge of Website

Similar Messages

Maybe you are looking for