CODEWITHSUNDEEP
cssimageshadow
Jhonatan Sandoval
Jhonatan Sandoval

Reputation: 1293

CSS - How to apply box-shadow to a image rounded

Here is my simple CSS code:

header img {
    box-shadow: 0 0 40px 5px #CCC ; 

}

This look like this:

enter image description here

My logo.png was rounded with photoshop: http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png

Upvotes: 0

Views: 1937

Answers (3)

disinfor
disinfor

Reputation: 11558

Here's some code:

HTML

<div>
    <img src="http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png" />
</div>

CSS

img {
    border-radius:50%;
    -moz-border-radius:50%;
    width:185px;
    height:170px;
    box-shadow:10px 10px 3px rgba(0,0,0,.5);
}

And the jsfiddle: http://jsfiddle.net/fQY2h/1/

Upvotes: 0

shin
shin

Reputation: 3659

Try THIS. Hope this helps. I used border-radius to make the div round.

CSS :

.header {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png) no-repeat center center;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

Upvotes: 1

Andrew
Andrew

Reputation: 20111

Apply border-radius:50% to your image, it should look about the same and fix your shadow. But it looks like your rounded image doesn't line up perfectly with the edge of the image (Their is extra transparent space at the tops and sides). So you will need to edit it to be lined up with the edge of the canvas more perfectly.

Upvotes: 1

Related Questions