3D effect with image as a background of another image

I'm trying to add a 3D effect to an image, the final result should look like the following: (illustrated in Photoshop)

I've tried playing with the css3 property box-shadow but it doesn't provide a real 3D effect, as you can see in the following image: (I know I can set blur to 0 and change sides, but as you can see - there's a difference in the corners between what I'm trying to achieve to the box-shadow result)

After not finding a only-CSS solution - I've created the following image and set it as a background of the image itself.

JSFIDDLE * Please notice - I'm using the bootstrap framework.

HTML

<img src="" class="img-responsive framed">

CSS

.framed{
background-image: url('URL-OF-THE-FRAME');
padding-left: 5px; //The thickness of the "line"
padding-bottom: 5px; //The thickness of the "line"
background-size: cover;
}

.img-responsive{
display: block;
max-width: 100%;
height: auto;
}

Which gives the result I was looking for - but, if you re-size the window (try enlarging the result's window in the jsfiddle) a distance between the image and the frame is being created.

Should I try another tactic or am I missing here something?

Answers


You need to use percent padding so it addapts to the size of the image/container when window is resized.

DEMO

CSS :

.framed{
    background-image: url('http://www.6pix.co/images/shadow-3.png');  
    padding-left: 2.9%;  
    padding-bottom: 2.9%;  
    background-size: cover;  
}

Need Your Help

C++11 match_regex doesn't match a simple pattern

c++ regex c++11 match

I've been having some trouble with the new regular expression library in C++. Here's a simple example:

sortf rfc dates using bash

bash sorting date rfc

How can I sort a text file which contains rfc dates?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.