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

Similar Messages

  • How do I achieve this type of extreme subtle drop shadow using Photoshop?

    I cannot for the life of me recreate this effect and it's driving me insane.
    http://justpuretaste.com/ - the header logo where it says "Just Pure Taste" as well as the "We are Taste Architects" as well as the "Experts in Food & Beverage" appear to have some sort of drop shadow applied to it.  This was not done using CSS since this is an actual background image.  I would love to know how to create this effect on a consistent basis.
    I haved played around with the settings for drop shadow and using opacity: 100, 70, 50, 20, along with distance set to 1, and spread/size set to 0, I still cannot get what I want.
    If anyone can help me out I would really appreciate it.  If no one here can, could you guys please point me in the right direction like another forum or something.  Thank you!

    You see, sometimes I see that and other times I don't.  I'm not sure if the text being over a really subtle gradient causes the eyes to see things, kind of like an optical illusion you know?  But it just seems to be a very common design practice, especially the stuff I'm finding over at dribbble.  I've also tried the 1-2 px distance with a 90 degree angle but my stuff never looks the same.  I'm just unsure if I'm not doing something or this is some kind of trade secret that designers use and don't wish to divulge.

  • Drop Shadows using Type Tool

    Is there any way of changing the 'intensity' or 'angle' of drop shadows?
    I am of course using Layer Styles/drop shadow, but can the angle/intensity be changed. Thanks

    Hi Mike,
    I'm using Elements version 3 and this is how I would do it. If you are using a different version, it may differ slightly.
    Open your layers palette (F11). After applying a drop shadow filter, you will see a filter icon appear on the layer on which it was applied. It looks like a curly 'f' within a circle and appears to the right of the thumbnail.
    Double click it to open Settings and play with the controls.
    Mark

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

  • Trouble adding drop shadows to buttons

    I am creating DVD menus for the first time in Encore CS4. I want the (=1) version of the buttons -- when you put the cursor over them-- to have a drop shadow so I added one in my Photoshop file. But the effect does not appear when I preview it in my Encore project. And when I tried to add it within Encore, it wouldn't let me. (The "drop shadow" option appeared gray and un-clickable.)
    Is it possible to do what I'm trying to do? If so, any ideas how?

    Unfortunately, there are grave limitations, regarding what can be part of a Sub-picture Highlight. It can ONLY be 8-bit color on a DVD, and can ONLY have one level of Transparency/Opacity.
    There are some workarounds, such as duplicate Menus, linked from an Auto-Activate Button, but in your case, you might get what you want from some tips in this ARTICLE. It starts with "Punching a Hole in Sub-Picture Highlights," but does cover adding a "Glow," that appears to be a Gradient. It is not, but rather looks like it is. You could substitute that Gradient Glow for your Drop Shadow.
    Good luck, and hope that it helps,
    Hunt

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

  • Adding drop shadow on a stroke w/ opacity.

    Hello,
    I need to create a button wherein the stroke has 40% opacity then add a drop shadow on the edges.
    The problem is, I can also see the shadow behind the stroke since it's not on 100% opacity.
    How do I make it so that the shadow only shows up on the edges of the stroke?
    Thank you,
    Zyer

    I tried this with Illustrator cs 4, sorry my version is French, I translated usefull French words for you, check under the printscreen below
    Fond= background
    Contour=stroke,
    ombre portée= drop shadow
    produit= multiply
    and well you guessed it "opacité" stands for opacity
    Need more explanation?, just ask

  • Is there a way for converting this Photoshop drop shadow to CSS box shadow?

    Here's my PSD: http://d.pr/f/ML9l
    Here are the specs:
    Color: #3b5c7f
    Angle: 90 degrees
    Distance: 2px
    Size: 4px
    Contour: Linear
    Here's what I've come up with so far, and though quite similar, it is not exactly the same thing:
    http://jsbin.com/akuleg/1/

    Are you a Creative Cloud member? With the recent Photoshop update, you can use the tool "Copy CSS"
    It copies the style to the clipboard and you can paste it into your code. Here is what your file generated:
    .Shape_5 {
      border-radius: 3px;
      background-color: rgb( 228, 224, 223 );
      box-shadow: 0px 2px 4px 0px rgb( 59, 92, 127 );
      position: absolute;
      left: 56px;
      top: 123px;
      width: 287px;
      height: 54px;
      z-index: 2;
    Hope this helps!
    Julia

  • DW CC - CSS3 drop shadow isn't displayed

    Hi.
    Still finding my way around this tool.
    In DW CC, I've added CSS3 drop shadow in CSS designer. The effect is shown ok when I save & preview in FF browser, but the effect isn't shown in DW's panes: split, design, or live.
    Am I missing something?

    It should show, at least, it does in version 13.1 build 6443 (go to Help > About Dreamweaver to check your version).
    There may be an error in your code stopping it from displaying in DW. DW is much more strict than standard browsers when it comes to code errors.
    Could you post a link to your page?
    If not, you could check your css and html against the validators to clear out errors.
    CSS: http://jigsaw.w3.org/css-validator/
    HTML: http://validator.w3.org/
    EDIT: Just saw your new post, are you talking about box-shadow not showing or text-shadow? Either way, both should show in DWCC. Text-shadow does nothing on images, you need to use box-shadow for that.

  • Copy/Paste graphic w/drop shadow to indesign - loses transparency

    See above image.. I made a vector version of our company logo in illustrator (all programs referenced are cs5 btw) and it looks great, but when I copy and paste from Illustrator to InDesign, it loses the transparency around the logo. If I place the logo instead, it works fine. The trouble is there are about 16 variations of the logo, and its MUCH easier to copy/paste from one aggregate file instead of having many different logo files to place.
    Background on how the logo was created: The inner circle area is multiple different gradient layers (some with transparency masks as well). The white line around the outside is an expanded stroke, and it had a drop shadow effect applied (Stylize menu), which I expanded so it would scale properly when scaling the logo up and down. Here is a link to download the logo: download logo
    Q: Is there any way to make InDesign preserve the transparency when I copy and paste?
    Would be eternally grateful if someone has a solution that allows me to copy/paste!

    I agree with Bob's suggestion to use separate "layer groups" in your logo file for different styles. I also use separate layers inside InDesign to "multi-purpose" company documents with different backgrounds, graphics, and content. But that's the only way I use layers inside InDesign – Not for general placement of image files! I also disagree with ability to copy and paste graphics from Illustrator with drop shadow. Here's an .ai logo which I quickly added Drop Shadow to in Illustrator CS4, and then a Copy and Paste into InDesign CS4 document. Best workflow practice is to 'Place' image files as Bob suggests, linking them from a separate file folder.
    For something "quick and dirty" I see no problem with Copy and Paste, but your success may vary based on OS, and CS versions you are using!  Sometimes it is wiser to take a few shortcuts to hit rather than miss that deadline!

  • Line appears when applying drop shadow on large scale

    Hello!
    Some weeks ago I had to make a large scale graphic (800mmx2000mm) for a roll-up banner. I wanted to apply a drop shadow to a rounded shape, and ugly lines came up. Since it was a bit urgent, I decided not to use it.
    But now I'm curious, so I quickly made an ellipse and added a shadow, so you know what I mean. This also happens when I save it as pdf or image.
    Perhaps someday I will have to use a drop shadow on large scale. So, does anybody knows how to fix this or what could I do in case I need to use this effect in these conditions? I use Illustrator CS6 in Mac with Mavericks.
    Thanks in advance.

    Mike Gondek wrote:
    I was able to create an ellipse to your dimension and got a good drop shadow. What happens if you manually make a drop shadow using appearance?
    FYI I tried making the same using drop shadow filter in CS5 and got this error.
    Incase your file was created in CS5 and opened in 6, I would recreate the drop shadow in CS6. I know they redid the gaussian blur in CS6, but not sure if that affected drop shadow.
    CS6 is better on raster effects at large sizes.
    My file was created and opened in CS6.
    My ellipse is around 175cmx50cm. I tried it manually like you said and got the same results:
    So, I guess I'm alone with such a problem. No idea what is wrong :/

  • Drop shadow won't show up, think it's cuz of the actionscript

    Hi, can you please look at my site
    http://www.alphatecspine.com/
    See the scrolling text on the flash banner? I added drop shadow filter to it and it isn't showing up, the drop shadow isn't there. I am making that scrolling happen with action script, could that have something to do with it?
    Thanks,
    Stan

    no reason other than that I like to use ActionScript whenever I can. It's cleaner to update later on.

  • Drop Shadow renders in opposite direction!

    Added drop shadow to a clip. Direction is lower right (315 degrees). Looks right on screen. Export video. Drop shadow is to the upper left! Tried the drop shadow on both the individual item and on the group. Same results both ways. Move my drop shadow to the upper left in the project - exported movie has it to the lower right. Bizarre!
    --Kurt

    Most NLE's use straight alpha. I have never rendered pre-multiplied except to demonstrate to students that they don't work well in most situations. I always edit my output module templates to get rid of the pre-multiplied settings. I never have figured out why they were the default.

  • Question about drop shadow size

    Hi All!
    I have created a style that only contains a custom drop shadow. I frequently apply this style to illustrations that I'm creating for a book.
    However, since updating to CC 2014, I've been having a problem with the style. The size of the drop shadows is different on every illustration I apply it to. I originally set the style up to have a 7 px size, but now, when applied, sometimes the size is 22 px, sometimes 30 px, sometimes 5 px.
    Can anyone tell me what is going on and how I can get the drop shadow size to remain constant each time I apply it?
    Thanks in advance!

    I believe if you create a layer style preset the Adobe store the resolution of the document that you were editing when you created the preset into the preset so Photoshop can scale the style effect to the resolution of the document you apply the layer style preset to.
    Layer style setting as you know are in terms of absolute pixel.  That would mean the size of the shadow would vary on document that had different resolutions,   Notice in menu layers there is Layers>Layer Style>Scale Effects... and In the Image Size dialog(s) there is a check box Scale Styles or a setting Scale Styles..
    If it working differently in CC version 15 then is was in CC version 14 they may be a new bug.
    If you want a 7px drop shadow no matter what the documents resolution is you may be able to record an action that add a 7 PX drop shadow using the Layer Style dialog not using a preset style.
    I  created  a Drop Shadow Preset on a 300 DPI Document distance 2 px size 7px.  I then recorded an action the applied that preset and then applied the same settings using the layer style dialog instead of the preset.  There is a great difference on how the two steps were recorded.
    When I step through the action on a 300 DPI document the drop shadows looks the same.  On a 72DPI document the Preset drop shadow looks small like the 300dpi document however the step that was recorded with the Layer Style Dialog the layer drop shadow  looks much larger for it was not scaled down to match the  documents 72DPI resolution.
    So it look like if you use a Layer style preset from the style palette the effect will be scaled for the documents DPI resolution.  Notice in the action there is a Layer Style Scale 100% in the step recorded using the layer style dialog.   Where the preset DS is applied some how by Photoshop and Photoshop scales the effect....

  • CC 2014, Illustrator, type with Drop Shadows what's different about them?

    I just tried to give a line of type a drop shadow, using Creative Cloud Illustrator CC 2014.  When I first apply the drop shadow a blur shows up and the only what I can give it a shape is and by going to O inches blur.  What on earth is going on...do I have a bad copy of Illustrator?
    I'm using Illustrator on a PC running Windows 7 Professional, has an Haswell i5 processor and 16 GB of memory. I'm using the 64 bit version of CC 2014
    When I've gone to Help it won't accept drop shadow and type for illustrator at all.
    Thank you very much, in advance. Any help would really be appreciated appreciated.

    This is what I get: Mode: Normal; Opacity: 75%; X Offset: 0.1 in; Y offset: 0.1 in; Blur: 0.1in Color: Black

Maybe you are looking for