What are the steps to produce a 3D picture with a stylish border?

Transforming an image into a painting with a 3D perspective and adding a frame to it can create a unique piece of art.

To achieve the painted look:

And for adding the frame:

The provided code focuses on achieving the painted effect so far. To add the frame in a 3D perspective, further modifications are required.

.sh {
  --valorshadow: -20px 30px 10px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(var(--valorshadow));
}

.box {
  --x: 10px;
  --y: 30px;
  clip-path: polygon( 0 calc(var(--x) + var(--y)), var(--y) var(--y), calc(100% - var(--y)) var(--y), calc(100% - var(--y)) calc(100% - var(--y)), var(--y) calc(100% - var(--y)), 0 calc(100% - var(--x) - var(--y)));
  margin: 30px;
  transform-origin: left;
  transform: perspective(1000px) rotateY(35deg);
  outline: var(--y) solid rgba(0, 0, 0, 0.4);
  outline-offset: calc(-1*var(--y));
}
<div class="sh">
  <img src="https://c4.wallpaperflare.com/wallpaper/391/773/307/art-artistic-artwork-creative-wallpaper-preview.jpg" class="box">
</div>

To create the frame with a 3D perspective, additional CSS properties need to be applied while maintaining the existing structure.

htmlcssimagecss-transforms

Answer №1

To maintain the outline visible, you can make adjustments to the clip-path. Refer to the snippet provided in the previous question found here.

.box {
  --x: 10px;
  --y: 30px;

  clip-path: polygon(0 var(--x), var(--y) 0,
      100% 0, 100% 100%,
      var(--y) 100%, 0 calc(100% - var(--x)));
  margin: 30px;
  transform-origin: left;
  transform: perspective(1000px) rotateY(35deg);
  outline: var(--y) solid rgba(0, 0, 0, 1);
  outline-offset: calc(-1*var(--y));

}
<img src="https://picsum.photos/id/1015/728/600"  class="box">

You can also create a more realistic frame by using the following code:

.box {
  --x: 10px;
  --y: 30px;
  --o:10px;

  clip-path:polygon(
       0 calc(var(--x) + var(--y)),var(--y) var(--y),
       calc(100% - var(--y)) var(--y),calc(100% - var(--y)) calc(100% - var(--y)),
       var(--y) calc(100% - var(--y)),0 calc(100% - var(--x) - var(--y)));
  -webkit-mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0);
          mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0);
  margin: 30px;
  transform-origin: left;
  transform: perspective(1000px) rotateY(35deg);
  outline: calc(var(--y) + var(--o)) solid rgba(0, 0, 0, 1);
  outline-offset: calc(-1*(var(--y) + var(--o)));

}
<img src="https://picsum.photos/id/1015/728/600"  class="box">

https://i.sstatic.net/ofzK2.png

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

Attempting to make initials fade and slide out upon mouseover using jQuery

I've been experimenting with jQuery to create a unique effect where hovering over my initials in the header expands the containing div and reveals my full name letter by letter. However, I'm facing some challenges and could use some guidance on t ...

javascriptjqueryhtmlcss

Is there a way to use CSS to generate a disappearing triangle-shaped div that will only vanish when clicked directly on the triangle and not when clicked on the surrounding overflow area?

In a different discussion, it was mentioned that the method used to create a CSS triangle allows for triggering the hover state or click event only when the cursor is inside the triangle. There is a demo provided to demonstrate this with the hover state. ...

javascripthtmlcss

How can I align the map div directly below the form field?

Looking at the layout of the page, I'd like to position the map below the coordinates field in the form. As a newcomer to styling, I could use some assistance in accomplishing this task. You can find the original source code for reference on the webpa ...

htmlcssforms

What is the method to dynamically modify the value of location.href using vanilla javascript?

I have a button that looks like this: <button type="button" class="play-now-button" onclick="location.href='www.yahoo.com'">Play Now</button> However, I want to change the location.href value using vanilla JavaScript. The code below ...

javascripthtmldebugging

Accessibility considerations for anchor tags with no content

