Mobile Friendly Website

CSSPLAY

Doing it with style

Fluid drop shadows COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Lightsol:-
Wouldn't it be easier to relatively position both the shadow and the inner box? Then you wouldn't have to give the shadow a width at all; it'd get it's width and height from the inner box.
(28.04.2005, 05:25)

Oleastre:-
Why are you using a "<b>" as outer box container, not just a div ?
(28.04.2005, 06:55)

Stu:-
Lightsol, this will only work if the outer shadow does not have display:block and has a float. Oterwise there is nothing to stop the shadow from becoming full width.
(28.04.2005, 08:50)

Stu:-
Oleastre, I have used <b> because it is quicker to type and does the same job as a div. It is also useful sometimes to use an inline tag.
(28.04.2005, 08:52)

Fat freddy:-
Lovely Stu
Do you think this may work as shadow for my rolodex?
In case you dont remember comments on snazzy borders

Will send you link if it works out
(29.04.2005, 08:46)

Fat Freddy:-
sorry Stu - Fat Freddy previously posted as Dan
(29.04.2005, 08:47)

Stu:-
Hi Fat Freddy (ex Dan) this might be the answer. Give it a try.
(29.04.2005, 17:17)

Juliejayne:-
Great work Stu. I presume that you know that it doesn't work correctly in FF. The raised box is in the middle of the picture.
(29.04.2005, 21:57)

Juliejayne:-
My mistake, I was looking at the IE version with FF.

Shows how careful you have to be. Well done.
(29.04.2005, 22:00)

Stu:-
Juliejayne, the raised box is in a surround shadow so should have a shadow on all four sides rather than a drop shadow.
(29.04.2005, 22:00)

Juliejayne:-
Yep, it works now. But I swear when I first looked, that raised shadow box was in the middle of the picture.
(29.04.2005, 22:08)

Stu:-
Juliejayne, you were right. There was a problem with FF that was caused by the image and float:left. I have removed the float:left and all is ok. Thanks.
(29.04.2005, 22:53)

fbgirl:-
I just discovered your site. I will spend a lot of time here for two reasons: First, obviously you have pushing the edge of CSS and I love what you're doing, so will take some time to study and experiment, thanks for sharing. Second - you are obviously a Queen fan... and IMHO, it just doesn't get any better than that!
(03.05.2005, 15:05)

Stu:-
Two very good reasons ;o)
(03.05.2005, 23:24)

Hawk:-
I notices something about the classes for the border... .ltin {
left:-5px;
}
.tpin {
top:-5px;
}
.rtin {
left:5px;
}
shouldn't .rtin be right:5px rather than left?
(09.05.2005, 19:29)

Stu:-
Hawk, nope it is correct with left:5px; which moves the photograph right by 5px and puts the shadow on the left.
(09.05.2005, 20:11)

Jeffrey:-
ok so how can i get the code???
(22.05.2005, 07:54)

Stu:-
Jeffrey, the css is embeded in the head tag of the source code. I am in the process of copying the css and xhtml to the pages at the moment but all you need to do is examine the source code.
(22.05.2005, 08:55)

Jeffrey:-
Stu, Thanks but something is up with my computer...it won't let me "view Source"...I've been trying to drop a shadow behind a site im trying to build for days now with no succ...be gentle im VERY new and green
(22.05.2005, 18:54)

Stu:-
Jeffrey, I have added the CSS and xhtml for the narrow div. Just adjust the width to suit.
(22.05.2005, 19:13)

Jeffrey:-
Stu, you are THE MAN..if i can get this to work there will be a BIG ol' link and credit to you on my page....
(22.05.2005, 20:37)

Jeffrey:-
OK..I can't get it to work...apparently WAY TOO much content...I'll keep trying tho...this is the closest I have come yet...
(22.05.2005, 21:26)

Stu:-
This should be 'one size fits all' no matter how big the content.
(23.05.2005, 08:06)

Jeffrey:-
I'm using it like a "container"...to drop a shadow like spoono.com...but when i begin to add the divs....it goes to all gray...if you would like to continue this conversation via email instead of cluttering your comments box its illogicaljeffrey@comcast.net
(23.05.2005, 08:16)

