Back to Top
The nuts and bolts for
Creative web development

DMXzone CSS3 Drop Shadows

“Add beautiful shadows to any page element”

The DMXzone CSS3 Drop Shadows is built with CSS3 and takes full advantage of the new CSS3 properties to make great looking, image less, shadows. With the extension you create a container to which you can add different shadow effects on and fill it with other content elements like headings, text, tables, images and more.

You can choose from several types of shadows such as curved, perspective, curled, lifted and raised. Set the side for the shadows, rotation degree and add an inset shadow. Changing the background color and setting the width and height of the element is very easy. All this is greatly presented in the Dreamweaver design view.

Overview

Features Highlights:

  • Add shadows to any page element - You can add awesome CSS3 shadows to any page element, including text, table, image and more... 
  • Background Color - You can add any background color to your page element.
  • Set a rotation degree - Choose the rotation angle of your element.
  • Inset Shadow - Add inner shadow to your div.
  • Fully resizable -You can easily set the width and height for the div container.
  • Great Dreamweaver design preview - The edited region is greatly presented in Dreamweaver design view.
  • Full cross browser unobtrusive CSS3 support - The shadows are supported by any modern browser, including IE9 but won't be displayed where not supported.

* For complete Features overview press the Features in Detail

Features

  • Add shadows to any page element - You can add awesome CSS3 shadows to any page element, including text, table, image and more...
  • Lifted shadows - This effect adds shadows on the edges to create a realistic feel that the element is lifted. You can choose different sides: left, right and both.
 
 
 
 
 
  • Curved shadows - This effect adds shadows on the edges to create a realistic feel that the element is curved. You can add it to the left, right, top, bottom, left and right, and also top and bottom to your element.
 
 
 
 
 
  • Perspective shadows - Perspective shadows can be placed on the left, right and both sides at the same time.
 
 
 
 
  • Raised shadows - Raised shadows can be placed on the left, right, top and bottom.
 
 
 
 
  • Curled shadows - Adds a curled effect to the sides of the element. Curled shadows can be places on the left, right and also on both sides at the same time.
 
 
 
  • Background Color - You can add any background color to your page element.
 
 

  • Set a rotation degree - Choose the rotation angle of your element.
 
 
 
  • Inset Shadow - Add inner shadow to your div.
 
 
  • Pick up ID name - You can change the name of the element to fit your needs.
 
  • Fully resizable -You can easily set the width and height for the div container.
 
  • Great Dreamweaver design preview - The edited region is greatly presented in Dreamweaver design view.
  • Full cross browser unobtrusive CSS3 support - The shadows are supported by any modern browser, including IE9 but won't be displayed where not supported.

Showcases


  • The Old Bakery Showcase

    For this showcase we used DMXzone CSS3 Drop Shadows to add shadow to the thumbnail images and also shadow, inset shadow and rotation to the featured products and weekly recipe.

  • Facebook Video Presentation Showcase

    For this showcase we designed a Facebook Fan Page with our Dreamweaver extension of the same name. The video presentation is executed with the HTML5 Video Player and wrapped up in a HTML5 Parallax ...

  • Facebook Product Presentation Showcase

    For this showcase we designed a Facebook Product Presentation template with the help of 3 awesome DMXzone extensions. With the Facebook Fan Page we designed our page within Dreamweaver, added the ...

  • HTML5 Video Player with Shadows Showcase

    In this showcase you can explore the improved support for the latest YouTube player functionality and present your videos in an awesome way. We also added DMXzone CSS3 Drop Shadows to the player ...

  • Feature Destinations Showcase

    For this showcase we used the DMXzone Supersized for the background image, DMXzone Responsive Text in order to create both text lines scalable, and DMXzone CSS3 Drop Shadows for the content shadow. ...

  • Property For Sale Showcase

    For this showcase we used the Universal Responsive Design Template. The CSS customized Universal CSS Navigation Menu serves as a website navigation through the pages and has curved shadow added with ...

  • Yacht For Sale Showcase

    We created a menu with the Universal CSS Navigation Menu. To show the location we used DMXzone Google Maps. With the DMXzone CSS3 Drop Shadows we added various shadow effects: for the menu and the ...

  • Facebook Recipes Page Showcase

    For this showcase we used the Facebook Fan Page to create a facebook page. On the top we have a menu made with the Universal CSS Navigation Menu. With the DMXzone CSS3 Drop Shadows we added different ...

  • Interior Design Agency Showcase

    For this showcase page we used our DMXzone Nivo Slider to create a slideshow. With the DMXzone CSS3 Drop Shadows we added different effects on the page: for the header we used curved shadow with ...

  • Travel Page Showcase

    For this showcase we styled the featured destination image with lifted shadow on both sides and added curled shadows to the bottom images, respectively on the left and on the right. Additionally ...

Videos


Requirements

Type: Suite
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Browser: Opera 10+, iPad, IE 9, Safari 5+, Firefox 4+, Chrome 10+, Opera 11
Used Technologies: jQuery, CSS
Tags: CSS3, shadows, Dreamweaver, extension. jQuery

The DMXzone CSS3 Drop Shadows runs on Dreamweaver 8 but we do not support it officially.

History

Version 1.0.1

  • Full Dreamweaver CC and Extension Manager CC support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article