Currently on our website, there is a component that utilizes an <a> tag with a background image set by the following CSS: a.class-name::after { content: url('image.png'); } The anchor tag itself has no visible content (appears as < ...

htmlcssaccessibilityanchor

Adjust the font size of MaterialUI icons using CSS

I am currently facing an issue where I need to increase the size of my icons by 200px, but they are defaulting to 24px which is the standard for all Google Icons. Any suggestions on how to solve this? HTML <div class="col span-1-of-4 box"> <i ...

htmlcssiconsmaterial-ui

Arrange all the items in the list to be aligned on a single

Here is the code and styles I have in my project: I want to align the texts and span style. My default code looks like this: body { direction: rtl; } div { position: absolute; top: 30px; right: -100px; height: 300px; overflow-y: scroll; ba ...

htmlcssflexboxstyles

What is the best way to create a straightforward menu for my HTML game?

I have been working on a basic HTML game and it seems to be functioning more or less. I'm wondering if it's possible to create a simple menu with an image in the background and a "click to start" button within the same file. Any suggestions or ti ...

javascripthtmlmenu

Condense a lineup of names into only two rows

I have a challenge where I need to showcase a list of names separated by commas, pulled from an array in my React component. The HTML output should appear as follows: <div> <span>Liza</span>, <span>Eric</span>, <span>Mic ...

javascriptcssreactjs

It is not possible for me to restore a previously deleted element from the table

<table class="files-table table"> <thead> <th>Filename</th> <th>Type</th> <th>Status</th> <th oncli ...

javascripthtmlcss

Guide on showcasing active users currently online within the system utilizing CodeIgniter

I'm currently working with CodeIgniter and trying to display live online users using this framework. I attempted some code, but I'm feeling a bit lost now. I found a helpful video that I learned from: Alternatively, I followed these steps as sh ...

phpjqueryajaxhtmlcodeigniter-3

What steps can I take to stop search engines from crawling and indexing one specific page on my website?

I'm looking for a way to prevent search engines from indexing my imprint page. Is there a method to achieve this? ...

htmlseo

Deleting an item from a Vue.js list

I'm currently working on a project to develop a basic webpage that allows users to add or remove textboxes using vue.js. new Vue({ el: "#app", data() { return { list: [] }; }, methods: { deleteFromList(index) { this ...

javascripthtmlcssvue.jsweb

Choosing specific elements with Selenium using OR/AND operations in Python

I am encountering an issue while working with Selenium using Python. Here is a preliminary example of my code snippet. <body> <button info="content1" aria-label="1">"Click 1"</button> <button info ...

pythonhtmlselenium

Creating various rows within a loop can be achieved by using conditional statements to determine

I am faced with a challenge of handling an array of images, among other properties, and I aim to achieve the following outcome: https://i.sstatic.net/BYajY.png As the images reach the end of the container (which fits 4 images on desktops and adjusts for ...

javascriptcssreactjsbootstrap-4flexbox

refreshing the webpage with information from an API request

I am completely new to web development, so please bear with me. I am attempting to make a simple API call: const getWorldTotal = async () => { const response = await fetch('https://cors-anywhere.herokuapp.com/https://health-api.com/api/v1/cov ...

javascripthtml

The positioning of the input element within the div is set to

Currently, I have a container div for textbox (div.tb) with position:relative. Inside this div, there are input and placeholder divs, both of which have position:absolute. The issue lies in the fact that while the input text is vertically centered, the pl ...

htmlcssposition

Discover the seamless method of transferring data from an HTML5 form to a PHP page for processing without the need to refresh the page or manually navigate to the PHP file

When creating a website, I encountered an issue with a form that requires the user to select three options from select elements and then click a search button to search the database. The problem is that PHP does not retrieve the form data unless the button ...

phphtml

Stable navigation bar implemented with a grid design

I'm struggling with creating Navbars in Grid Layout. https://codepen.io/Aeshtray/pen/BdqeZL For mobile view, I want the Navbar to be fixed horizontally (as currently coded), but once reaching a width of 500px, I need it to become vertically fixed on ...

csslayoutnavbarcss-grid

Having trouble with the functionality of Bootstrap 5 carousel?

I've been attempting to integrate this carousel into my Bootstrap 5 webpage. I found it on Codepen - https://codepen.io/sahil-verma/pen/wxXryx Thus far, I've copied the code into my webpage and linked the corresponding CSS within style tags, sim ...

htmlcsstwitter-bootstrapbootstrap-5