GaryBadger:-
Hi Stu, drop shaddow is exceptional of course. Slightly off-topic, when I view the source of this and other newer pages, Tidy (a FF extension) reports a malformed URI at Line 79 Column 5 (extra space in <a href tag). I thought you might like to know this. Also, thought I should report that your site inspired me to bring my own up to xhtml 1.1. Thank you! Cheers, Gary.
(29.06.2005, 12:59)

GaryBadger:-
Hi again Stu, this time on-topic, I have used your wonderful fluid drop-shaddow (and menu!) at http://safetyinvestigations.com.au/staging/test/ but the bottom shadow always displays too large. I've played around with all of the CSS and can't find what it needs. Would you mind pointing me in the right direction please? Many thanks, Gary.
(29.06.2005, 14:12)

GaryBadger:-
Actually, upon checking this problem seems unique to Firefox and Opera, not IE.....
(29.06.2005, 14:25)

GaryBadger:-
What a difference fresh eyes make! My problem was that I did not include the image height in the .image CSS attribute. All fixed now. Cheers, Gary.
(01.07.2005, 13:32)

Stu:-
Hi GaryBadger, I had spotted the extra space in the link tag, but have not bothered correcting it as I should be moving hosts soon (with a change of url) and will need to upload the whole site again.
(01.07.2005, 15:21)

Tomas:-
Hi Stu, been a fan of this website for some time now. is there any way of applying this for images of any size?
Thanks,
Tomas.
(06.07.2005, 18:46)

Tomas:-
hi,
think i got it. i just took out image from <div class="out image">

I was trying to put in a comment under the image but this was expanding as the text went on!
(06.07.2005, 18:50)

Tomas:-
hi Stu,

When I remove padding:5px from .in i get a
white line about 2px at the bottom of the picture in IE6!
Please confirm!
(07.07.2005, 22:43)

Tucker Bickler:-
Hey Stu, I'm using this technique for my Boy Scout Troop's Website. But, when I view it in IE, as opposed to FF, the buttons on the left do not show up. Here's a link if you'd like to look for your self: http://truaxpad.freewebsitehost.net/troop491/index.htm Coincidently my host has been acting up so try going to the page a little later if it doesn't show up immediatly. My email is tuckersworld@gmail.com . I would really like your help, you're the one who would know ;)
Thanks
(15.08.2005, 23:51)

Paz:-
Hi

I have just tried using this shadow idea and it's fantastic. I only have one additional requirement, and that is how can I get it to stay in the middle of the screen (horizontally and vertically).

I could use a 3x3 table and put this in the middle one, but is there a css way to do this?
(22.08.2005, 14:27)

Stu:-
Horizontal is fairly straightforward using margin:0 auto; for Mozilla etc and text-align:center; for older versions of IE.
But vertiacla align is not so easy as it is not supported in anything except tables at the moment.
(22.08.2005, 14:53)

Paz:-
Thanks Stu.
text-align centres the text; not quite what I wanted, but margin:0 auto works in IE6.
I have bookmarked your site, as I'm sure I will be visiting frequently :)
(22.08.2005, 16:19)

Richard:-
Hi Stu. New to CSS and was wondering... along the lines of Tomas -> Suppose you want a generic css template for your website. You want every image to have an appropriate drop shadow but image sizes vary from page to page. Is there a way to wrap a div around each image and shadow the div and not the image? Thnx!
(31.01.2006, 01:11)

gcyrillus:-
hello,
.. and adding for instance (wich is not valide css)
-moz-border-radius : 10px;

to the "shadow's boxes" you have round corners shadow in mozilla / firefoxe .

too bad it's not css1/2/3 "compatible" ...
(17.05.2006, 16:10)

Dave:-
Neat stuff all over the site. Thanks a lot!

Just FYI, I noticed on this page in my FF 1.5.0.9 browser that the image example is not centered in the box, but right-aligns to the box. It looks correct with IE6
(28.02.2007, 22:25)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page