Creating a 3D-looking border using CSS

I'm looking to create a 3D frame border for an image using a specific texture. I want it to look like this example: https://i.sstatic.net/jdJHk.jpg

I attempted to achieve this effect with the following code:

<style>
.woocommerce-product-gallery__image {
position:relative;
margin: 50px;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
}
.woocommerce-product-gallery__image:before{
position: absolute;
Content:'';
Left:-50px;
top:-50px;
bottom:-50px;
right:-50px;
Background:linear-gradient(1deg, #666, #ccc);
Background: url('https://aduvan.ru/wp-content/uploads/photo-gallery/wood-texturs/wood-texture_(8).jpg');
Z-index:-10;
Box-shadow:-5px 0 5px -2px #000
}
.woocommerce-product-gallery__image:after{
position: absolute;
Left:-20px;
Top:-20px;
Bottom:-20px;
Right:-20px;
Background: url('https://aduvan.ru/wp-content/uploads/photo-gallery/wood-texturs/wood-texture_(8).jpg');
Content:'';

Z-index:-1
}
</style>

However, the result was not what I expected:

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

htmlcss

Answer №1

Feel free to check out this demo: https://jsfiddle.net/5mcuwLb2/

If you are already utilizing an image, why not create a design similar to a frame border and apply the following CSS:

#preview {
    width:200px;
    height:300px;
    background:red;
    border: 25px solid transparent;
    border-image-slice: 27 27 27 27;
    border-image-width: 25px 25px 25px 25px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("imageUrl");
}

https://i.sstatic.net/LFBBT.jpg

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

Blurry font rendering occurs when an element is scaled using CSS

I want to add a scale animation to a bootstrap button, but the text appears blurry. I've tried all the solutions mentioned here. How can I resolve this issue? Below is the code snippet (text is slightly less blurry in the snippet compared to my pr ...

htmltwitter-bootstrapcssbootstrap-4

I am trying to create a Python function that takes Python code as input and produces rich IPython output in HTML format. Can anyone guide me on how to

