Drop shadow

Jim S

unread,

Apr 18, 2012, 5:40:35 AM4/18/12

to

Is there an easy way to create a drop shadow on thumbnails?
--
Jim S
Tyneside UK
www.jimscott.co.uk

Ronx

unread,

Apr 18, 2012, 6:05:33 AM4/18/12

to

Jim S formulated the question :

> Is there an easy way to create a drop shadow on
> thumbnails?

One way is to use CSS3:

<img alt="" height="203" class="shadow"
src="images/picture_small.jpg" width="200"
alt="thumbnail of picture.jpg" />

and the CSS

<style type="text/css">
.shadow {border:none; box-shadow: 15px 15px 3px
#333333; }
</style>

Change the numbers to suit your requirements.

Note: This requires a CSS3 compliant browser,
such as FireFox 4 or later, IE9 or later.

The alternative is to use a graphics editor to
modify the images.

--
Ron Symonds - Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp/wf-menu.aspx
Microsoft is closing this newsgroup - for details
of why and where to go see
http://www.rxs-enterprises.org/fp/newsgroup-closure.aspx

se

unread,

Nov 26, 2012, 4:52:01 PM11/26/12

to

"Jim S" <j...@jimXscott.co.uk> skrev i meddelelsen
news:159qssxqmqnhq$.dlg@jimXscott.co.uk...

If you'll accept a solution less than optimum.
You could wrap the picture in a div like the example below.
To se the result, find a picture of 200px x 200px.
Or modify to suit another picture size. Alternate, you could
make a background picture of essentially the same size as the
picture, and put it into the wrapper div . A picture that have
soft transparent edges and roundings. The position relative
does hide two of the picture-edges in both carrying outs.
The last described method gives a professional look. It should
not be nessesary to put the picture itself in a picture editor. It's
a bit tricky matching the colours in the first method - shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled</title>
<style type="text/css">
#con{
background-color:#CCCCCC;
margin:0 auto;
padding:100px
}
.shadow {
background-color:#BDBDBD;
border: 1px #BFBFBF solid;
width:200px;
height:200px;
margin:0 auto;
}
.imag {
position:relative;
right:5px;
top:3px;
background:url('images/yourpic200x200px.jpg') #BCBCBC no-repeat;
height:200px;
width:200px;
margin:0px auto;
border: 1px #BCBCBC solid;
text-decoration:none;
}
</style>
</head>
<body>
<div id="con">
<div class="shadow">
<div class="imag"></div>
</div>
</div>
</body>
</html>

David Webber

unread,

Apr 8, 2013, 9:41:45 AM4/8/13

to

"Ronx" wrote in message news:jmm3lq$2da$1...@dont-email.me...

I believe it is advisable to include a couple of proprietary equivalents to
cover as many browsers as possible. EG:

.box03s
{
-webkit-box-shadow: 3px 3px 3px #c0c0c0;
-moz-box-shadow: 3px 3px 3px #c0c0c0;
box-shadow: 3px 3px 3px #c0c0c0;
}

I've been experimenting with CSS3 eg at

<http://www.mozart.co.uk/information/illustrations/index.htm>

(including drop shadows). But be careful: with CSS3,, it is starting to
get very easy to incorporate some really tasteless html effects :-)

Dave

-- David Webber
Mozart Music Software
http://www.mozart.co.uk/