Drop shadow borders

Rank newbie question here:
I'm trying to copy a popular web site look that has a subtle
drop-shadow effect along the left and right edges of centered web
site content. It looks as if a page of paper is centered in the
browser and the edges of the paper are casting a slight shadow.
I've done this with a background graphic that spreads across
the full width of a table, but this seems kind of clunky and I
suspect there's a much more elegant solution. Any
suggestions?

Something like this:
http://www.dreamweaverresources.com/tutorials/pagebackgrounds/examplevert.htm
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
"BezierBoy" <[email protected]> wrote in
message
news:fi3681$l3o$[email protected]..
> Rank newbie question here:
>
> I'm trying to copy a popular web site look that has a
subtle drop-shadow
> effect along the left and right edges of centered web
site content. It
> looks
> as if a page of paper is centered in the browser and the
edges of the
> paper are
> casting a slight shadow.
>
> I've done this with a background graphic that spreads
across the full
> width of
> a table, but this seems kind of clunky and I suspect
there's a much more
> elegant solution. Any suggestions?
>

Similar Messages

Drop shadows not working in firefox

Just designed and posted a splash page. In safari it looks great but in firefox the drop shadows don't load. Any ideas? My luck my client will be on firefox LOL.
http://www.lombardikitchenandbaths.com

That's a well know problem with FF and iWeb. Adding drop shadows, borders and frames to objets on a web page can add a lot to the "weight" of the page and result is slow loading of the page.
Tried to view your page and got a "The server does not respond at all." response.
OT

Drop Shadow On JInternalFrame

