Creating the Illusion of a 3D Painting Frame with CSS

I've been experimenting with CSS to recreate the canvas frame effect seen on paintings, but I'm having trouble achieving the 3D "rounded/wrapping sides" look. I can add shadows and rounded corners, but not the wrapping effect.

The image on the left is what I currently have, and I'm aiming to replicate the effect on the right side. Please disregard the background of the expected image.

Any suggestions or assistance would be greatly appreciated!

.image{
  display:flex;
  justify-content:space-evenly;
}
#actual {
  border-radius: 4px;
  box-shadow: 20px 4px 10px rgba(0,0,0,0.35), 40px 8px 10px rgba(0,0,0,0.15);
}
<div class="image">
  <img id="actual" src="http://lorempixel.com/output/cats-q-c-640-480-10.jpg">  
  <img id="expected" src="https://i.imgur.com/XD8Vdvv.jpg">  
</div>
css

Answer №1

To achieve a similar effect, you can utilize the CSS inset shadow property:

.image{
  display:inline-block;
  border-radius: 4px;
  box-shadow: 
    -2px -2px 1px rgba(0,0,0,0.5) inset,
    20px 4px 10px rgba(0,0,0,0.35), 
    40px 8px 10px rgba(0,0,0,0.15);
 width:320px;
 height:240px;
 
 margin:10px;
 background:url(http://lorempixel.com/output/cats-q-c-640-480-10.jpg) center/cover;
}
<div class="image">
</div>

Answer №2

Exploring the world of box-shadow layering for a unique design approach. Enjoy!

figure {
  display: block;
  margin: 1rem auto;
  height: 10rem;
  width: 10rem;
  border: gray 1px solid;
  border-radius: 3px;
  background: lightgray url('https://i.sstatic.net/BVW9D.jpg') no-repeat center center;
  background-size: cover;
  box-shadow: 2px 2px 0 gray,
              3px 3px 4px rgba(0,0,0,.9),
              6px 6px 12px 4px rgba(0,0,0,.25),
              0 0 14px 4px rgba(0,0,0,.15);
}
<figure></figure>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The anchor element does not trigger the activation process within a flexbox item

I have a flex container that contains multiple items. Instead of using the anchor tag to enable a link when clicked, I am setting the flex item class inside it. The element is comprised of three divs: The first div is a circle with an icon, the "second" d ...

htmlcssflexboxanchor

Position image in the center with two lines of text that adjust gracefully based on screen size

I am struggling to position an image alongside two lines of centered text. Currently, the image appears to the left of the text in my example, but what I really want is for the image to be centered with respect to the text and have a perfectly aligned imag ...

htmlcss

The element is anchored within a div, but its position is dependent on a JavaScript script

I am dealing with a situation where I have a div named "Main_Card" containing text and an icon. When the icon is clicked, it moves the "Main_Card" along with everything inside of it. The challenge arises when I need to set the icon's position as eithe ...

javascriptjqueryhtmlcss

Opacity: When the value is set to 0, the element remains invisible even when hovered over

I'm encountering an issue with configuring an element to have absolute positioning and a width and height of 100% while setting its opacity to 1.0. To summarize, here is the HTML code I am working with: <ul class="properties"> <li style ...

htmlcss

Center or left-align the divs

Can anyone offer assistance with this section of code? HTML: <div id="holder"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </div> ...

htmlcss

Using Javascript to display a Div element for a short period of time when the mouse is clicked

Having some trouble creating a hidden colored block that appears after a mouse press anywhere on the page, stays visible for 2 seconds, and then disappears until another mouse press triggers it again. I've tried using '.click(function' and o ...

javascriptjqueryhtmlcss

Stylize the selected item in a kendoui listview

I am utilizing a kendoui listview to showcase various signatures in an ASP.NET MVC 5 project. My goal is for the listview to allow selection and exhibit data based on a predefined template. Everything is functioning properly, except for an unwanted margi ...

jquerycssasp.netlistviewkendo-ui

Maintaining fixed position for cursor events in CSS

Here is a simple popup I created using tailwindcss to display project descriptions. Take a look at the code snippet below: // Code snippet here... I am facing an issue where both the container (outer div) and the first inner div have the same click event. ...

cssreactjstailwind-css

I am having trouble keeping my custom-styled bootstrap Navbar in a fixed position

I recently customized a bootstrap navbar by changing the color, background-color, and hover color. However, after making these modifications, I noticed that the navbar is no longer fixed in place. Despite my limited knowledge of CSS, I tried to find a solu ...

htmlcssnavbar

Having trouble getting vertical-align and background-position CSS properties to work when using JavaScript

I'm currently facing an issue with vertically cropping an image within a div. I've been struggling to make the vertical-align and background-position styles work as intended... Despite trying various options like vertical-align, background-posit ...

javascriptcss

Can you show me how to recreate a 502 gateway timeout error?

Looking for suggestions on how to create a page that exceeds 600 seconds to load? Any tips on triggering a 502 gateway timeout error would be helpful as well. ...

javascripthtmlcssajax

Can the menu be aligned to the bottom of the page next to

I'm a beginner in the world of web development and currently working on my very first website utilizing HTML and CSS. I have encountered an issue with my menu placement. Ideally, I would like it to be aligned horizontally at the bottom along with my l ...

htmlcss

Adjusting my menu layout causes my header image to be partially covered

I've been trying to make my menu fixed at the top of my website, but it keeps overlapping into my header image and doesn't look right. I've experimented with different solutions, but nothing seems to work. Here's the CSS code I used th ...

htmlcsswordpressmenufixed

Is there a way to center-align a link?

I've been attempting to center align a link on my website. This is the code snippet I have so far: <div class="cont"> <div class="form sign-in"> <h2>Welcome back,</h2> <label> <span>Email</sp ...

csshtml

Custom font causing vertical gaps in masonry grid layout plugin

My front page layout is arranged using the "Masonry" jQuery plugin, with each div containing an upper image div and a lower text div. The plugin is initialized like this: function use_masonry() { var container = document.querySelector( ...

jqueryhtmlcssjquery-masonry

Bolden the Text

Everything seems fine, but I'm looking to add more emphasis to this text .txt { font-weight: bolder; justify-content: left; text-align: left; margin-top: 100px; /* font-family: 'Redwinger Personal Use', system-ui, -ap ...

javascripthtmlcss

I'm currently attempting to determine the total cost of a series of operations, however, I am not receiving any results

Here is the code snippet from my HTML file: <tr> <td><input id="z1" type="number" oninput="calculateSubTotal()"> </td> <td>Shirts - WASH - Qty 1 to 4</td> <td>2.50 ea</td> ...

javascripthtmlcss

ng-class in AngularJs updates the class of all items within ng-repeat in the view

When applying AngularJs' ng-class, I encounter an issue where the class gets updated and applied to all items in the ng-repeat directive instead of just the specific item that was clicked. Even when using data-target="#collapse_{{ $index }}", it does ...

javascriptcssangularjsng-class

When hovering over the image, it enlarges and gradually becomes transparent, unveiling the hidden text beneath

I've been struggling to achieve the desired effect for quite some time now, putting in hours of effort without success. Essentially, I am aiming to create a div that showcases an image. When the mouse hovers over the image, it should zoom in and fade ...

htmlcss

Adjust the heights of certain headers in an HTML table, not all of them

Here is the link to my JSBin: https://jsbin.com/xofaco/edit?html,css,output I am facing an issue with an HTML table that has both nested headers and regular headers. My goal is to make all headers equal in height, specifically I want columns labeled "four ...

htmlcsshtml-table