eBay
  • Daily Deals
  • Collections
  • Sell Now!

Drop Shadows on your pics, without editing your images.

kensplace2
By Published by
Drop Shadows on your pics, without editing your images.
. Views . Comments Comment . 8 Votes

Drop Shadows on ebay listings....

Pictures are a important part of most ebay listings, this guide how to give a drop shadow effect on your pictures that hopefully will make your auctions more pleasing to the eyes.

It is not for the beginner, you do need to know how to save files and upload them onto your own picture host, and how to make small changes to code examples, but if you can do that, and follow instructions you should be ok.

Perhaps an example would be in order, so you  can understand what I mean by a "drop shadow"


Here are two example images, first without a drop shadow, the second with one.

               

You can do this manually in a paint package, but it would take some time, but this guide will tell you
how to apply it to any image, without editing that image at all!

*Important note, you MUST, and I repeat must change the url (address of the images) in the code
below to your own hosting, and upload the images to your own hosting BEFORE you list.
DO NOT USE THE IMAGES ON SOMEONE ELSES SERVER, as it uses up there bandwidth,
and at any point they could remove the image, or replace it with something else. So download the images by all means, but then save them on your own hosting, and update the links to point to that.

Firstly, a step that you only need to do once, is to grab the images used in the example code below, for the reasons explained above, and save them to your own server.

Next, when you list your auction you will need to put the following BEFORE your first image is shown.

<style type="text/css">
.img-shadow
{
  float:left;
  background: url("http://www.lsblogs.com/img/shadowalpha.png") no-repeat bottom right !important;
  background: url("http://www.lsblogs.com/img/shadow.gif") no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}
.img-shadow img
{
  display: block;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
}

</style>
Dont forget to use your own hosting for the .gif and .png files and to update the above to use your own URLS! The above code only needs to be put in once per auction.

For the more advanced who know CSS you could always save that as a seperate CSS file and import it, but all you really need to do is paste that before your first image.

Once thats done, its simply a matter of applying the effect to each image, your existing auction code will have lines in  like this

<img src="yourimagehost/yourfilename">

or similar (obviously with your own image urls in) you need to put

<div class="img-shadow">

BEFORE each image src line you want the effect to apply to.

and

</div>

AFTER each image source line you want the effect to apply to.

Example.

Original Line

<img src="yourimagehost/yourfilename">

would become

<div class="img-shadow">
<img src="yourimagehost/yourfilename">
</div>

Once you have done that (test it on one to make sure its correct) then the effect should be applied, as if by magic, your images will now be drop shadowed.

CSS can be used to apply many more neat effects to your auctions, I may write some more examples as I get time, but there are MANY tutorials on the net if this has whetted your appetite.





Choose a template

Additional site navigation