CSS lets you style your webpages easily, very easily. You can define over a hundred text styles in one page (of course your page will come out looking like a circus tent) but it’s about the ease and flexibility that comes with using CSS in webpages.ThemeShock has a CSS coder generator that will help you add different drop shadow effects to your images in a few simple clicks. You choose the effect and it writes the code; effects can be added to the bottom, sides, top & bottom, bottom left, bottom right, top right and bottom left or in diagonal corners.
Before you begin; check the dimension of your image (the one you want to add the effect to). The code generator has a predefined upper and lower limit of 130 – 347px for the image width and height. If your image dimensions exceed this you can always edit the width and height later. The code also lets you determine the opacity and blur of the shadow. You cannot upload your image in the code generator, a default image will be used so you can preview the effect.
From the drop down menu, choose which shadow effect you like, every time you change any of the selectors a new code is generated so make sure you use the very latest one. Once you’ve picked the effect you like, set the width and height for your image using the horizontal scrolling bar. Use the right and left arrow keys when you want to nudge the button just a little bit. Set the blur and opacity and code will be generated. Increasing or decreasing either of these parameters will create a new code.
Once everything is set, copy the CSS code into a CSS file and name it for you webpage (or theme). The HTML code that goes in your webpage is also generated (it’s unique for each effect you choose from the drop down menu), copy it and place the image code (img src=” “) where it says ‘your code here’.
The best thing about this code generator is that it works and it’s free. It does have dimension constraints for images, but they can be edited from the code. If you use a transparent image (like the one above), it will give a dull gray background. You can edit the background color later from the code. (Edit code line background: #ccc). The code also give a 5px frame to all images, you can edit the frame as well but increasing and decreasing the width will hide or reveal the shadow more than necessary so it’s best left alone.
