Drop Shadow on text?

[polara]

Can I add a Drop Shadow to the text in a gallery?

[oochappan]

Can I add a Drop Shadow to the text in a gallery?

Code: Select all

filter:dropshadow(color=#000000,offx=1, offy=1, positive=1), glow(color=#000000, strength=0);

I use it in the h3{} for the text under the picture itself

[polara]

Thanks for the tip, but I'm not seeing it. It looks like there is a shadow under your thumbnails, but not in any of the text. I cut & paste your code into h2 of my style sheet, but no drop shadow. All I'm looking for is a simple "MS Word" style drop shadow in my h2 banner text.

[thewedding]

Thanks for the tip, but I'm not seeing it. It looks like there is a shadow under your thumbnails, but not in any of the text. I cut & paste your code into h2 of my style sheet, but no drop shadow. All I'm looking for is a simple "MS Word" style drop shadow in my h2 banner text.

it does not work without a container with fixed width and height....

[polara]

Could you show me an example of the code of what this would look like? Thanks

[oochappan]

deleted

[thewedding]

it does work ...

like I said before you need a container in this case you can use the h2 tag... and set a width and height on a span tag within the h2 tag...display as block.

and don't use filter:dropshadow as it does not render as nice .. instead use the directX approche.. although its IE only works for most ppl.

code would be as follows

Code: Select all


   h2 {
      border: #888888 1px solid;
      display: block;
      background: #F0F0F0;
      height: 18px;
      margin-top: 20px;
      }
   h2 span{
      filter:progid:DXImageTransform.Microsoft.Shadow(color="#111111",Direction=135,Strength=1);
      width: 100%;
      height: 14px;
      display: block;
      color: #FFFFFF;
      font: bold 14px verdana;
      letter-spacing: 4px;
      text-align: right;
      padding: 2px 4px 0px 4px;
   }


<h2><span>Bla di bla</span></h2>



[thewedding]

oochappan , here are some usefull links for you,
which I advise you to read.

http://www.w3schools.com/css/
http://www.srijith.net/pbasefaq/
http://creativecommons.org/licenses/

hope it helps

[polara]

Well, I'm still not quite sure how you would add this code containing html into an existing pbase style sheet, but if you want to see what I'm trying to do, and why I would like to have drop shadows, go here: http://www.pbase.com/polara/sinners

If you can show me how to add in your code, I'll be really grateful. Thanks.

[oochappan]

show me how to add in your code, I'll be really grateful. Thanks.

simply copy under ur original h2 { }

Code: Select all

h2 span{
      filter:progid:DXImageTransform.Microsoft.Shadow(color="#000000",Direction=135,Strength=6);
      width: 100%;
      display: block;
   }


AND edit this gallery and copy

Code: Select all

title (blank) 
description <h2><span>Original Sinners</span></h2>


thats sufficient
thanx to webdev
eagerly to learn,
eagerly to share,
imperfection aware,
clearness in return
BTW nice layout (if u undo the 'padding: 3px;' in the 'A:hover' or copy to the other 'A:....' it becomes less jumpy)

[polara]

You are awesome!!!! I even added a dropshadow to the h3 line. It looks great in IE6, but the h3 text is messed up in Mozilla. That's okay, I'll fix it. Now, one other question:

The text for the "camera info": (1/40s f/2.8 at 13.9mm iso1600 with Flash full exif), and the "sizes" text, (other sizes: small medium large original). Which part of the css code controls these

P.S. I like the "jumpy" hover. I copied it, er, I mean respectfully borrowed it from Lou Muenz, http://www.pbase.com/tremont Thanks Lou!!!

[oochappan]

Code: Select all

-Which part of the css code controls these

-messed up in Mozilla

.exif{
#othersizes{
.techinfo{
(u can add 'display: none;' to all 3 to let them disapear)

maybe the other filter I mentionned before for Mozilla ..... u try it out
OR maybe the jumping is causing this in Mozilla ... I had similar thing also with thumnails before ..... test this as well

[polara]

I fixed the Mozilla problem. Thanks again.

[oochappan]

how, tell me .....

[polara]

What I meant by "fixed" is that now, in Mozilla, everything displays the same as in IE6, EXCEPT no drop shadows. The problem was just some unnecessary codes in the h2 container.