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

Similar Messages

  • New to Pshop, trying to make gradient drop shadow for webpage

    I am a newbie, just got Pshop and watching every tutorial I can find but can't seem to figure out how to make this graphic.  This is a background image for one of my websites (where I did not create the graphic).  Can anyone point me to a good tutorial or walk me through how to create this for a new site I am working on?  Thanks, Gary

    or... you could use CSS3 drop shadows on the containing element and skip the need for background images all together.
    otherwise I would defer to the list just provided... there seems to be some good tuts in there on how to do what you are looking for...
    the hickup you will run into is fading the shadow out at the bottom... this will require seperating the fx layer out and masking it off...
    or just masking the layer itself since the your background is the same color as the element.

  • Text drop shadows (via CSS)?

    Hi guys,
    Hope everyone has had a great summer!
    Quick question: I have white type with a dark blue image behind it. I'd really like the white type to pop more off the background with a text drop shadow (CSS generated drop shadow, not rasterized), can't get it to work. I found this simple video...
    https://plus.google.com/117443384307509478210/posts/1h3EVw4jvmf
    ...however doesn't seem to be working for me. I'm selecting the text box the white type is in -- the box has no fill and no stroke -- trying to get the drop shadow to only effect the text. Or, is this not possible for some reason(?)
    Thanks in advance for your help!
    D

    The simplest way to create a text shadow is like this:
    .section p {
        text-shadow: 2px 2px 2px #000;
        font-size: 150%;
    Now your HTML may be something like this:
    <div class="section">
        <p>Your sample text goes here</p>
      </div>
    This works in FF 14.0.1 but don't know if it is going to work in IE9 or in other major browsers.
    Good luck.

  • Illustrator CC Drop Shadow Issue

    Since upgrading to Illustrator CC, I am having random issues with drop shadows. It doesn't matter if the shadow is applied to a basic vector graphic per screenshot attached, or to a placed transparent image, and it can be on complex shapes or very simple shapes. I get these odd straight lines running through the shadow. It is just a CMYK file (no spot colour), set up for print, document raster effects resolution set to 300ppi. I have tried fiddling with the drop shadow settings, if I move the x and y settings it just moves the line. If I keep the x and y distance the same but remove the blur value, the line disappears (see screenshot without blur). It is not related to transparency, because even if I flatten the image and expand the shadow, it is still there.

    Dhirendra Mohan, thanks but it happens on all different shapes and sizes, irrelevant of stroke being added or not, but it is definitely linked to high resolution, larger files.
    Raymarcher, I reckon you've nailed it. I did not have this problem with CS5 on the same size files but updating to CC has caused a lot of performance issues on my Mac. Photoshop CC has already told me to update my video card. I'm running:
    iMac 24" 2009 2.93GHz Intel Core 2 Duo
    4gb 1067 MHz DDR3
    NVIDIA GeForce GT 120 256MB
    Running OS X 10.8.5
    Waiting on the next release of iMac before buying. Will just have to adjust the raster effects resolution in the meantime and will certainly try switching off other applications when working on large files and see if that works. Have never used SVG drop shadow but will read up thanks.
    So problem not totally solved, clarification from Adobe that this would be the cause would be great, before I buy a new iMac please.
    Cheers,
    Julie

  • Illustrator cs3 drop shadow

    I'm trying to add a drop shadow in Illustrator CS3. Unfortunately, when I select the object & choose Effect>Stylize, only glowing edges is available. How do I access drop shadow? I also tried filter>stylize & glowing edges was the only option again.

    Cheryle:
    You are accessing the Photoshop Effects section, move up to Stylize in Illustrator Effects (upper part of Effects menu).
    steve

  • Drop shadow not available?

    Hi everybody, I'm kinda new to illustrator and I would appreciate your help on an issue I'm running into. I've been following a few tutorials that say to use Effect > Stylize > Drop Shadow, but for me Drop Shadow is not available in that menu. The only thing that is available is "Glowing Edges." I'm trying to add a drop shadow to an ellipse, but I've tried it with lines and even that didn't work.
    Any idea what is going on here?

    Thanks for asking this and thanks Wade Z for answering...I've just spent 2 hours worrying about my installation of the programme!
    Why don't adobe explain this in their basic info on drop shadows?...if there are 2 identical labels within one panel it's bound to cause trouble.
    Adobe you owe me a pint!!!!!!!!!!!!!!

  • 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

  • Drop Shadow caused by light source (Motion 3)?

    i am trying to create some drop shadows with objects in Motion, and i cannot seem to find a way to allow the 3D lights, to create a drop shadow for the object that is blocking the light. The object is also in a 3D group.
    I am aware that you can just enable the "Shadow" box in the properties tab when in a 2D project/group, but this is not available when in a 3D group, so...
    Is this not implemented yet?

    No, this is NOT available in Motion yet. Need to go over to After Effects for the Cast Shadow and Accept Shadow options.

  • Drop shadow troubles

    i am trying to create a drop shadow on text.  i select the text and then copy and then paste in back.  however, the copy shows up way above the text and not behind it.  what am i doing wrong?

    SoneMouanghot,
    What happens if you create the text as live Type, then Effect>Stylize>Drop Shadow (with suitable values)?

  • Drop Shadow

    I am trying to make the drop shadow on this site (temporary location) darker.  I used a method I learned but just have the gif file so I need to recreate the file.  I've tried creating the canvas (1034 x 6959) then drawing a rectangle the same size leaving a bit of space on the bottom and right and then adding a Filter > Drop Shadow to the rectangle and making the transparency high so that it will be dark, but either the canvas shows (I did Fit Canvass too) or it's grainy or not dark enough or all of it.  Is there a way to create this file but darker and less grainy?
    Thanks so much!

    The reason you can't just darken his image is that, being very light, there are probably only a few colors in it. When you darken it, you don't have a gradient between the darker grey and white, you have maybe just 3 or 4 dark greys. Darkening his image is not a useful way to go.
    Start with a new image.
    Make a FW png document with a rectangle and a drop shadow.
    Export a non-transparent PNG24 image from the FW document.
    Open the non-transparent PNG24.
    Using the pencil tool (set to 1-pixel hard so you don't get any aliasing), draw over the corner pixels that you want to be transparent, using a bright color.
    Use Image Preview to set up export as a GIF and use the eye-dropper to set the transparent color to your bright corner color.
    Export as a GIF. Your corners will be transparent.
    Now then. Your friend is using a giant image because he doesn't know how to do things correctly. The better way is to use a slice across the image with just the right-hand side of the shadow behind most of the content and set it to repeat-y. Then, stack that over a new, separate div that only contains the bottom shadow.
    <div id="outerbox"> (maybe this is 805 pixels wide, with a 1-, 4-, or 10-pixel high repeating bg)
    <div id="content"> (maybe this is 800 pixels wide, since it doesn't have the shadow)
         Your stuff goes here
    </div>
    </div>
    <div id="bottomshadow> (maybe this is 805 pixels wide and 5 pixels high)

  • Fixing Drop Shadow, create its own lines

    Hi everyone, Been playing with illustrator all day and its been a blast. Im trying to put a drop shadow on this, however, theres a huge line that I can seem to get rid of that cuts through from the M to the F. (please refer to the pic). I know its not an anchor point or anything, but how the hell do i get rid of this? its driving me nuts! THANKS!
    -Jonny

    it looks like the MF is formed of a single open path and that path has a white fill. if a path is open, the fill will just cut straight between the endpoints of the path. select it and give it a fill of 'none' (the red slash box below the stroke/fill tools). since that's also the fill on the bottom of the F, you'll see through that too.

  • Add drop shadow with css?

    is there a way to add a dropshadow with css? (specifically to
    a label component)
    Thanks!

    "Phrankie" <[email protected]> wrote in
    message
    news:gop31l$24j$[email protected]..
    >
    quote:
    Originally posted by:
    ashtangakasha
    >
    quote:
    Originally posted by:
    danger42
    > No, drop shadows are implemented as filters, not styles.
    They cannot be
    > set
    > via CSS in Flex 3.
    >
    > matt horn
    > flex docs
    >
    > Although Matt's reply is true with respect to label
    components, which is
    > what
    > the original question addressed, it's worth pointing out
    that MXML Styles
    >
    can
    set dropshadows on components which happen to expose the
    > dropShadowEnabled property. Perhaps this is new to Flex
    3.2.
    >
    > For example, CSS can apply dropshadows to TextArea,
    Canvas, DataGrid,
    > AdvancedDataGrid, and other list-based containers, but
    not to Buttons,
    > Labels,
    > ComboBoxes, Images, etc. The rationale for exposing or
    not exposing the
    > dropShadowEnabled (and dropShadowColor) property is not
    clear, so you have
    > to
    > refer to the docs.
    I think it depends on whether the component has a HaloBorder
    or not.

  • TS3140 I tried to order a book on iPhoto but got the following message from apple :  the file contains text with drop shadows. As a result, Apple is unable to process your order"  Does anyone know what this means and how to fix it?   Thanks!!

    I tried to order a book on iphoto but got the following message from Apple  : "the file contains text with drop shadows.  As a result Apple is unable to process your order"  Does anyone know what this means and how to fix it?  Thanks!! 

    Hello Katiebell62
    Check out the troubleshooting steps to try and resolve your issue with purchasing a book through iPhoto.
    iPhoto: Difficulty submitting a book, card, or calendar order
    http://support.apple.com/kb/TS2516
    Thanks for using Apple Support Communities.
    Regards,
    -Norm G.

  • Adding drop shadow using CSS

    I am fairly new to CSS and am designing a website where I
    would like to use a drop shadow using CSS.
    Currently I have a container div that is centred horizontally
    in the browser window and want to add a drop shadow to this div, so
    all content stays central in the browser window when it is resized.
    (similar to
    http://www.thegraphicmac.com/).
    Any help/advice would be appreciated...
    Thanks

    CSS doesn't make drop shadows exactly. You could configure
    one division on
    top of another division with an offset but that's complicated
    when used on
    an entire page. This basic tutorial shows how to bring 3
    image slices into
    a CSS layout. (Use your own images and play around with it.)
    http://alt-web.com/Image-slices-in-a-CSS-based-layout.html
    --Nancy O.
    Alt-Web Design & Publishing
    www.alt-web.com
    "richardellis" <[email protected]> wrote in
    message
    news:g62m8c$qj8$[email protected]..
    > I am fairly new to CSS and am designing a website where
    I would like to
    use a
    > drop shadow using CSS.
    >
    > Currently I have a container div that is centred
    horizontally in the
    browser
    > window and want to add a drop shadow to this div, so all
    content stays
    central
    > in the browser window when it is resized. (similar to
    >
    http://www.thegraphicmac.com/).
    >
    > Any help/advice would be appreciated...
    >
    > Thanks
    >
    >
    >

  • Trying to add drop shadow to home slider app

    Does anyone know how to do such a thing?

    Thanks for that but I wasnt clear enough in my question.
    I have the code but I havent been able to find where to place it in the home slider app.
    From my attempts I have determined that a class like the one in this post .shadow needs to be placed
    somewhere in the javascript code unless there is a way  to combine a drop shadow and a glow effect in  one box-shadow statement.

Maybe you are looking for