09 March 2004
CSS Drop Shadows
A little while ago I was looking for a way to add CSS drop shadows to images. I wanted it for my gallery system - incogito. I started by playing with a background-image on the image, and adding a bit of bottom and right padding. This did not really work. I gave up for a little while due to having other projects I really should have been working on anyway.
Well, after a while I decided to get back to it. And in doing so found my way to this blog of Richard Rutter (Clagnut.com) which had the answer to my question. Via Clagnut I found my way to Dunstan's blog which also had a blog on the subject. I had been to Dunstan's before, and this technique just went to futher my good opinion of him and his site.
Anyway, on the very same day that I found Dunstans drop shadow technique an article was posted on A List Apart. This article was in a manner a follow up to Dunstan's, but with the added extra of being able to add drop shadows to block level elements, not just images. This was great for me, and I started playing.
It didn't take me long to realise that the ALA article used just a little bit to much code. And that it could be done easier.
Now, I draw your attention to my css drop shadow tests page which has an updated version of the ALA technique, and has incidentally gotten onto the CSS Vault - Thanks!
Yeah, the purpose of the blog was to direct you that page. Yes it was a bit long winded. But I am also one of those people that tell really long joked with bad endings. Go figure.
- Time: 16:15
- Wubb Development
Comments ( 11 )
Hasan
IE5 box model
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
Cheers!
Phil Baines
But the problem seems to be with vertical margins, not with padding or borders.
I used to think that IE only had problems with padding and borders on the box model. Margins still outside the overall width.
What seems to be happening, if I remember right, is that IE5 adds a 3px margin to the bottom of the innerbox. Why I dont know. I cant see how this is a box model thing, but I have used the escape hack in the same way to solve it.
I just dont understand why it happens.
p.s. I think I'm gonna have to fix that link. ;)
Hasan
Hasan
Phil Baines
No need to 'opps'.
Hasan
The IE Pixel Gap
Hasan
Phil Baines
Im not very good on the old RegEx front, but it seems to only change them to links when there is a forced space before and after the URI.
Hmmm. dammed regex. Gonna have to get my hands dirty and play with regex now.
Phil Baines
Anyway, thanks for the link. Even thought it taught be something new, I dont know if it is what is happening in this situation, because the 3px margin it being added to the bottom of the innerbox, as apposed to the sides of it, as in this example.
When I get a bit more time, I will play around with it and see what I can do.
Hasan
poker terms
poker terms
Sorry, commenting has been disabled for a while. I am getting a stupid amount of comment spam, and need to find a new way of doing things.
I will not publish your email address, but I may use it to get in contact with you.
HTML tags and entities display as source; they do not render. To create a live link, simply type the URL (including http://).