DigiStyle Plugin

From september 2012 DigiStyle is no longer supported or updated.

digistyle150x150You can use this plugin to add a special effect to your images (it could also be used on other elements like buttons e.g.) just by adding a class to the object!

We wanted to create some stunning effects to our website images but wanted this to do it "on-the-fly" in Joomla! The idea popped up to create a plugin which could do this with some fun features in it. Not only the sweet effect of Reflection is implemented but also a way to create shadows, round corners and even animated images!

The plugin uses the jQuery javascript library to achieve the effects integrated into this plugin. Because of the work of some great javascript developers we could create this plugin, so our special thanx go to:

With some easy to use parameters you can adapt the effects to your own style and you don't have to use/remeber any editor tags. Just insert your image in your article and assign a class-effect to it.This way you can use the effects only for the images you want them to have effects!

And that's how simple it is! But a picture says more than words, so here we go...

Reflections

slogo_colorbgThe image at the left has the "reflex" class added to it. The default parameters are used which can be set through the plugin parameters in the backend.

The reflection height is set 0.5 and the reflection opacity is set to 0.2.

 


DropShadows

slogo_colorbgThe image to the right has the Shadow effect added to it. The default parameters are used which can be set through the plugin parameters in the backend.

The Shadow left and top positions is set to 4, the Shadow Blur is set to 2, the Shadow Opacity is set to 0.5 and the Shadow Color is set to #FFFFFF (white).

 

Puffy Effect

slogo_whitebgThe image to the left has the Puffy effect added to it. This effect can only be seen when you move your mouse-cursor over the image. If an image is set with a hyperlink (href) clicking on the image will go to the link specified. The default parameter is slightly adjusted and can be set through the plugin parameters in the backend.

The Puffy Duration (duration of the animation) is set to 1000 milliseconds which is equal to 1 second.

 

Round Corners

The Roundcorner plugin has several classes so you can vary the display style of the corners. The default parameters are changed slightly and can be set through the plugin parameters in the backend.

The Corner radius is set to 16, the Corner background color is set to #FFFFFF (white), the Corner padding is set to 4(px), the Corner border size is set to 4(px) and the Corner border color is set to #AAAAAA (light-grey).

Classes used in the samples below are (in the correct order): flatC, roundC, roundT, roundB, roundTL and roundTR.

slogo_colorbgslogo_colorbgslogo_colorbg

slogo_colorbgslogo_colorbgslogo_colorbg

So, go to the download section, download the DigiStyle Plugin, install it in Joomla!, publish the plugin and start adding classes to your images.