drop shadow effect using css

Discussion in 'CSS' started by dhomba, Jun 22, 2007.

0
  1. #1
    Can we create a drop shadow effect using css on a table?
     
    dhomba, Jun 22, 2007 IP
  2. ninjamuk

    ninjamuk Peon

    Messages:
    305
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    There are a few different methods. If the table will always be the same size, you could put it in a container div and set an exported image as the bg of the div. OR, since you're already using tables, you could use a 4-cell technique as seen below.

    [​IMG]

    In the above example, the content cell is sized by the content inside of it. The top-right cell is a 1x9-pixel image that is set to repeat-y (up and down). The bottom-left image is much the same, just flpped 90 degrees and set to repeat-x. The last cell, bottom-right, is just a 9x9 image that does not need to scale/repeat.

    The collapsed version of the above technique looks like this.

    [​IMG]

    PM me if you need any help with things.
     
    ninjamuk, Jun 22, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    If you don't need a fading dropshadow, and aren't worried about transparancy either, you can try the following - which is really simple.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" 
	content="text/html; charset=iso-8859-1" 
/>

<title>Simple dropshadow</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

body {
	background-color:#F00;
}

.dropshadow {
	width:320px;
	/* 
		  8px for dropshadow, 
		+ 8px to distance from body edge
		= 16px margins top and left 
	*/
	margin:16px 0px 0px 16px;
	overflow:visible; 
	background-color:#800;
}

.dropshadow .content {
	/* 
		By moving the contents up and to the left, 
		we reveal the background of it's container
	*/
	position:relative;
	top:-8px;
	left:-8px;
	padding:8px;
	background-color:#EEE;
}


</style>

</head><body>

<div class="dropshadow">
	<div class="content">
		<p>Test Content</p>
		<p>Test Content</p>
		<p>Test Content</p>
		<p>Test Content</p>
		<p>Test Content</p>
		<p>Test Content</p>
	</div
</div>

</body></html>
    Code (markup):
    Gimme a few, I'll post up the image version I'm using these days.
     
    deathshadow, Jun 23, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    battletech.hopto.org/for_others/dropshadow/template.html

    That's a fairly simplistic version using a few positioning and margin tricks to minimize the number of elements involved, yet have all three corners styled as fading.
     
    deathshadow, Jun 23, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    http://battletech.hopto.org/for_others/dropshadow/template_slidingdoors.html

    another technique - this one uses three much larger images, but is a lot less code to implement...
     
    deathshadow, Jun 23, 2007 IP
  6. dhomba

    dhomba Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks deathshadow, it really helped..
     
    dhomba, Jun 26, 2007 IP
  7. bgillingham

    bgillingham Peon

    Messages:
    109
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    If anybody needed some PHP that does this for image objects (could be rewritten for any style-able object), I wrote a tool that also generates the HTML that you'd need to get an image shadow effect. The tool is here: CSS Shadow for Images. You can either download the PHP code so that you can dynamically call "getImageWithCSSShadow" for any image object, or use the tool as needed to create HTML that you can put into your webpages.

    It is pretty much the same effect that you're talking about here - with different sized "<div>" containers positioned at relative locations with their a calculated color value between the shadow color and background color based on shadow distance and blend strength. This tool will take any two colors, but if you leave the shadow color value blank, it uses the average color of the image - it is a subtle cool effect.

    regards,
    Brian Gillingham
    http://BetterWindowsSoftware.com
    ...a better way to find and buy software
     
    bgillingham, Jun 29, 2007 IP