You are invited to Log in or Register a free Frihost Account!

Tool to create shadow effect for an Image using CSS

I wrote a PHP function that creates a shadow effect for an image object using only CSS styles. You could call the getImageWithCSSShadow function in code with various image objects - quickly creating shadows without using any graphics library calls (other than the ones involved in displaying the image in the first place). The PHP code is completely free - with no guarantees. It may or may not handle super-sized images very well. Not tested in all browsers - it seems that there is a small display variation in IE due to different interpretations of the CSS.

The CSS image shadow tool is here: CSS image shadow tool.

The tool generates the HTML that you'd need to make the same shadow effect on any webpage. So, if you have a one-time need for a shadow effect for your image, this will create your HTML.

For the web form or the function call, you need to supply the image URL, background color (to blend away to), shadow color (if blank, uses the image's average color - neat effect), shadow distance (1 to 20 pixels), blend strength, as well as "alt" tag for image (sets if left blank). Accepts color as HEX codes or by name.

Let me know what you think about it, and I can change the code. The source code only handles images, but could easily be rewritten to handle other objects (tables, paragraphs, blockquotes, etc.) as long as they have a set width and height. Also, a separate unit should probably be created to handle all other objects - any volunteers??
Hey thats a nice tool dude!!
Nice work!!
Keep it up!!
Expecting more like this!
All the Best

You should add it so you can enter the width and height of the image.
DanielXP wrote:
You should add it so you can enter the width and height of the image.
Is this so that you could save the server the trouble of getting this info from the image? You wouldn't really need to pass the width and height along since the graphics library gets that from the actual image... in other words - it would be impossible for the server to get the wrong info for width / height from the image -- if it is even able to get the image at all.

There are other ways to achieve this same effect with nothing but graphics calls which creates a new image that contains a shadow effect. I have similar code that does this already (let me know if anybody is interested and I can post it or make another tool like the first one). Using this method, creating a shadow on an image might look like this:

 <img src='' alt=''>
Ok, DanielXP --- you were right. The tool should have a way to supply the width and height. Well, now it does.

Due to the fact that the code can't get the width and height for image files that are not JPG, GIF, PNG - you must provide the optional width and height values. These are optional values - but if not passed, the code will attempt to get the values from the file -- if it can't the image is still rendered as 100 x 100.

The source code has also been updated to take these optional parameters.

Here is an example of a call for an ICO file: CSS Shadow on "adminicon.ico"
Looks good.

I would like to add one of those to my website.
Related topics
Need help with Dreamweaver
CSS Help...
Rotate images using css?
[man]Photoshop: Tutos en español.
Hover Buttons Completely with CSS
how to create a simple chat using winsock in visual basic???
Help With Positioning Background Image.
[Resolved]Using css to create a link.
Menu rollover
How change the property TARGET of tag A (LINK) using CSS?
How change the background-image of a page using CSS?
Having browser not pull files from the cache.
IE8 not allowing new random image on each page (PHP and CSS)
How do you Create a New Database using a php script?
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

© 2005-2011 Frihost, forums powered by phpBB.