1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to put shadow on every images?

Discussion in 'CSS' started by kojakfilth, Aug 24, 2007.

  1. #1
    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
     
    kojakfilth, Aug 24, 2007 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This should work.

    http://www.dynamicdrive.com/style/csslibrary/item/css-drop-shadows/
     
    GWiz, Aug 24, 2007 IP
    kojakfilth likes this.
  3. FraserJilani

    FraserJilani Active Member

    Messages:
    174
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Wow, nice find GWiz, had been looking for something similiar for a while.
     
    FraserJilani, Aug 27, 2007 IP
  4. Qal

    Qal Peon

    Messages:
    92
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Qal, Aug 27, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    soulscratch, Aug 27, 2007 IP
  6. Qal

    Qal Peon

    Messages:
    92
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Looks slick though. Much better than normal CSS shadows. He should be aware of his options.
     
    Qal, Aug 27, 2007 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    @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.
     
    deathshadow, Aug 27, 2007 IP
  8. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    GWiz, Aug 27, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Rule #1 of programming - the less code you use, the less there is to break.

    Aka, simplify, simplify, simplify.
     
    deathshadow, Aug 28, 2007 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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.
     
    Dan Schulz, Aug 29, 2007 IP
  11. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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. :p

    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.
     
    GWiz, Aug 30, 2007 IP