How can I create a function foo() that takes in Python code and returns rich HTML output similar to what is displayed in IPython or Jupyter notebook? pycode = ''' from matplotlib import pyplot as plt plt.plot([1, 2, 3]) plt.show() '&apo ...

pythonhtmljupyteripython

Determine the hue of the scrollbar

My web page features a customized vertical scrollbar within a div box, and I have managed to create a horizontal scrollbar using CSS and jQuery. Now, I am looking for a way to match the color of the custom horizontal scrollbar with the rest of my design. ...

jquerycsscolorsscrollbar

Introducing LightZAP v2.54 (silent update2), the revolutionary Lightbox custom plugin that seamlessly launches when the page loads using the designated tag name (#img1)

As I have the LightZAP plugin installed on my website as an alternative to Lightbox, I am looking to trigger it (to display an image gallery with a specific image) when the page loads using the following link: index.html#img1, if possible. I have come acr ...

javascripthtmllightbox

parallax scrolling can be a bit bumpy

While working on a website, I've incorporated a slight parallax effect that is functioning almost perfectly. However, I've noticed that the foreground divs tend to jump a little when scrolling down the page. At the top of the page, there is a di ...

javascriptjquerycssparallax

Is there a way to create a clickable component for triggering an AJAX call without using a Submit button?

Just starting out with JS/JQuery programming, so please excuse any mistakes or unclear explanations. Any feedback is welcome, even if not requested specifically. I am working with multiple drop down lists that are populated dynamically by data from SQL Ta ...

javascriptjqueryhtmlajax

What causes a row to spill out of a liquid-filled container along the horizontal axis?

I need to add a footer to my website, but when I do, it causes the content to overflow on the x-axis. Removing the 15px margins in the .row class is not an option for me because that would require me to redo all of the CSS code. <script src="https:// ...

htmlcssbootstrap-4overflow

What is the best way to position elements at the top and bottom of a container?

I'm struggling to align one of the elements in my container to the top while using flexbox. All elements are currently aligned to the bottom, but I want a specific text to be at the top of the container. jQuery(document).ready(function($) { ...

htmlcssflexbox

Is there a way to UPDATE a div without having to RELOAD the entire page in it?

SOLVED -SORT OF--- After much frustration, I finally found a solution to my problem. By adding window.location.reload(); in my code where the submit button is, I was able to close the div successfully. // Collapse Panel on submit $("div#panel").on(' ...

phpjqueryhtmlrefresh

The br tag in HTML cannot be utilized in conjunction with JavaScript

I am currently working on a project involving HTML and JavaScript. I have a "textarea" where data is inserted into the database upon pressing the "Enter key." However, I am encountering two issues: Currently unable to save data like "Lorem Ipsum" (the ...

javascripthtmljquery

Creating a Full-Width Search Input in Bootstrap 4 Navbar

Is there a way to extend the search input width to 100% in the navbar? https://i.sstatic.net/R1Nyi.png The search input field currently has a limited width: <nav class="navbar navbar-light navbar-dark bg-inverse"> <a class="navbar-brand" href ...

cssinputbootstrap-4navbar

On certain websites, the footer may appear distorted or incorrectly displayed when viewed in the IE 9 web browser

Currently experiencing an issue with the display of the footer in IE9. On some pages, the footer is not properly fixed and overlaps the middle of the content. However, this problem does not occur when using other web browsers. Here is the code that I am c ...

css

Using jQuery to smoothly scroll horizontally to a specific div element

In my project, I aspire to create a layout similar to the BBC website: with a side scroll from section to section. Here is my code and the issue I am encountering: jsFiddle: http://jsfiddle.net/neal_fletcher/kzQFQ/2/ HTML: <div class="wrapper"> ...

javascriptjquerycsshtml

Activate a pointer cursor when hovering over a TextField in Material-ui design

Hey there! I'm new to Material-ui/ReactJS and I have a question. I'm trying to change the cursor to a pointer when hovering over a Material-ui TextField, but it's proving to be quite challenging. The default behavior is 'cursor: text&ap ...

cssreactjsmaterial-ui

Sophisticated filter - Conceal Ancestry

Check out this snippet of my HTML: <td> <a class="button" href="#"> <input id="download">...</input> </a> <a class="button" href="#"> <input id="downloadcsv">...</input> </a> </td> I am ...

javascriptcss

Exploring the Versatility of Axios

Today, I implemented an AJAX request using Axios in JavaScript to submit form data. While the requests are being sent successfully, it seems that the backend is not able to receive the username and password information from the frontend. What could be ca ...

javascriptphphtml

How to use jQuery to disable td and ul elements

Has anyone successfully disabled a "td" or "ul" element using jQuery, similar to how we disable textboxes and other input types? I attempted to use the "prop" and "attr" functions in jQuery, but they did not seem to work. Is there a way to achieve this? ...

jqueryhtml

How can I convert a JSON template to HTML using AngularJS?

As someone who is just starting out with AngularJS, I am facing an issue where the HTML tags in a JSON file are not being encoded when rendered in HTML using AngularJS. Is there a specific method in AngularJS that can help with this? This is what my HTML ...

javascripthtmljsonangularjs

Arranging Images with CSS Overlapping

I am striving to make the blue block and red block scale proportionally with the webpage, while also maintaining their position without any shifting up or down. As depicted in this gif, the blocks somewhat accomplish what I desire when scaling diagonally, ...

htmlcssimageresizeoverlap

The checkbox labeled "Shipping Same as Billing" is not functioning correctly. I have included my JavaScript code below, can someone please help me identify what I am overlooking? (Only JavaScript code is provided; HTML is

I'm having trouble transferring data from a 'shipping' address to the 'billing' address section. I've included all my code, but nothing seems to copy over when the check box useShip is selected. All the HTML code is provided f ...

javascripthtml