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.

Similar Messages

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

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.

Indesign CS6 text drop shadow changes background colour

I have two layers, one for a background image linked to a photoshop document and another layer for text. When i add drop shadow to the text, the background colour goes sort of dark, and the same happens in overprint view whereas with 5.5 it didn't do that. Is there a way to fix this?
Before:
After:

Looks like maybe an RGB image with a CMYK transparency blend space applied.

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.

Drop shadows published to HTML5 aren't drop shadows

Flash Pro 14.1.0.96
Windows 8.1
When applying a drop shadow to an HTML5 display object, the ‘Distance’ property defaults to zero and the Distance control in the Properties panel is disabled. Because the distance is zero, the resulting effect is not a drop shadow – it’s a glow.
I can see no reason for disabling the Distance control because CreateJS’s Shadow class has properties for X and Y offsets. And if you change the Flash-generated JavaScript from this:
this.text.shadow = new cjs.Shadow("rgba(0,0,0,1)",0,0,2);
To this:
// Set x and y offsets to 1 pixel
this.text.shadow = new cjs.Shadow("#000000", 1, 1, 0);
…you will see a proper drop shadow.
Is there any way to modify the CreateJS files included with Flash Pro CC to at least change the default X and Y shadow offsets to a number greater than zero? It would save me a lot of time on a current job.

This is not a problem with preferences. This is inexplicable, documented behavior.
When you apply a drop shadow to an HTML5 display object, the Distance and Angle properties are set to zero. You can't change them in the Properties panel.
Here:
That is not a drop shadow.
And BTW, if you apply a glow filter to an HTML5 display object, the JavaScript published from Flash will create the glow by creating an instance of the Shadow class...with X and Y offsets set to zero. In other words, the published code makes no distinction at all between a glow and a drop shadow.
That can't be right. And since my current project has 32 Flash files that also have to be published to HTML5, I was hoping for a better solution than having to recreate every drop shadow via code.

Disappearing drop shadows..

on two of my web pages, I lose the drop shadow on some objects when I have gradient or image fill selected for the page background.
One page I lose it on a QT Movie(image fill), and on another page with jpg images(gradient).
Text drop shadows on these same pages are fine.

It is vinyl printing. They are using a program called Vinyl Express (version 8). It's for a vehicle wrap.
My design has transparency. There are several paths overlapping containing gradients.
The printer asked me to flatten the artwork and save it as a .eps. I was hoping to submit artwork that is 1/10 to scale. Today I made it as large as I can in illustrator and then opened the file in photoshop. But then I realized at the size I was working in the artwork couldn't be saved as a photoshop .eps. The option was to save it as a large document format. I ended up doing a tiff. There are so many options in the saving process it's got me uncertain how to it just right.
I would really like to submit a vector file so the scaling is limitless, but they are asking for it flattened. Scaling it up from 1/10 isn't working because it is pixelated. What would be the best approach for flattening? I tried the flatten transparency option, but there are so many options... I'm wondering if it would be necessary to use the preset, "Complex art." And should I do 0 on the raster/vector scale?

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

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

Adding a Drop Shadow to text in InDesign CS6

I have no character styles in my recent installation of Cloud InDesign CS6 and want to know how I import these effects.

Character Styles and Drop Shadow, (an object-level effect), are not related. There is nothing to import.
To apply a drop shadow to text, select (black arrow) the text frame and choose Drop Shadow from the fx menu at the bottom of the Effects panel, (Window > Effects). The Drop Shadow dialog opens where you set the parameters of the effect.

Drop shadows on text do not behave in the same way to inner shadows on objects

I have piece of text with a drop shadow on top of a box which has an inner shadow. In both cases, the shadows are CMYK black, with 100% opacity, applied using the Multiply method.
When designing, things appear correctly (note background is CMYK magenta, but will change once this issue is resolved):
When outputting in the Press format, with everything left as defaults, then two issues are seen, firstly is the Yucky Box Problem, the second is the drop shadow has lost it's colour, and looks as it does if I choose Normal for the shadow type. Note the PDF viewer is Apple Preview in Lion:
If I embed the CMYK colour profile I'm using (Coated FOGRA39), then the YBP goes away, but the colour of the shadow is still wrong:
Finally, if I force the transparency to be flattened, it appears correctly but with a thin white line (note profiles are not being embedded in this case):
Case 1
Case 2
Case 3
Case 4
What I would like to know is how to ensure the output is as it should be in the final case, but without the white line, i.e. without flattening. It's worth noting that if the text is located in the main, white, area of the page, then it works correctly in all cases (except the Yucky Box Problem situation which is easily resolved). Thanks in advance!

That seems to have resolved the problem. Interestingly, the 'Yucky Box Problem' doesnt seem to occur regardless of whether I'm importing the profile or not, I guess Adobe Reader is doing it's own stuff with the colour space which Preview isn't. Thanks again for your help!

Paragraph style - Drop shadow on text

Hi,
I cannot find out how to apply a drop shadow to text in a paragraph style.
It looks like drop shadow can only be applied to Object style.
And object must be selected with selection tool. My text box goes up to 30 pages!
I don't want all the text with shadow.
Any help or cue will be appreciated.
thanks

Drop shadows can only be applied to all text within a Frame. You will need to separate the paragarphs you want a drop shadow from and Anchor those within the text.
http://help.adobe.com/en_US/indesign/cs/using/WSa285fff53dea4f8617383751001ea8cb3f-6c43a.h tml

Is it possible to put a drop shadow on text added to an image?

Is it possible to put a drop shadow on text added to an image using Photoshop Elements 10?

Yes.
Open the Effects palette. In the drop-down. go to "Drop Shadows." You will find several listed. After you have applied, double click on the f on the text layer in the layers palette. This will bring up the Style Settings. Here you can fine-tune the shadow..
Note that in the drop-down referenced above, there are also Bevels which may enhance your presentation.

Text drop shadows (via CSS)?

Similar Messages

Maybe you are looking for