How to put shadow on every images?

How to put shadow in every images i posted on my blog? A wordpress blog www.kojakfull.com coz i think it will be better if the images there will have shadow..

please advice.

Kojak

 

This should work.

http://www.dynamicdrive.com/style/csslibrary/item/css-drop-shadows/

 

Wow, nice find GWiz, had been looking for something similiar for a while.

 

This is a much better solution, I believe ›› http://ajaxian.com/archives/onion-skinned-drop-shadows-with-javascript

 

Using Javascript for something that can be done without it, IMO is pointless.. and it's probably slower.. and that method requires behavior.js.

 

Looks slick though. Much better than normal CSS shadows. He should be aware of his options.

 

@GWiz - That's an 'ok' solution, but like much of what is on dynamic drive it's got an extra container for no reason, excess positioning and worst of all, an IE specific hack that does absolutely nothing. ALL we need is one containing wrapper and a content wrapper.

The CSS:

* {
	margin:0;
	padding:0;
}

	
.dropshadow {
	width:320px;
	margin:16px 8px 8px 16px;
	background:#DDD;
}

.dropshadow .wrapper {
	position:relative;
	width:320px;
	top:-8px;
	left:-8px;
	border:1px solid #CCC;
	background:#EEE;
}

Code (markup):

The HTML:

<div class="dropshadow"><div class="wrapper">
	<h2>Let's test our drop shadow</h2>
	<p>Some test text to pad it out.</p>
	<p>Some test text to pad it out.</p>
	<p>Some test text to pad it out.</p>
</div></div>

Code (markup):

That's it really. Since KojakFilth is just asking about an image - he doesn't even need the inner .wrapper DIV, and could just apply everything that's on .wrapper to the image (and set it to display:block so IE doesn't add extra spacing after it)

.dropshadow {
	width:320px;
	margin:16px 8px 8px 16px;
	background:#DDD;
}

.dropshadow img {
	position:relative;
	display:block;
	width:320px;
	top:-8px;
	left:-8px;
	border:1px solid #CCC;
	background:#EEE;
}

Code (markup):

and the HTML:

<div class="dropshadow">
  <img src="images/whatever.png" alt="my image" />
</div>

Code (markup):

That's all you really need for a 'flat' shadow.

@Qal - don't you just love solutions that take 8-12k of javascript and CSS to replace maybe 80 bytes of HTML? NOT.

Seriously, that's a lot of code to include for little gain even if one is using images... and separate images at that.

Get a load of this - variant on sliding doors...

The first one does not trip the .js that's applying the styling - the latter three all use the SAME .js, the last one having an entirely different class applied.

http://battletech.hopto.org/html_tutorials/borderimages_javascripted/template.html

The directory is unlocked so you can see the bits and pieces.
http://battletech.hopto.org/html_tutorials/borderimages_javascripted

The kicker - unified images... the first two shaded border examples share the same image - the only reason there's a second image is the different border on that bottom example. Exact same javascript for all three of the image styled boxes. The key to the javascript is it looks for classes containing "_simplebox" - when it finds those it inserts the extra DIV's for the borders, then changes _simplebox to _jsbox.

It degrades well too. Turn .js off, you get flat borders. Turn images off but keep .js and css on, you get flat borders (kinda - that last one...)... .js and CSS off, all those div's end up meaningless.

Tomorrow if I have time, I'll write up some text on HOW the CSS behind it works and give a few more direct details.

 

Well not all scripts are all optimized, there's always different ways, and likely better ways to get the same result. I was simply providing a quick means of getting what was requested. A few extra kb of data probably isn't going to make a huge difference anyway since his website isn't likely to start receiving tens of thousands of views a day where every kb would matter. It's nice to have optimized code, but unless it really benefits you, there isn't a whole need for it.

 

Rule #1 of programming - the less code you use, the less there is to break.

Aka, simplify, simplify, simplify.

 

Jason is right, Gwiz. Both he and I adopted a minimal markup approach to HTML a couple years ago, and we've jumped FAR above the rest of the pack (even some of the world's best Web designers, including the Godfather of CSS himself, Eric Meyer) in terms of coding ability because of it.

 

Well I commend you on your abilities, but not everyone is an expert or has the time to become an expert such as yourself. For the average person, a few extra lines of code are not going to crash the internet.

It's like doing a half ass job on an exam, sure it won't get you an A+ but you still get the job done and it's still acceptable.