drop shadow on tables

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

drop shadow on tables

Post by Burrito »

I've been seeing a lot of tables recently that have a drop shadow (just on the bottom and right side...

unfortunately I haven't bothered to view source to figure out how it's done and now I can't find any that do it.

I assume this is done with CSS, can someone please advise me on how to make a table with a shadow....preferable without images if possible.
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post by nielsene »

I suspect they're using CSS, but you can try to fake it with just border-right, border-left. Otherwise check out the CSS or Design articles at alistapart.com... They have a nice articles or two on drap shadowing anything, but it uses images and nested divs
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Code: Select all

<html>
	<head>
		<title>feyd's drop shadow example</title>
		<style>
			.container
			{
				position: 	relative;
				left: 		3px;
				top: 		3px;
				width:		auto;
				height:		auto;
				display:	inline;	/* for flow-around */
			}

			.box
			{
				position: 	relative;
				left: 		-3px;
				top: 		-3px;
				z-index:	5;
				background:	white;
				border: 	1px solid gray;
				width:		auto;
				height:		auto;

				/* beautify */
				padding:	2px 4px;
			}

			.shadow
			{
				position:	relative;
				left: 		auto;
				top:		auto;
				z-index:	1;
				background:	silver;
				border: 	1px solid gray;
				width:		auto;
				height: 	auto;

				/* beautify */
				margin-top: 13px;
				margin-bottom: 10px;
			}

			/* beautify */
			body
			{
				background: whitesmoke;
			}
		</style>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec neque eget elit viverra commodo. Proin ut magna. Etiam dapibus feugiat diam. Ut gravida, magna quis eleifend facilisis, est arcu mollis dolor, sit amet bibendum diam velit vestibulum lorem. Sed pede libero, hendrerit eget, feugiat non, euismod eget, est. Etiam facilisis. Praesent eu arcu. Nulla facilisi. Ut feugiat odio eu felis. Pellentesque libero enim, ornare ut, porttitor nec, mollis eu, magna. Pellentesque in purus ut ligula eleifend scelerisque. Mauris lacinia nunc varius tortor. Mauris ac tortor. Morbi ante libero, blandit ut, aliquet vel, tincidunt eget, lectus. Duis felis. Mauris a augue ac risus varius facilisis. Proin sodales sem vitae wisi.

		<div class="container"><div class="shadow"><div class="box">Cras semper venenatis arcu. Nullam laoreet. Nulla nec enim id libero laoreet faucibus. Cras gravida condimentum neque. Morbi faucibus, dui sed aliquam pellentesque, orci orci ullamcorper pede, sit amet adipiscing sapien odio nec mi. Sed sed lorem at elit tristique varius. Praesent molestie. Mauris vitae enim ut pede tristique ultricies. Maecenas volutpat. Suspendisse eu tellus nec neque dapibus pharetra. Fusce eu ante. Donec ultrices. Proin dapibus, sem hendrerit semper tristique, felis eros fermentum urna, ac dictum dui eros in felis. Nulla facilisi. Vestibulum sapien est, accumsan et, auctor nec, vestibulum pulvinar, nisl. Ut in tellus vel urna sollicitudin lobortis.</div></div></div>

		Cras ullamcorper semper nulla. Curabitur dictum nulla sit amet neque. Maecenas fermentum consequat sem. Maecenas dictum lorem quis pede. Ut leo. Donec elementum. Integer odio. Fusce vel mauris. Vivamus magna. Duis quis urna eget tellus pharetra semper. Vestibulum ultrices, purus id vehicula vulputate, lectus lorem gravida tortor, at consectetuer nibh wisi ut nunc. Mauris purus lorem, dictum ac, vehicula vitae, eleifend sit amet, lacus. Donec quam nisl, commodo ac, rutrum id, aliquam ut, velit. Ut ultrices felis sit amet libero. Proin ut turpis. Morbi luctus ante non wisi. Etiam neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

		<p>Sed quis diam id sem mattis aliquet. Sed dui enim, fringilla sit amet, molestie id, porta a, purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sit amet justo eget augue venenatis pellentesque. Vestibulum posuere ante sit amet lorem. Nunc justo metus, malesuada sit amet, ultrices ac, venenatis eget, erat. Nunc sed velit vitae lorem ornare lacinia. Phasellus varius, neque ac sodales auctor, velit orci lobortis justo, a egestas dolor velit eu nulla. Donec ac lacus. Praesent vitae leo. Ut velit erat, porta et, sollicitudin ut, varius quis, dui. Sed consequat diam quis eros. Nam eget est et pede venenatis cursus. Nullam interdum.</p>

		<p>Integer in eros nec quam ultrices scelerisque. Donec sodales euismod nibh. Aenean at erat eget mauris rhoncus faucibus. Maecenas sed leo a lacus euismod lacinia. Etiam viverra placerat est. Vestibulum vitae quam et enim scelerisque adipiscing. Maecenas at risus non leo pellentesque mollis. Aenean pede. Vestibulum dui. Maecenas lorem erat, dapibus eget, posuere vitae, consectetuer nec, ipsum. Nam in ligula. Vivamus suscipit leo non tellus. Vestibulum interdum. Nunc tristique.</p>
	</body>
</html>
Post Reply