Photoshop Question posted in
The official user guide can be found here.

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

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

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
  3. 0

    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);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search