So Elegant Themes finally added box shadows to it’s features (If you want to see some simple examples of what can be done, they even provide a live demo.). I’m not gonna lie – this makes me really really happy as I have been using box shadows all over the place in all of my designs for years and, while I enjoy CSS, it can be frustrating to shade, or blur, or spread ‘just right’ without loads of trial and error. Now, with the visual builder, adding box shadow to virtually anything is a breeze!
Tech Tip: Keep in mind, however, the CSS property for box-shadow is not the same as the one for text-shadow – they are very much different. The good news, of course, is CSS is still super pervasive and adding ‘text-shadow: 1px 1px 1px black;’ can easily be tossed in the Custom CSS field of any module or style.css file.
So what about my favorite box shadow uses you ask? I like to keep things simple so I typically just throw down a box shadow under. Consider this handsome fellow:
Simple image with no box shadow.
Preset box shadow applied to the image module (not the image).
To get the box shadow under I simply selected preset #4 under the Box Shadow properties of the image module:
BUT OH NO what is that spacing on the right and left!?
Keep in mind that the CSS will be applied to the MODULE itself and not the IMAGE. So this means if your image does not consume the entire module width, you’ll get this weird effect. What can be done about that, you ask? Enable ‘Force Fullwidth’ from the Size settings in design.
But no worries; either resize your image or enable Force Fullwidth to have your image consume the container.
The same settings but with right and left MARGIN set to 20px in the image module to bump it off the edge.
So that’s Gotcha #1 when using the native box shadow settings on a Divi image module is to set the image to force fullwidth:
Gotcha #2 might be handling box-shadow properties on hover. I previous wrote on using box shadows on image with CSS here, but what about a hybrid method using the native Divi box shadow for the image, but CSS on hover only? Let’s investigate that…hover over the 2nd image…
The same settings but with right and left MARGIN set to 20px in the image module to bump it off the edge.
CSS ID box_shadow_hover_image applied to add a hover box shadow effect.
What I did was add a CSS ID (it could be a class) to the 2nd image and then added this CSS to this page:
#box_shadow_hover_image:hover {
box-shadow: 0px 12px 18px -6px rgba(0,0,0,1.0);
}
Et voila! Box shadow changes on hover!
Now go on and build beautiful.
Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.
Recent Comments