Using CSS box-shadow to elevate an image

I am looking to create a background wrapper using CSS instead of an image. My goal is to add box shadow to achieve the same look as shown in the attached image.

I understand that I will need to use the box-shadow property for this task.

However, I am unsure about the exact way to implement it in order to replicate the desired output. I have experimented with the following code:

box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);

Answer №1

Give this a try:

Here's some HTML code:

<div class="box effect3">
    <h3>Effect 3</h3>
</div>

Now for the CSS:

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

You can find the original source of this information in this post by paulund.

Additionally, you may want to explore this JQuery plugin for more shadow effects:

Shadows with JQuery

Answer №2

Learn how to implement the Box-shadow: property in your CSS styling.

Sample CSS Code:

#example1 {
    -moz-box-shadow: 10px 10px 5px #888; //mozilla support
    -webkit-box-shadow: 10px 10px 5px #888; //webkit support
    box-shadow: 10px 10px 5px #888;
}

Keep in mind that browser compatibility may vary, especially with older versions of Internet Explorer not supporting certain CSS3 properties like box-shadow.

The box-shadow attribute allows for multiple shadows, each defined by specific length values (horizontal offset, vertical offset, blur distance, and spread distance), as well as optional color value and 'inset' keyword for inner shadows.

Syntax Overview:

box-shadow: none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]

For more detailed information on implementing box-shadow, click here

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

Using relative paths to showcase images in Node.js

I am currently working on my first Node.js MVC app where I am using native Node and not utilizing Express. One issue I am facing is the difficulty in displaying images from my HTML files through their relative paths. Instead of sharing my server.js and ro ...

The issue of PHP timing out occurring within a public function

After pulling a "large" SQL query from the database with 50,000 records and completing it in about 5 seconds, I run it through a function to create an HTML table. However, the process keeps timing out for some reason. If I limit the query to less than 30k ...

Troubles with Sizing in Twitter Bootstrap Modal

One issue I have encountered with my application is the varying widths of modals. Setting the width inline works well, but when the window is compressed it can cause part of the modal to be off screen, rendering it useless at smaller resolutions such as th ...

Tips for creating an onChange function in an input field using jQuery

I am looking to dynamically create inputs where each input has an `onChange` function with a variable. Here is my code: var distinct_inputs = 0; $('.icon1').click( function(){ distinct_inputs = distinct_inputs + 1 ; $('#insert-file&apo ...

I would like to embed the HTML page within the specified div element

When attempting to load a HTML page inside the div, I encountered the following issue: <a href="#1" title="" class="base-banner" page="www.google.com for example"> <img src="images" alt=""></a> <div id="landingpage"> </div> ...

chart for visualizing two rows with matching IDs and dates

I have been attempting to accomplish the following two scenarios: 1) When both ID and dates are the same in the chart, but the descriptions differ, I want to display them on separate lines. 2) If there is not enough room to show the row label, I would li ...

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

initializeSelection() { for (var i = 0; i < this.groupedContacts.length; i++) { for(var j = 0; j < this.groupedContacts[i].length; j++) this.groupedContacts[i][j].selected = this.selectedAll; } } evaluateSelectionStatus() { ...

Looking for a jQuery plugin that helps with form alignment?

In a blog post comment, I came across an interesting jQuery form alignment plugin: jQuery.fn.autoWidth = function(options) { var settings = { limitWidth : false } if(options) { jQuery.extend(settings, options); }; ...

Box without a border wrapping around it

I can't seem to figure out why the border I applied to a child div is not completely enclosing the element. I created two boxes using div tags and added a border to one of them. #box { height: 500px; width: 500px; background-c ...

Which is better to use: sql==true or sql===true?

Hey there, could you please take a look at this and thanks in advance! I'm currently working on developing a system for upgrading buildings in my game. I have set up a universal upgrade div that applies to all buildings. When the player clicks on a bu ...

The command `browser.find_elements_by_class_name('foo')` returned zero results

I'm encountering an issue with selenium while using Python 3.7. The website I'm working on has a structure similar to this: <html> <body> <div class="foo"> <div class="bar1">some ...

Update the font style of the navigation bar

Hey there! I recently downloaded a template from this website: . However, I'm facing an issue with the nav bar displaying strange fonts when using Vietnamese letters. For example, "Nước" shows up as all uppercase and the letters "uo" are shortened. ...

Recognize different HTML components when an event occurs

My application is equipped with a multitude of buttons, inputs, and other elements that trigger different events. I am looking for a way to easily differentiate between each element and the event it triggers. For instance, consider the following snippet f ...

Making a linked div with background image

I'm attempting to turn the small icons on this particular page () into clickable links. Each icon is contained within its own div, but no matter what I do: <div class="social-btn pinterest"><a href="http://www.pinterest.com/etc.etc.">&l ...

What is causing the issue of the div not being removed from the label renderer in three.js

Hello, I've been trying to solve this issue for the third time now without much success. The problem I'm facing is related to creating a div at runtime and then attempting to remove it after clicking on it. Although I've tried removing the d ...

Exploring HTML list with padding to determine optimal wrapping configurations

Having an issue with a section of links. The blocks for the links are lining up next to each other when the viewport is wide, but I want one block labeled MOBOT to drop down onto a new line in a small responsive space. The goal is for the MOBOT square to ...

Create a new variable and compile the sass/less file when it is requested

I'm exploring options to utilize Node.js or another server-side language to handle a specific type of request. For instance, receiving a request like this: The goal is to extract the value from the URL parameter and use it to dynamically update a var ...

Attempting to bind an input parameter using NgStyle in Angular version 2 and above

Issue: I am in need of a single component (spacer) with a width of 100% and a customizable height that can be specified wherever it is used in the HTML (specifically in home.html for testing): number 1 <spacer height="'200px'"></spa ...

In order to showcase an image ahead of another (stay tuned),

Help! I'm facing a dilemma here. I have an abundance of adorable animal images with unique facial expressions, but there's one problem - the eyes are hidden! I desperately want to showcase those captivating eyes. This is what my code looks like. ...

Display text below image in a reduced size for "mobile" screen

I am encountering an issue with my website where the font overlaps the image when viewed on a smaller device. How can I adjust the HTML or CSS to ensure that the text appears below the image on mobile devices? Below is the snippet of my HTML and CSS code: ...