Drop shadow on this type...

brandofamily · November 30, 2013

Can someone please help me code a drop shadow for the image on this page?
http://www.brandolinoimaging.com/Info-Pages/Pricing-and-Services

I'd like to put the shadow on all the single image box images. I got the corners rounded (obviously) but cannot figure the shadow code.

Hikin' Mike · November 30, 2013

Try this. Remove your rounded corners here:

.sm-page-widget-folders .sm-tile a, 
.sm-page-widget-galleries .sm-tile a, 
.sm-page-widget-nodes .sm-tile a, 
.sm-page-widget-pages .sm-tile a, 
.sm-page-widget-images .sm-tile img, 
.sm-tile-single.sm-tiles-uncropped .sm-image {
     border-bottom: 25px;
     }

Put this here:

.sm-tile-content {
    border-bottom: 25px;
    box-shadow: 5px 5px 5px #FFFFFF;
    }

brandofamily · November 30, 2013

Hikin' Mike wrote: »

Try this. Remove your rounded corners here:

.sm-page-widget-folders .sm-tile a, 
.sm-page-widget-galleries .sm-tile a, 
.sm-page-widget-nodes .sm-tile a, 
.sm-page-widget-pages .sm-tile a, 
.sm-page-widget-images .sm-tile img, 
.sm-tile-single.sm-tiles-uncropped .sm-image {
     border-bottom: 25px;
     }

Put this here:

.sm-tile-content {
    border-bottom: 25px;
    box-shadow: 5px 5px 5px #FFFFFF;
    }

Thanks, w/ a bit of tweaking I got it looking right...

.sm-tile-content {
    border-bottom: 25px;
    box-shadow: 6px 6px 10px rgba(0,0,0,.8);
-webkit-box-shadow: 6px 6px 10px rgba(0,0,0,.8)!important;
-moz-box-shadow: 6px 6px 10px rgba(0,0,0,.8)!important;
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
border-radius:25px;
    }

but then I noticed it effects my header images s those are single image blocks too... I guess I will be shadowless.

Hikin' Mike · November 30, 2013

brandofamily wrote: »
Thanks, w/ a bit of tweaking I got it looking right...
.sm-tile-content {
    border-bottom: 25px;
    box-shadow: 6px 6px 10px rgba(0,0,0,.8);
-webkit-box-shadow: 6px 6px 10px rgba(0,0,0,.8)!important;
-moz-box-shadow: 6px 6px 10px rgba(0,0,0,.8)!important;
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
border-radius:25px;
    }
but then I noticed it effects my header images s those are single image blocks too... I guess I will be shadowless.

You can always do what I did on my "The Photographer" link. I didn't use a photo block, just plain ole HTML/CSS.

brandofamily · November 30, 2013

Hikin' Mike wrote: »

You can always do what I did on my "The Photographer" link. I didn't use a photo block, just plain ole HTML/CSS.

Thanks. If I go that route what code would give me the rounded corners and shadow on the image in the html block?

Hikin' Mike · November 30, 2013

I created a class (.about-me) and put the text and image inside of that. The styled the text and image using CSS.

HTML:

<div class="about-me">
<p>Text here</p>
<img src="/my-picture-here.jpg" alt="" title="" />
<p>Text here</p>
<p>Text here</p>
</div>

CSS:

.about-me img {
    float: left;
    margin: 0 20px 10px 0;
    border-bottom: 25px;
    box-shadow: 5px 5px 5px #FFFFFF;
    }

brandofamily · November 30, 2013

Hikin' Mike wrote: »
I created a class (.about-me) and put the text and image inside of that. The styled the text and image using CSS.

HTML:
<div class="about-me">
<p>Text here</p>
<img src="/my-picture-here.jpg" alt="" title="" />
<p>Text here</p>
<p>Text here</p>
</div>
CSS:
.about-me img {
    float: left;
    margin: 0 20px 10px 0;
    border-bottom: 25px;
    box-shadow: 5px 5px 5px #FFFFFF;
    }

Thanks again.<img src="https://us.v-cdn.net/6029383/emoji/thumb.gif" border="0" alt="" >

Hikin' Mike · November 30, 2013

brandofamily wrote: »

Thanks again.

I have a typo on the CSS. It should say 'border-radius', not 'border-bottom'.

Drop shadow on this type...

Comments