My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
CSSTips  
Updated Feb 4, 2010 by jeff.johnston.mn@gmail.com

3D Header

If you want the header to have a nice 3D effect (shown above) then add the following three lines (below) to the header styling. The header-bg.gif image is available in the distribution.

.jmesa .header td {
    background-image: url(../images/table/header-bg.gif);
    background-repeat: repeat-x;
    white-space: nowrap;
   ...
}

Drop Shadow

Drop Shadow option for table, which gives a nice aesthetic effect (shown above). Note: the effect does not look nice with a table caption.

  • To make it work put the following script in your code to execute when the page is loaded. Here the imagesPath is the path to your images directory. The following imagesPath in the JMesa web site resolves to '/jmesa/images/table/'
  • Also include the following images
    • shadow_back.gif
    • shadow180.gif
    • shadow.gif
    • corner_tr.gif
    • corner_bl.gif
<script type="text/javascript">
	$(document).ready(function() {
	   addDropShadow('${imagesPath}');
	});
</script>

You can also change how far the dropshadow extends by modifying the dropShadow attribute in the jmesa.css file.

.jmesa .dropShadow {
    padding: 10px 14px 14px 10px;
}
Powered by Google Project Hosting