I am trying to adapt Romain Guy's DropShadowPanel to make a drop shadow on a JInternalFrame. It seems as the shadow is drawn outside the clip of the frame I have to somehow increase the clip size to see the shadow. It's nearly working but the shadow isn't working when the frame is moved.
I also tried putting an empty border around the frame and, curiously, that worked in Metal LaF but not Windows which is what I need.
Can anyone help?
Note that this class uses Swing labs shadow renderer and GraphicsUtils.
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.LayoutManager;
import java.awt.image.BufferedImage;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;
import javax.swing.JInternalFrame;
import org.jdesktop.swingx.graphics.ShadowRenderer;
import org.jdesktop.swingx.graphics.GraphicsUtilities;
public class DropShadowInternalFrame extends JInternalFrame implements PropertyChangeListener {
    // angle and distance of the shadow from the original subjects
    private float angle = 45.0f;
    private int distance = 20;
    // cached values for fast painting
    private int distance_x = 0;
    private int distance_y = 0;
    // when shadow member is equaled to null, the factory is asked to
    // re-generated it
    private BufferedImage shadow = null;
    private ShadowRenderer factory = null;
    public DropShadowInternalFrame(String title, boolean resizable, boolean closable,
            boolean maximizable, boolean iconifiable) {
         super(title, resizable, closable, maximizable, iconifiable);
        setShadowFactory(factory);
        computeShadowPosition();
        this.setOpaque(true);
    public ShadowRenderer getShadowFactory() {
        return factory;
    public void setShadowFactory(ShadowRenderer factory) {
        if (factory == null) {
            factory = new ShadowRenderer();
        if (factory != this.factory){
            if (this.factory != null) {
                this.factory.removePropertyChangeListener(this);
            this.factory = factory;
            this.factory.addPropertyChangeListener(this);
            shadow = null;
            repaint();
    public float getAngle() {
        return angle;
    public void setAngle(final float angle) {
        this.angle = angle;
        computeShadowPosition();
        repaint();
    public int getDistance() {
        return distance;
    public void setDistance(final int distance) {
        this.distance = distance;
        computeShadowPosition();
        repaint();
    private void computeShadowPosition() {
        double angleRadians = Math.toRadians(angle);
        distance_x = (int) (Math.cos(angleRadians) * distance) - factory.getSize() ;
        distance_y = (int) (Math.sin(angleRadians) * distance) - factory.getSize();
    @Override
    public boolean isOpaque() {
        return false;
    @Override
    public void doLayout() {
        super.doLayout();
        shadow = null;
    @Override
    public void paint(Graphics g) {
         Graphics g3 = g.create();
            BufferedImage buffer =
                    GraphicsUtilities.createCompatibleTranslucentImage(getWidth(),
                                                                       getHeight());
            Graphics2D g2 = buffer.createGraphics();
            super.paint(g2);
            shadow = factory.createShadow(buffer);
            g2.dispose();
            g.setClip(g3.getClip().getBounds().x,
                      g3.getClip().getBounds().y,
                      g3.getClip().getBounds().width + 20,
                      g3.getClip().getBounds().height + 20);
            g.drawImage(shadow, distance_x, distance_y, shadow.getWidth(), shadow.getHeight(), null);
            g.drawImage(buffer, 0, 0, null);
            System.out.println("distance_x = " + distance_x + "; distance_y = " + distance_y);
     g.setClip(g3. getClip());
    public void propertyChange(PropertyChangeEvent evt) {
        shadow = null;
        computeShadowPosition();
        repaint();
}

Modifying the clip to draw outside of the frame bounds is not a good idea. Swing expects components to paint only within their bounds. So when you move the frame from position A to position B, swing takes care that the old frame bounds are repainted by the underlying component (desktop pane). The stuff you painted outside of the frame bounds will not be cleared. Maybe you will have some success if you ask the desktop pane to repaint after every resize/move of the internal frame.
The approach with the empty border seemed more promising and I gave it a try. First thing I found is that some InternalFrameUI's install their own border on the frame. See the updateUI() method below to see how I tried to work around that problem. This works for Metal, Motif and Windows L&F (only when using the windows classic theme).
Second thing I found is that when using the windows XP theme, the BasicInternalFrameUI.Handler.layoutContainer() method sets the bounds of the internal frame's "north pane" to the whole width of the frame (ignoring any borders). If you really only need this to work in one specific L&F, I imagine it would be possible to subclass the WindowsInternalFrameUI, override the createNorthPane() method to return a subclass of WindowsInternalFrameTitlePane which in turn override the setBounds() method, reducing the width by the amount needed for the shadow.
The code contains the empty border approach (not working for windows L&F with XP theme enabled). I was not able to test any linux or mac L&Fs.
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import javax.swing.JDesktopPane;
import javax.swing.JFrame;
import javax.swing.JInternalFrame;
import javax.swing.UIManager;
import javax.swing.border.CompoundBorder;
import javax.swing.border.EmptyBorder;
import org.jdesktop.swingx.graphics.GraphicsUtilities;
import org.jdesktop.swingx.graphics.ShadowRenderer;
public class DropShadowInternalFrame extends JInternalFrame {
    private static final int SHADOW_WIDTH = 4;
    private ShadowRenderer shadowRenderer = new ShadowRenderer(SHADOW_WIDTH, 0.5f, Color.BLACK);
    private BufferedImage shadow = null;
    public DropShadowInternalFrame() {
        super("Internal Frame", true, true, true, true);
        // BasicInternalFrameUI.Handler.layoutContainer() uses this property:
        // UIManager.put("InternalFrame.layoutTitlePaneAtOrigin", false);
    public static void main(String[] args) throws Exception {
        UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");
        // UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
        // UIManager.setLookAndFeel("com.sun.java.swing.plaf.motif.MotifLookAndFeel");
        DropShadowInternalFrame dropShadowInternalFrame = new DropShadowInternalFrame();
        dropShadowInternalFrame.setOpaque(false);
        dropShadowInternalFrame.setBounds(20, 20, 300, 300);
        dropShadowInternalFrame.setVisible(true);
        JDesktopPane desktopPane = new JDesktopPane();
        desktopPane.add(dropShadowInternalFrame);
        desktopPane.setDragMode(JDesktopPane.OUTLINE_DRAG_MODE);
        JFrame frame = new JFrame("DropShadowInternalFrame");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setContentPane(desktopPane);
        frame.setSize(500, 500);
        frame.setVisible(true);
    @Override
    public void paint(Graphics g) {
        Graphics2D g2 = (Graphics2D) g.create();
        int w = getWidth();
        int h = getHeight();
        if (shadow == null || shadow.getWidth() != w || shadow.getHeight() != h) {
            // recreate shadow if frame size changed
            BufferedImage frameImg = GraphicsUtilities.createCompatibleTranslucentImage(
                    w - 2 * SHADOW_WIDTH, h - 2 * SHADOW_WIDTH);
            super.paint(frameImg.createGraphics());
            shadow = shadowRenderer.createShadow(frameImg);
        g2.drawImage(shadow, 0, 0, null);
        // Motif ALMOST honors the empty internal frame border
        // comment this line out to see interesting artifacts in Motif LaF
        g2.setClip(0, 0, w - 2 * SHADOW_WIDTH, h - 2 * SHADOW_WIDTH);
        super.paint(g2);
        g2.dispose();
    public void updateUI() {
        super.updateUI();
        // wrap the border of the UI delegate inside our empty border
        setBorder(new CompoundBorder(new EmptyBorder(0, 0, 2 * SHADOW_WIDTH, 2 * SHADOW_WIDTH), getBorder()));
}

How to eliminate a gradient drop shadow from a film border file

I have a Hasselblad-style square film border file that I got in an after-market PS action. It looks pretty convincing, except that it has a gradient extending a little ways into the frame that makes it look like a frame sitting above the image with a drop shadow. There are two layers in the file, so I think there may be a wat to get rid of the unwanted gradient. But I can't seem to figure out what it might be.
I sure with I could post the file here, but whatever I try to do to make files permissable to post on this forum never seems to work. The original PSD is only 2.6 MB. I tried sizing it down to 450p x 450p to no avail. The error message said "this type of content is not allowed." It is only an empty black film border.
Anyway, if someone is willing to look at the file offline, please let me know. I am not a graphics person, just a photographer. I would love to get rid of the gradient on this file. Thanks in advance.
Alternatively, if anyone knows a source for clean, realistic black film borders in digital file format, please let me know.

Maybe just posting a screenshot showing the border and layers panel will suffice.
Use the png or jpeg format for the screenshot.

HP Photo Creations v3.7's Cards: How to remove the dropped shadow boxes for photos?

Hello.
In Cards' mode when adding photos, I get shadow drop boxes. How do I remove these shadow drop boxes around my photos?
Thank you in advance.

Hi Antdude.
There are several ways to remove the default "drop shadow" from a photo on your layout. The quickest is:
Select the Design Tools
Select the Photo Borders Tab
Select the photo
Click the first border preset (see screenshot below)
That preset applies the plain border style to the photo, removing any other border treatments as well. To remove just the shadow, open the Advanced Controls at the very bottom of the page, scroll down, and then click the No Shadow button.
These techniques work on graphics too.
Hope this helps,
RocketLife
RocketLife, developer of HP Photo Creations
» Visit the HP Photo Creations Facebook page — news, tips, and inspiration
» See the HP Photo Creations video tours — cool tips in under 2 minutes
» Contact Customer Support — get answers from the experts

Drop Shadows not showing up with iweb 2.04 in firefox please help!

Drop Shadows on my frame are not showing up with iweb 2.04 and firefox please help!
They show up with safari but not firefox. I've read that publishing to mobile me solves it but I publish to my hard drive and ftp to my host (not mobile me).
Thanks for any help

Drop shadows, borders etc are a bad idea in that they increase the file size and the download time of your page.
Create your image, drop shadow etc on your iWeb page, take a screenshot, crop it and replace the original image with the, much reduced, JPEG>
Example....
http://roddymckay.com/PhotoStuff/PhotoFile.html

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 …

Drop Shadows in Print Module

Hello!
Maybe this is not a feature but should be. I have a grid of 3x3 photos on a 13x19 page. I would like to add a simple soft drop shadow to set the pics off the page a bit. Is that feature there and I can't see it?
If not please add this feature. It's sill being ready to print but have to export a JPG to PS to add a drop shadow.
Also a nice drop shadow to the Identity plate text would be nice. A work around was dropping a tiff from PS of the text with the drop shadow into the Identity plate box. But that is extra work.
Thanks
Max

If you use a transparent image the shadow is around the bounded box, a square or a rectangle. You need to put the shadow in your graphic and save for web.
If you use a shape in AE it will go around the shape. Shapes are limited in Edge.

How to get drop shadow text in windows version of LabVIEW 2009

In the lower left corner of the attached JPG you can see that "Instrument Cluster" has a drop shadow. I created it by accident and would like to use drop-shadow for control names, but I cannot figure out how I did it. The only "Style" options in my Text Properties drop-down menu are Plain, Bold, Italic, Underline, Outline and Strikeout.
The Help file implies that it can be done in MAC OS. I just did it in Windows.
Does anyone know how?
Solved!
Go to Solution.
Attachments:
Instrument cluster.JPG ‏21 KB

Drats! An artifact.
I guess it is floating because I typed it on a boundary?
Thanks for the tip. As Nick Danger would say, "You saved me a lot of investigative work, flatfoot."

Muse: Issue: Text Effects options (Drop Shadow, etc) are always disabled.

Hello,
I am a new Muse user and I have been using the Learn Tutorials here on helpx.adobe.com to teach myself Muse.
I have a strange problem. When following through the "Apply Effects to Text" tutorial at: Adding effects to text | Adobe Muse CC tutorials, the options to add a drop shadow are not enabled. On advice from folks on Twitter, I tried the same using System Fonts, Web Fonts and Web Safe fonts. None of them seem to work.
I am attaching a video capture of the issue.
Please help :-(
Adobe Muse CC version 2014.1.0.375 CL 785695 (PC)
Message was edited by: Sujay Sarma
Change: Added Muse Version info

That's worse. If I set Stroke to 1 (you can only do that on the Text Frame and not the text itself), then the Text Effects do get enabled. BUT, the effect is applied to the entire text frame instead of just the text. See this:
I want the drop shadow for the text not the frame (like how Photoshop does it).

How do I add a drop shadow to the page in Muse?

How can I apply a drop shadow to the page template in Muse? If I place a rectangle it will not change shape according to the page size. Is this a feature?

Hello,
You're most possibly referring to "Favicons", and they can be added in a Muse site from the "File -> Site Properties -> Layout" section. Check this screenshot: http://jingsite.businesscatalyst.com/jing/2013-09-05_2332.png
Hope this helps.
Cheers
Parikshit

Is there a way to create a preset for drop shadows?

I'm setting up a template for a new brochure that will need drop shadows on every product that is being placed. Is there a way to save a preset for a drop shadow so I need not have to recreate the shadow every time? Also this is being distributed to many people to work on and effects presets would be hugely beneficial-just not sure if that is possible? Although it is Indesign, and they are usually on the up and up for this kind of thing.
Thanks!
FF

The Eyedropper Tool is a quick way of applying the same drop shadow to many objects
But as peter says object styles is a much simplier way.

Trying to do .CSS drop shadows

Hi,
I'm trying to get a similar look and feel as this website
Livingsteel.org but can't
seem to crack the drop shadow for the main table/container. It's
the one down that covers the bottom and right side and makes the
site look very tidy.
I'm trying to do everything in .css from now on and any help
with this would be great.
Thanks in advance,
JW.

Well you can certainly do it with a table (and format the
table with CSS).
However to do it with divs, I would have a top div with the
top bar (and
the right corner of the shadow), a main div with the shadow
on the right
in the bakcground, and a bottom bar with the shadow and a bit
of the
bottom white.
Like this:
Course you can simply use divs to create the dropshadows as
you would do
it in a table.
You would more or less have a topleft corner div, a middle
top div, a
topright corner div etc.
The more light way of doing this would be to see if you can
accomplish
the first suggestion by using existing elements (for example
having the
background of the footer and header contain the background
and shadows).
There are a bunch of sites around that explore rounded
corners and
dropshadows with css and divs.
Misha
jamestom77 wrote:
> Hi,
> I'm trying to get a similar look and feel as this
website
>
http://www.livingsteel.org/
but can't seem to crack the drop shadow for the
> main table/container. It's the one down that covers the
bottom and right side
> and makes the site look very tidy.
>
> I'm trying to do everything in .css from now on and any
help with this would
> be great.
>
> Thanks in advance,
> JW.
>

The drop shadow or even the type does not show up on the PDF created from SC3

I've created the legends on charts and the text on path and drop shadows are applied.
when I make a PDF, some text get dropped all together as well as the drop shadows do not show up.
Can someone help to solve this?
The only way is make a jpg. files and then create a separate PDF off the Acrobat.
It works but I would like to save the steps.
Thanks!

Hello markshepherd1,
Thanks for using Apple Support Communities.
According to the following article, when you're going through the process of burning a playlist to a disc, you have the option to select "Include CD Text".
If you’re creating an audio CD, choose your options:
Change the recording speed:
Choose an option from the Preferred Speed pop-up menu.
When you burn an audio CD, iTunes automatically uses the best recording speed for the CD. However, if your blank CD is rated for a slower speed than the maximum speed of your drive, or if you experience problems creating CDs, you may want to change the recording speed to match the CD’s rating.
Change the amount of silence between songs:
Choose an option from the Gap Between Songs pop-up menu.
Have all the songs on the disc play at the same volume:
Select Use Sound Check.
Include information that disc players in some vehicles can display:
Select Include CD Text.
iTunes 11 for Mac: Create your own CDs and DVDs
http://support.apple.com/kb/PH12148
Take care,
Alex H.

Pages, printing: still problem with drop shadows . Frustrated. :

Hi -
I've spent most of the afternoon trying to get my Pages document to print properly.
I am experiencing the drop-shadow issue :heavy black clump instead of artfully placed& delicate. Printouts do not resemble what is onscreen or in preview etc.
Having read through the forums; the links; the (cruddy) Pages Help and manual; installed new HP offficejet all-in-one software...
I still get the same result.
Most of the threads don't quite fit my situation.
For instance: Several comments have to do with older versions of things. Because I do have Pages 2, I am on Tiger OS X10.4.7 , upgrading is not my problem.
One of the threads had fairly explicit directions to make a new filter in Coloursync which led all the way to a "change resolution" menu but didn't offer advice on what resolution
modification to make. rrrrrrrr..
I am pretty lost at this point and really just want to print out a document that looks like what I have designed.
What? How? Help! Please?

tried to print directly from Pages
If printing directly from Pages does not work then it must be an aspect of your printer. Some printers have a black and white setting that might not read shadows (which are more like greyscale) With the doc opened press ⌘ +p and browse through the options of the printer's pulldown menu and see if there are any settings that might be incorrect. (Check, in particular, your 'color sync' and 'print settings' options in the pull down menu.)
Kurt

Drop shadow borders

Similar Messages

Maybe you are looking for