• 200717 Dec

    I’m working on the CSS3 Backgrounds and Borders module with Bert Bos, and I’d like to start a new Q&A series because I think we need some help: This time I’ll ask the questions, and you give me answers. Ok? :) Since the CSS Working Group Blog currently doesn’t accept comments, CSS3.info has kindly allowed me to cross-post so you can write back. The first issue is a complicated one, so I’ll start with an easy question. The topic is drop shadows.

    In the latest public working draft we have a box-shadow property. The point is, obviously, to be able to draw a drop-shadow for a CSS box. It starts to get complicated once you ask “what happens when there are semi-transparent parts of the box?” At first we figured ‘box-shadow’ should just draw the shadow as if the box was opaque. Then Dave Hyatt, who had started implementing this, started questioning that logic. We’ve got proposals for a ‘border-shadow’ property to shadow just the border and a ‘background-shadow’ property to shadow just the background color (but not the image?), etc. We could also just “shadow everything drawn in this element”. This all sounds rather complicated to me so I want to step back and ask:

    What do you, the web designers of the world, want to do with shadows? What’s the end result you want to get?

    Show me. Post a few links to stuff from your portfolio that uses anything beyond pure text shadows, even if it’s all done with pure Photoshop(/Painter/GIMP) graphics. Draw (or explain) a picture of what you want to achieve. Then maybe we can figure out how best to make it happen in CSS.

    You can skip to the end and leave a response.


  • Comments

    • 01.

      I’d love to be able to achieve the drop shadow effect for the portfolio images here. It is a background image at the moment.

      For me a wishlist would be to be able to define the angle of the light source, distance, spread and size in that order. Light source is the only one I can’t really live without.

    • 02.

      I’d love to do a shadow that is less traditional 5px offset with blur, and more of a diffuse shadow on boxes, as I did here

      I agree with George’s parameters. that would allow enough control I think (as I can achive this with photoshop with that many handles of altering.

    • 03.

      The syntax would most likely be identical to the one for ‘text-shadow’, so you’d get the first three, I think.

    • 04.

      I don’t think this is something that CSS should do.

    • 05.
    • 06.

      I like the way Adobe InDesign handles drop shadows:
      http://flickr.com/photo_zoom.gne?id=2117635277&size=l

      You can set shadow on the object, stroke, fills, text or any combination. Very flexible.

    • 07.

      I think it should support shadows for the box itself – shadowing the image isn’t CSS’s place. Also, the shadow should reflect the ocpaicity of the box. George’s parameters sound good :)

    • 08.

      Hi ;)

      the CSS shadow property sounds exciting – I’ve thought about this a few times…. how useful it would be, the flexibility to quickly change the angle of a drop-shadow on the visuals with CSS, without having to go through a lengthy editing process (in case of a larger number of visuals/icons affected) in a graphics package would be great :)

      I might be quite naive here as I don’t know whether this is even possible at all – but I’d love the possibility to add a drop shadow to a graphic which contains transparency, ie the shadow would apply to the actual graphic and not its box – which might be absolutely impossible and sheer utopia, I realise – just thought I’d dream anyway :)

      http://www.graphiceyedea.info/p_gallery/gal_main.php (and all subpages)
      I created custom icons which all show a tiny drop shadow – a keen eye will notice that there are one or two of them whose shadow is at a slightly different angle (very annoying and I need to edit them in the graphic app to change this).

      anyway, just my thoughts ;)

    • 09.

      Well, yeah, but CSS isn’t a graphics program. In Photoshop you might do some extra touch-up after the drop-shadow command, but in CSS we don’t have intermediate steps. CSS syntax needs to be able to express the desired end result, not how you get there. So that’s why I’m asking for finished examples.

    • 10.

      @KenBW2: Define “box”. :) If I have a box with a border and some text but a transparent background, what gets shadowed? If I have a box with a solid background, what gets shadowed? If I have a box with a border, some text, and a background image with variations in alpha transparency, what gets shadowed?

    • 11.

      Box to me = border, padding, background. I suppose if the background was transparent… oh I dunno – I’d have to think about it. Probably do the border. But then you’d have to apply that as a property if you only want the border doing if the background is opaque.

    • 12.
    • 13.

      I think following the way that layer effects work in (for instance) Photoshop is a very good model, since this is most likely the effect that designers will be attempting to reproduce.

      If you apply a drop shadow to an element in Photoshop, and that element is empty (say, you turn its own opacity down to zero) then what you get is what you initially describe: a shadow as if the element were itself opaque. This behaviour can, however, be changed by setting the “Layer Knocks Out Drop Shadow” checkbox, so potentially some sort of knocked-out attribute may be useful in conjunction.

      Having separate attributes for backgrounds and borders could be useful, though; by setting a background-shadow of a certain radius (let’s say, 10 pixels) and then applying a border of 5px without any shadow, the shadow that appears will already be at a significantly reduced opacity at the point it becomes visible. This has the effect of altering the way the shadows blend into the corners.

      I’m going to put together a few test images to illustrate what I mean by all this. I’ve not finished them yet, but they’ll be at http://www.kapowaz.net/css3/ once complete.

    • 14.

      CSS is dead, I can’t believe anyone even uses that stuff anymore.

    • 15.

      My thoughts (even though I work for a browser vendor) would be to follow the border of the box if it is opaque (ignoring border-image for now), so that it follows around the curve of the border-radius if that is set. If there is a border-image, then follow where the none transparent parts of the image go, so for example here you would get the shadow of the diamonds. So far this is easy and logical as it is dealing with opaque and transparent (although I don’t implement the browser, so I can’t comment if it is as easy as it sounds).

      Now the difficult part – semi-transparent images or backgrounds with HSLA or RGBA or opacity. My thought here, is what happens in nature? If you have a semi transparent surface, such as coloured perspex or glass, what happens when you shine a light source on it? I’d expect the shadow to change depending on how transparent the image/background is. Where the image is full transparent you’d get the regular shadow, and where is has some opacity you may get some shadow through the image/colour. I’m not a physics expert, so I’m not 100% sure what would actually happen.

    • 16.

      @David Storey: I’ve uploaded an example of how drop shadows would behave on an image with variable opacity. Or at least, this is how it would look if created with Photoshop (a relatively simple example).

    • 17.

      I’d have to agree with Ben Darlow and David Storey. Give an option to pretend the block is simply opaque, or to do what Photoshop does.

      What would be really fun is to have an animated SVG with transparent background on an HTML page and watch the poor browser calculate the shadows on THAT! Buahaha.

    • 18.

      Um, I meant “what nature does”, not Photoshop.

    • 19.

      @Fyrd: that does raise one concern I have with all this; just how much local processing is necessary for it to not grind your machine to a halt? Then again, it’ll be 2050 by the time this is actually implemented by MS, and we’ll all be viewing the web via neural implants or something.

    • 20.

      Ben: It would be interesting to see with an image where it doesn’t go more transparent in a linear fashion. For example, a stained glass window, with a diamond pattern for example, where some bits are more opaque as they have thicker paint, some or more transparent (almost clear but not quite) and some is fully opaque (such as the leading). Even without the fully opaque leading i’d expect to see some shadow at the edges (and under?) of the more opaque colours/pattern that shows through the almost transparent colour/pattern.

    • 21.

      Here’s an example of how Photoshop does shadows through a layer with different opacities: http://img103.imageshack.us/my.php?image=shadowys7.jpg

    • 22.

      [...] CSS.info se nos pregunta a los desarrolladores como nos gustaría que pudieran ser la sombras de las cajas para definirlas así en en el [...]

    • 23.

      On http://www.gamepartypro.nl/ I use a shadow that’s cast to every side. Would it be possible to make this possible in CSS3?

    • 24.

      @Jorrit: the examples I posted previously do much the same thing. The key requirement would be to allow specifying the size (radius), translation distance from centre of element and angle of translation of the drop shadow. Having a translation distance of zero would allow a shadow to extend on all sides.

    • 25.

      A drop shadow should be the same shape and follow the opacity of the element it is applied to. So, you have a that has a transparent background and an opaque border, it follows the text and the border. If it has a solid background color or image, it follows all three (though the text would not usually be visible then). If it has a transparent image it follows all three. If it has a semi transparent image, text, border, whatever, then it follows that opacity as well.

      As for what you can then say about the shadow, I have no clue, whatever they said sounds good ;) .

      It would be nice to target the shadow as a virtual element. So that it could just be styled directly.

      -Adam

    • 26.

      I recommend two types of shadow: drop-shadow and inner-shadow.
      drop-shadow

      drop-shadow-distance: [em|ex|percent|px|pt|picas|in|cm|mm];
      drop-shadow-size: [em|ex|percent|px|pt|picas|in|cm|mm];
      drop-shadow-angle: [degrees];
      drop-shadow-opacity: [em|ex|percent];
      drop-shadow-color: [RGB|hexadecimal|name|background|border];

      inner-shadow

      inner-shadow-distance: [em|ex|percent|px|pt|picas|in|cm|mm];
      inner-shadow-size: [em|ex|percent|px|pt|picas|in|cm|mm];
      inner-shadow-angle: [degrees];
      inner-shadow-opacity: [em|ex|percent];
      inner-shadow-color: [RGB|hexadecimal|name|background|border];

      Application: Both shadows would be limited to block elements and would only shadow the edges of the box.
      Inheritance: The property would not be inherited by it’s children. Although, if you put a shadow on a child of the shadowed element, you should be able to specify that you want to inherit the settings (like opacity, size and angle) using the inherit keyword.
      Color: The color of the shadow should use traditional means (RGB|hexadecimal|name), plus you’d also be able to set it to the background or border color using those specific keywords.

    • 27.

      Let’s not get ahead of ourselves. :) I’m looking for examples of what we want the end result to be, not how make it. Once we know where we’re going, then we can decide how to get there!

    • 28.

      Bryan: the opacity can already be set by using either the RGBA or HSLA colour model. I’d think that the way of specifying the shadow should be the same as text-shadow, as it is already implemented by a number of browsers now, and shouldn’t be inconsistent with that. It probably wouldn’t be wise to change text-shadow too much as we’d lose the work done by the browser vendors and have versions of browsers that are incompatible.

    • 29.

      @Brian, the only difference between your drop- and inner- shadows is that one’s inside and one’s outside, so if something like this were to be added, it seems like it’d make more sense to add one more property like drop-shadow-position with values ‘inside’ or ‘outside’.

    • 30.

      I can’t see any use for drawing a box drop shadow inside the box. Any effect you want to achieve that way is better achieved with a background image, or by applying a drop shadow to another element inside the box.

      Let drop shadows only apply to the shape of the box.

    • 31.

      I’m probably naive (and/or paraphrasing some comments above) but it seems defining two use cases would do the job : either the box is considered opaque when creating the shadow (in which case, if the box is not opaque in other respects, the shadow would show through the box), or the actual opacity of the box (and its various contents, like a complex semi-transparent image) is used to cast the shadow.

      Algorythm-wise, the second is a generalisation of the first. Take your initial “shadow mask”, move it, grow it, blur it. Either the initial shadow mask is a black rectangle, or it is a gradient of the opacity channel of the objects above it.

    • 32.

      I was thinking something like this:
      div{
      dropshadow-position:bottomright;
      dropshadow-color#000
      dropshadow-offset:5px;
      }

      or

      div{dropshadow:5px #000 bottomright;}

    • 33.
    • 34.

      Emo: That looks great. Can you do any examples using a basic object that has varying opacity, such as where part of the patter is more opaque than the rest?

    • 35.

      First: it may be nitpicking, but why do we call this box-”shadow”? I’ve already tested and used -webkit-box-shadow to make a glow or highlight, rather than a shadow. On the other hand I can’t come up with a good alternative either …

      Second: in response to the article questions, I’d be very glad with a universally working version of a drop shadow as it is implemented now in webkit. If an element would have a .5 opacity it would seem logical to me if the shadow would simply be at .5 as well, and *not* have the shadow appear through the element. CSS isn’t graphics software, so it would appear awkward to me if it started behaving like it in some occasions.

      Third: in response to Paul D, inner-shadow (or -glow) could be very useful. If we can have shadows on the outside with CSS, then why not on the inside?

    • 36.

      Photoshop addresses this issue by having an option in its layer styles called “layer mask hides effects”. It’s pretty straight forward.

    • 37.

      My mistake. It’s actually “Layer knocks out drop shadow”.
      I could imagine this as “element-shadow-knockout” or something shorter.

    • 38.

      a bit off topic but is there anything in the spec about foreground-images or passthrough elements.

      “pass-through”
      For example (a bad example) what if I wanted to overlay a company logo _in front of_ the entire website so that it covered the central content area and the empty sides where the body background image is showing. So i want it to be big, very low opacity, but even though this 1 div _covers_ the entire page it doesn’t prevent a user from clicking on anything because it’s set to “pass-through”.

      “foreground-image”
      I had a wedding planner client who wanted some decorative vector art placed in the bottom left & top right of all the photos in their gallery. They had 1,700 photos that luckily were all the same size. If such a thing as a foreground-image existed I could have just put the displayed image in a div with a forground image of the artwork that would be displayed _in front of_ the [img] and saved myself a lot of time.

      http://thinsoldier.com/csswishlist/ (old ideas)

    • 39.

      I would definitively see the use for drawing a shadow inside the box, in order to create an embossed effect (http://en.wikipedia.org/wiki/Embossing). That’s the effect that you find in iTunes’s CoverFlow button (when :active), on http://www.apple.com menu/toolbar (:active still) and more generally through Leopard’s toolbar buttons (Safari, Finder, iCal…)

      A possible syntax for that could be having a inside/outside keyword, or simply having negative offset:
      box-shadow: -10px -10px 5px #888;

    • 40.

      Think physically: 1 = Transmission + Reflection + Adsorption.
      Shadow and Transparency (Transmission) are correlated.

      Transparency Shadow Shadow of
      ===================================
      1.0 1.0 rock
      0.2 0.2 colored glass
      0.0 0.0 nothing

    • 41.

      Here’s my take:

      Bordered box containing text & transparent background: border gets the drop shadow (designer would have to add separate text shadow as he/she wishes)

      Bordered box with slightly opaque background: drop shadow applies to the box only (shadow shines through the transparent background).

      Bordered box with transparent background and partly transparent background image: shadow applies only to the border (designer would have to add separate shadow to the background image as he/she wishes).

      Think this owuld be the easiest to implement.

    • 42.

      I think that CSS is an essential presentation language,

      so can be difficult for browser’s engine build an exact rappresentation of opacity layers merge (like a graphical output in Photoshop, Gimp, Fireworks and so on). CSS has to remain simple and essential (shadows are needed, sure, but merging layers opacity it’s not foundamental).

      So, the simplest way to achieve shadow effect trought CSS is to follow the background, and simply, his opacity. If background is set to 50% opacity, shadow set to 50% too. If there are some other boxes under this one with shadow, they are show trough background + shadow opacity.

      Don’t consider shadow angle, only essentials property like offset, color and width. Obviously, shadows have to follow eventual round corner.

      CSS is not a graphical IDE, is a “rude” language to draw design for rude readers (browsers).

    • 43.

      @Nicola, Anders: You’d be surprised at what implementations can do. But the information I’m after here isn’t what implementations can do–we have implementors on the CSSWG who can answer that question with much more certaintly! The information we don’t have is what people what to *do* with shadows: what end result they want to get.

    • 44.

      My two cents is that the box shadow’s main purpose is to give said div the feeling of hovering over the page. Given this, I believe it should only be a border issue. If someone wants their box transparent, then they see no shadow underneath. Having a transparent box and a box shadow together kind of negates the point in my book. I do think there should be an option of size, much like setting border size, along with types of shadow (ref the first two posts in thread for examples). Maybe something like:

      div { box-shadow: 5px diffuse; }

      Good luck with the project fantasi. Hopefully my input was helpful.

    • 45.

      Hi Guys,

      It sounds great drop-shadow in CSS on box-model, I think Fantasai’s question was:

      What do you, the web designers of the world, want to do with shadows? What’s the end result you want to get?

      and my answer is we can produce more beautiful designs with lesser code and ofcourse faster download-able websites (because we’ll no need to slice images for shadows) if we will have the liberty of drop-shadow in CSS.

      my personal opinion is that CSS drop-shadow property should have the property of shadow-angle, shadow-opacity, shadow-size and distance just like photoshop do have.

      And I think box model (div) should have the shadow property neither border nor image and you will need to add one more property (if possible) with Opacity property and that is “Fill” the Opacity property can transparent both background color and shadow and the “Fill” property will transparent the only Background color of box model or div.

      Good Luck Guys CSSWG you are doing a great job!

    • 46.

      [...] have a CSS Soap box to let everyone get their issues off their chest, and they have written posts requesting feedback from designers saying what they want from certain properties. Is that far enough? Maybe not, but it [...]

    • 47.

      I think any block level element should be able to have a drop shadow applied. Perhaps we could take a cue from Photoshop with the attributes. Opacity / Size / Spread / Distance. It might be kinda cool if it worked like the Outline property as well, where the drop shadow would not affect layout.

    • 48.

      [...] CSS3.info is gathering peoples opinions on how you would like to see drop shadows work in CSS3. [...]

    • 49.

      1. distance/spread in pixels.
      2. fade distance from border to edge of shadow in %. the inside border edge would default at 100% and the edge of the shadow would default at 0%. lowering the % in css would lower them all together. you could also do 2 % totals that would adjust each end independently. another way to do this would be like classifying fonts in the “small, medium, large” sense. you could do “softest, softer, soft, lighter, light, medium, heavy, heavier, heaviest” or something like that.
      3. angle of shadow controlled in 2 ways. A. defining if you could make it radiate in every direction like an outer glow or weather it was more of a traditional drop shadow going in one direction and B. if it was in the traditional drop shadow sense at what angle using %’s in a clock format. 100%=12o’clock. 50%=6o’clock. 75%=9o’clock. etc…

      thats what i would like to see.

    • 50.

      With this module we’ll have at least three different choice to do drop shadows : svg filter, canvas, and css.

      Does this module intend to be general purpose or simple ? I don’t see how it can be both.
      And as everyone seems to want different features, if you want to content everyone, then you’re developing yet another general solution.

      Do implementors really like to develop three implementations ?
      Do authors really need this third coice ?
      I really don’t know the answers, but as an author, I prefer to have one functional technique instead of three work-in-progress ones.

      Thanks.

    • 51.

      I really think we need to look at this from the absolute core need/use of shadows, to differentiate or separate visual layers of information.

      A photo from the page it’s on, a window from the GUI, or a window from another window, a menu from the surrounding content. It’s always to make something more obvious. It’s to make it easier for the viewer/user’s mind to see what is important right now.

      I totally agree with Brian’s post above, some tweaks to his concept.

      I would use “offset” instead of “distance” simply because it’s already used in CSS as a keyword, where I don’t think “distance” is… and “blur” instead of “size”, as it implies soft vs hard, and a size dimension at the same time. (refer to Fireworks when adding a drop-shadow to an object)

      drop-shadow

      drop-shadow-offset: [em|ex|percent|px|pt|picas|in|cm|mm];
      drop-shadow-blur: [em|ex|percent|px|pt|picas|in|cm|mm];
      drop-shadow-angle: [degrees];
      drop-shadow-opacity: [em|ex|percent];
      drop-shadow-color: [RGB|hexadecimal|name|background|border];

      drop-shadow (single line declaration)
      drop-shadow: 10px 10px 270 30 #000;

      inner-shadow

      inner-shadow-offset: [em|ex|percent|px|pt|picas|in|cm|mm];
      inner-shadow-blur: [em|ex|percent|px|pt|picas|in|cm|mm];
      inner-shadow-angle: [degrees];
      inner-shadow-opacity: [em|ex|percent];
      inner-shadow-color: [RGB|hexadecimal|name|background|border];

      inner-shadow (single line declaration)
      inner-shadow: 10px 10px 270 30 #000;

      If you wanted to combine the concept of a glow AND shadow it may not be a bad idea, all that would be needed is a thickness/width attribute and a combination of values would give you a glow or a shadow… not sure what you’d name the selector though…

    • 52.

      I would like to make rounded corner shadows.
      With CSS3 this could probably follow the new rounded cornered divs.

    • 53.

      [...] In A Refreshed Design for 2008 by Don’t Trust This Guy, I found a glimpse of some of the new CSS3 features and possibilities including multiple background images and CSS drop shadows. [...]

    • 54.

      I’d like to add my opinion about the opacity of shadows.

      The basic behaviour of shadows should be to follow the opacity of the shadowed element as closely as possible (shadow-opacity: inherit?).

      In case a opacity is set for the shadow it should overrule the opacity of the element (when concidered for shadowing) (shadow-opacity: 50%).

      While the first option would create the shadow based on the exact opacity of the shadowed element, the second option would generate a shadow, which would look like the shadowed element had a (constant) opacity of 50% (independant of actual opacity).

      This would leave the choice to the designer, if he wanted the shadow to follow actual opacity or if he wanted a simple (and fixed) opacity.

    • 55.

      Perhaps I am too simplistic, but some of these comments are clearly out of hand. CSS trying to figure out how to clearly represent a drop shadow of an upper layer element through a lower layer opaqued element? Figuring out where the light source is located? Come on. This stuff is way too advanced.

      CSS isn’t meant to replace all graphics. If you want something to be perfect, whip out photoshop, make it right, and put it on your page as a graphic. In my mind, CSS drop shadows should make it easy to give an object a simple drop shadow for th purpose of adding depth to an object on your page. If it starts taking longer to figure out all the properties of the drop-shadow element than it does to open photoshop and do the work there, what was the point?

      (I realize that some of the issues here are important to work out, but keeping it simple and getting it out the door are important too).

    • 56.
    • 57.

      How about something like this:

      drop-shadow-width: 5px;
      drop-shadow-offset: 5px;
      drop-shadow-color: #333333;
      drop-shadow-direction: 300; /*degrees*/
      drop-shadow-transparency: 80%; /*100% equals none*/

      Really, all you have to do is look at a typical image editing program and steal any of the features they offer. The less we have to open the program up the better.

    • 58.

      I just want to be able to get rid of extra divs that are currently needed to have a drop shadow grow and shrink with the box (like this example: http://battletech.hopto.org/html_tutorials/eightcorners/template.html ). I want to save code. I would like CSS to be able to do a simple drop shadow, and I agree that CSS can do the basics. If I want a shadow to follow an image (like the diamonds discussed above) that’s the work for images, sorry. The main things I consider when making image-based borders is:
      solid line or soft (fading at the edges like an actual shadow)
      how far and what direction offset from the box.

      I don’t ever consider borders or transparency– I consider the Edge of the element, which always includes padding and border if there is one. You guys can decide how opaque the shadow is depending on the opacity of the box, but since I currently always have to have two boxes (if I set low opacity on a div, I MUST put my non-opaque text in another container on top, which seems to be against what most people expect), it doesn’t matter to me.

      I did not consider Emo’s “cast” shadow as opposed to “drop” shadow but it could be a possibility. I don’t see it that often and myself have never used it… my light sources are always from above a flat page, even with an angle.

      But basically, anything that removes both images and extra containers from code is good.

    • 59.

      I think that since flexibility is the (ever-accomplished) goal of CSS, that flexibility in the shadow element would be appropriate.

      The properties I would like to see include: shadow-width: shadow-angle: (90 to 180) shadow-color: and shadow-opacity: (0.1 to 1, to control softness or hardness of the shadow.)

      I am thinking of these being applied to the box itself, not necessarily the elements within it.

    • 60.

      I think there should be something like this available:
      style=”border-right1: 1px solid #000000; border-right2: 1px solid #333333; border-right3: 1px solid #666666; border-right4: 1px solid #CCCCCC;”

      So there could be as many right borders as you want, with a different color for each, achieving a gradation.

      John

    • 61.

      border-*-colors sorta works, in Firefox only. Though you can only set the color for each step and not the pattern.

      There also is (was?) a selector that look something like element::outer which basically created a wrapper element around the selected element which you could style. I think you were allowed to “nest” them too.

      element {
      border-right: 1px solid #000;
      }
      element::outer {
      border-right: 4px inset #333;
      }
      element::outer::outer {
      border-right: 2px dotted #666;
      }
      element::outer::outer::outer {
      border-right: 3px outset #ccc;
      }

    • 62.
    • 63.

      Um, I meant “what nature does”, not Photoshop.

    • 64.

      With CSS3 this could probably follow the new rounded cornered divs.

    • 65.

      I agree with Exec @61.

      The box model isn’t going anywhere for a long time and will continue to be the basic element shape for years yet, in my opinion. And every 2-dimensional box has what? 4 sides, 4 corners. So all we need to be able to do is set an image for each side (tiled for the border) and each corner. Because let’s face it, anyone who wants drop-shadows probably wants rounded corners too.

      For instance:

      border-right: 10px transparent url(rightdropshadow.png) repeat-y;
      border-bottom: 10px transparent url(bottomdropshadow.png) repeat-x;
      corner-bottom-right: 10px transparent url(bottomrightdropshadow.png);
      .
      .
      .
      .

      … and so on.

    • 66.

      “What do you, the web designers of the world, want to do with shadows? Whats the end result you want to get?”

      getting analytical for a moment here, and kind of drafting my idea of this ‘item’ and how i’d see it working…

      first off, the JS and CSS code to activate the dropshadow or shadow effect should be similar to the border or bakground propery, as simply typing shadow (or drop-shadow) will allow for the multiple input of the data.

      first of a shadow can be of different intensity, so it’s going to need to have an intensity measure of some kind.
      i would think that, although 256 makes more programmatic sense in this case, a nice percentage should make anyone able to use this property and understand it’s workings a lot easier then an integer from 0 to 256 would; so I’d stick to a percentage.

      the inner working of the basic “shadow” would basically “duplicate” the container box that has this command, and place it one layer lower then the box it self.

      the created box would be opaque with the % amount, and offset to various sides.

      here is a rough example of how (using different properties) i would see this working for the width, height, opacity and all

      #shadow-div {
      shadowoffset:0px 0px 0px 0px;
      /* The offset here will basically work like “margin:” property; moving the box to the right, left top bottom just like for margin */
      shadowoffset-left:10px;
      shadowoffset-right:10px;
      /* Here is the trick, applaying this will cause the box to be 10 pixels larger on the right and 10 px larger on the left, therefore being bigger then the shadow-div it self*/
      /* Now that the box is actually being streched if the measures are positive,
      and made smaller if the measures are negative, but it is always absolutely
      positioned at the center of the shadow-div it self, and that accomplishes two
      things at once, it is basically acting as an offset and a “width and height”
      parameter. say I wanted the box to be all around i’d just have to write
      shadowoffset:10px; and the shadow would show all around shadow-div. Say I
      want the box to be like an actual shadow, so off to the left and downword,
      all i have to do is this; shadowoffset:-10px -10px 10px;.*/
      shadow-alpha:50%;
      /* the shadow will be black at 100% and completely transparent at 0%.
      so you could say that the 50% value is like a 50% transparent div if you will.*/
      shadow-brightness:none;
      /* this toggles the brightness (or darkness) of the shadow; when the brightness
      is none, then 100% brightness is assumed, meanin the shadow is black.
      alternatively, this should be able to take the parameter in as a “color hardness”
      meaning if the value is 0% the image is at it’s darkest/lightest point.
      this will cause shadow-alpha 0%; to display a completely white, NON transparent box.
      any values in between supposedly modify the hardness of the box, by really making
      the color more full and less transparent.*/
      shadow-color:#000;
      /* this defines the basic color of the shadow, i don’t know but i think eventually
      I would end up using a yellow shadow as a flourescent green outerglow… and this
      is where the shadow color would come in handy.*/
      shadow-style:none;
      /* here is another nifty feature, following is a list of the styles I would find useful:
      _inset and outset, these will make the shadow colors act like the borders, and shade the edges
      inset is dart on outsie and light on inside, and outset is dark on inside and light outside.
      _3d, this causes the shadow to look like a cube.
      _solid, basically the default (or none) it just acts regularly…
      _glow, makes the shadow litterally glow, also pulse would do the same…
      _sundial, this makes the shadow change angle automatically according to the time;
      so if it’s 12 PM, we get a shadow that is perpendicular, if it’s 2PM then the shadow would be off to the top right.
      if it’s 6pm, then the shadow would be offsett to show at the bottom. at night there would be NO shadow…
      (altough that should really be an extra switch as some crazy people would want it to be on at night too :P)
      _reflect, this will cause the browser to render a COPY of the shadow-box, and mirror it!
      so we can easily do reflections! the transparent reflection will be cast inside the shadow, and the shadow
      can then be offsetted to be at the bottom of the shadow-div and go forth (top is -100%…)
      */

      shadow-bend:0px 0px 0 15;
      /* this would let you set a plane agains which the shadow would brake.
      here is how the values are:
      the fist is the vertical position of where the plains meet, assumes 0px to be the center of
      the shadow. positive num will go up, negative down.
      the second is the X and Y of where the plain starts, assumes middles as 0 as well: this basically
      tells where the vertical plain would be and where the image would start to cuve.
      the next two numbers are the inclination of the plain.
      let’s run an example;

      shadow-bend: -50% -50%;
      This will create the corner where the plains all meet up at the bottom left corner
      of the shadow-div/
      the assumed percentages will allow the shadow to cast like if the plains were meeting at
      a perfect 90 degree angle and were perpendicular, so the shadow would be 45 degree bent.

      another…

      shadow-bend: -50% -50% 10 45;
      /* This will still create the corner there, but the bottom will be bent at 45 degrees
      and the top at 10.
      so it will somewhat look like a < ecept the top is motre like / then a 45 degree…
      */
      }

      was just a quick draft, and the shadow-bend property probably needs to actually work with 3 offset values to actually create the plain and automatically make the degree happen based on a “light position” that should also be in that case added to the property.

      BTW I think that the
      “corner radius” thing should be added to the DIV properties and the box model.

      so having
      #div_round{

    • 67.

      crap… it submitted before i was done…

      #div_round {
      corner-radious:20px;
      }

      will automatically generate the round corners that have a radius of 20 pixels for ya…
      is not even hard to code that in, I’m sure they already thought of it…

      also “corner-image” could do the trick, and let CSS take care of rotating the image and positioning it on the 4 corners while defining just one corner information… that would give you a nice “whatever” effect you want as it can be a say 20px by 20px pic, with gradients and all…

      with that needs to come an offset future, so if your box has a border you can move the image to blend in with the border..

      However the corner-radius is far more fun! figure this, if you do
      corner-radius:50% you end up having a circle of Width = radiousX2 = circle girt

      and if it’s not a square you get an ellipse just the same, which is unseen on web design, and would allow to create “crazy” layouts a LOT faster.

      ANOTHER NECESSITY IS DEFINING A BACKGROUND GRADIENT!

      sorry, I’m terribly offtopic, but i for one thing that we should be able to set more then just ONE color (or an image)

      something like

      background-color: gradient #color_start #color_end degree_direction style;

      where the stile tells how it will be laid in…
      EI radius will go from center to outer,

    • 68.

      shoot… it happen again… it’s almost like the custom trigger of a really expensive sniper rifle if you get the pun :P

      eg _continued: linear, siple will use the gradation to decide the linear orientation…

      angle, will show like an angle…
      heck let’s just copy the way it works on photoshop gradient overlay i say!…

    • 69.

      why can’t opacity values be defined as percentage?

    • 70.

      The percentage sign (%) just means divide by 100…
      There’s no advantage (or disadvantage) in using percentage instead.

    • 71.

      I am just a beginner web designer here, but I think it wouldn’t make sense to create a drop-shadow for everything in the element depending on image opacity. It could get ugly and slow in some cases. I vote for border-shadow as that sounds like the most sane implementation option and at the same time implies that this shadow only affects element borders.

    • 72.

      I think it’s best to think in terms of what’s going to be the most common practice and build up from there instead of trying to figure out all of the possible “what ifs” for the first go around.

      CSS shouldn’t be developed to do everything visually possible. We have graphic design software for that. What we need it to do is be able to apply the MOST COMMON, MOST BASIC implementation of COMMON effects and layout techniques.

      So we have to answer these questions IN ORDER OF PRIORITY with priority based on WHAT IS MOST COMMONLY DONE and with that being judged by WHAT WE SEE MOST FREQUENTLY ACROSS THE WEB, not just what we as individuals like to do with our own single sites.

      What look and set of parameters will people most commonly desire the CSS to mimic when imagining what their drop shadows are going to look like?

      1) What it’s like in Photoshop 2) What it’s like in other graphics software, which typically attempts to mimic Photoshop anyway.

      What do people most commonly use drop shadows for?

      1) Images and 2) Blocks of textual content that are set apart from the rest of the content by having a SOLID, different colored background for said block – even if it’s only a subtle difference.

      What will be the most common portion of the image/block that the shadow will mimic?

      1) The SILHOUETTE (ie; the entire OUTER OUTLINE of the shape filled in)

      What will be the most common color and look of the drop shadow?

      1) Black fading at the edges 2) Another color of your choosing fading at the edges 3) A solid color of your choosing with no fading.

      What will be the most common direction of the drop shadow?

      1) Down and to the right.

      What will be the most common distance from the image/block it’s shadowing?

      1) 5px+

      All of this being the case, I think the focus really needs to just be on the following:

      1) Set the color of the shadow
      2) Set the distance of the shadow
      3) Set the opacity of the shadow

      Done.

      Since most people want drop shadows that fade at the edges (since that’s what ACTUAL shadows look like), I think it would be no great lost to not have a fourth parameter that allows you to choose whether you want the shadow solid or fading.

      If someone wants something beyond these things, they can use a graphics program as they most likely have been doing all this time anyway, but the vast majority of old designers and new ones alike will have their basic shadow needs met and time saved.

    • 73.

      [...] Your Input Wanted: Drop Shadows in CSS3 [...]

    • 74.

      Drop shadows are great. Definitely want the shadow to follow any rounded corners. Glows are very similar to drop shadows — I would like to see these in as well.

    • 75.

      I use box-shadow to add depth to my design. More specifically, to make things seem like they are hovering over the page. This works beautifully when applied to dialog boxes and dropdown menus.

      Examples:
      http://emberapp.com/zakness/images/box-shadow-dialog-box/sizes/o
      http://emberapp.com/zakness/images/box-shadow-dropdown-menu/sizes/o
      http://emberapp.com/zakness/images/box-shadow-help-bubble/sizes/o

      While I can see the argument for “do what happens in nature”, I really think that the implementation should favor simplicity over adherence to natural laws. I have not needed the shadow to show through a translucent box — I just create what I want in Photoshop and crop out a 1px-by-1px png and use that as the box’s background.

    • 76.

       Also, since this hasn’t been mentioned yet, Markus Stange has a demo page up with all the cool effects you can achieve with box-shadow (at least in Firefox):

      http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/

    • 77.

       Thanks,
      hopefully all browsers will support css3 soon.

    • 78.

      how do you do in css the fading shadow effect to the left and right side of the main content like the one in http://blog.spoongraphics.com????

    • 79.

      @vanickers Use 2 shadows:
      box-shadow: 8px 0 10px #aaa, -8px 0 10px #aaa;

    • 80.

      I think that defining per-box, background or border parameters will make the whole think extremely complex, and even with it, won’t satisfy the flexibility needs of the creative minds behind the web. I suggest taking a step backwards and look into how most of the shadows are implemented today. They usually create another layer and assign a shadow image to it and it works great. The problem with that is that adds extra tags into the content to accommodate a specific visual appearance. Therefore I think we just need define the shadow attribute similar to background/background-image, that will create the visual effect of a layer under the box element with the specified color, image and offset.
      For Example:
      .myshadowclass{
      /* shadow: */
      shadow: #CCCCCC url(‘siluette-shadow.png’) repeat-x -5px -5px 320px 200px;
      }

    • 81.

      I’ve been waiting for this to be in browsers for a LONG time! Awesome.

    • 82.

      Some interesting comments here, especially Wolf and Gus early on – what’s up with that?

      Anyway, I like the idea of CSS mimicking nature’s shadows with regards to partial opacity backgrounds / borders. But is this really feasible with CSS, or even necessary for the effect to be convincing and attractive?

      Likewise for the “Photoshop’s features” arguments – I feel that we’re asking too much of the humble CSS ‘language’.

      For me having both ‘border-shadow’ and ‘box-shadow’ would give the best of both allowing designers / developers to choose which aspect they wanted to shadow.

      As for border-image – If you’re going to the trouble of creating an image for the border then you should just add the shadow effect in your image editor! Especially since, as numerous people have pointed out, Photoshop (et al’s) shadow features are much more advanced and allow greater control and refinement.

      The CSS Shadow features should be there for speed and simplicity, for designs / designers who can’t or don’t want to use an image based solution.

      Thanks for this site!

    • 83.

      [...] if you have a handle on CSS. Pale Structure incorporates a basic new CSS3 feature to create drop shadows without relying on background [...]

    • 84.

      [...] CSS Drop Shadows – CSS3 . Info (tags: CSS CSS3 images webdesign inspiration) Leave a Comment [...]

    • 85.

      It would be nice to be able to soften the look of the drop shadow by adding an opacity parameter to the shadow itself vs the object it’s applied to.

    • 86.

       @Larry
      Just use hsla() or rgba() for the color?

    • 87.

       Owesome! CSS3 rulez :) thanks for this post!

    • 88.

      [...] css3 info Läs mer: Anteckningar Skrivet: Sunday, 2 January, 2011 at 05:53 Du kan följa kommentarer till detta inlägg via RSS. You can leave a comment or trackback from your own site. Cancel reply [...]

    • 89.
    • 90.

       That’s very useful

    • 91.
    • 92.
    • 93.

Hosting by: