Joomla Code, Tips, and Tricks

Dropshadows in SOBI2 Using CSS 3.0

Written by Nicholas Myrna Saturday, 10 September 2011 18:00

SOBI2 has a powerful templating system, which you can combine with CSS 3.0 tricks to do some fantastic things. Recently, we had a project that combined our JMaps Google mapping module with SOBI2 to create a directory of local churches. The client wanted to have the vCard images of the Churches in the directory to have drop shadows around them to provide texture.

Prior to CSS 3.0, the way to do this would be to add a background image and offset it. There is a problem with that method when working with a directory. The vCard images have a maximum length and width, and the images are resized if they are too big when uploaded. They are almost always too big when dealing with directory entries, because non-technical people just upload whatever massive image they have lying around. Very few people will take the time to appropriately size an image. So when images are uploaded by regular folks, you are going to end up with differently sized images due to proportional reduction. That makes putting an offset background image behind the small vCard image difficult. Luckily in CSS 3.0, there is a way around this using a drop shadow that is generated strictly by CSS and not using a physical image at all.