How can I add a drop shadow effect to just two sides of a <div> element? Maybe using CSS3 gradients and border images for a unique look

I am attempting to achieve an effect where a div appears to fade into the background of the content. The concept involves having a simple border: 1px #000 solid; on the top and bottom of the div, along with a large inset shadow on the left and right sides to give the illusion that the div extends back behind the page, as if there is a slit in the background allowing the div to pass through.

Currently, box-shadow applies to all sides simultaneously. Therefore, I need a method to create a substantial shadow on the left and right while still being able to interact with the content beneath the shadow. This is the beauty of CSS shadows - they allow interaction with the underlying content. Using an image would not work because it would obstruct interactions below it.

One individual on this post recommended using border-image by incorporating a CSS3 gradient into it. Understanding this concept confuses me as I attempt to implement a CSS3 gradient on one side of a div's border.

Can anyone provide assistance?

Here is the webpage for reference, specifically regarding the image slider section:

htmlcssgradientshadow

Answer №1

Utilize multiple box-shadows by separating them with commas. If you need further clarification, feel free to ask and I'll explain in more detail.

Answer №2

Check out the solution provided in this post. It suggests creating a gradient effect using multiple border colors and utilizing rgba() to mimic transparency.

Keep in mind that achieving a consistent look across different browsers may be challenging, especially since Firefox 5 still requires a valid url() parameter for the border image attribute.

If you're looking for an alternative, consider using CSS masks (compatible only with Webkit).

Answer №3

I experimented with styling neighboring elements to create a shadow effect around the content. While it may not be perfect or easily scalable, I believe it resembles what you were looking for.

This technique involves using two divs on the sides to generate lateral shadows, and an additional div at the bottom to simulate the lower shadow of the surrounding divs.

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

Effects of jQuery Show / Hide on adjacent select box operations

I created a pair of select boxes where the visibility of one is controlled by the other. Initially, the controlled select box (#select02) works perfectly on page load as long as I don't show/hide it by selecting options in the controlling select box ( ...

javascriptjqueryhtml

Create a pagination system in CodeIgniter for displaying data

Having trouble implementing paging in the search functionality of my result table. I want to display just 10 rows but can't get it to work properly. I tried reading about Pagination on https://codeigniter.com/, but I'm still struggling to unders ...

phphtmlcodeigniterpagination

Is it possible to customize the appearance of these buttons using CSS to change their color, text color, etc?

Looking to customize the buttons on a site that uses templates that can't be modified directly. I have to rely on a CSS file to style the elements as the buttons are created using tables within table cells. How can I change the background color of the ...

htmlcss

Enhancing the functionality of radio buttons through event changes and optimizing related features

I am searching for a more efficient method to reuse functions that serve a similar purpose. For example, I would like to modify various radio buttons that toggle a hide class on different divs. JSFiddle Link How can jQuery be used to create a reusable fu ...

javascriptjqueryhtml

When the state changes, initiate the animation

Currently, I am working with Vue.js and need to animate a navigation menu. My goal is to display two li elements when a user hovers over one of the navigation buttons. At the moment, I have set the data type showActivities to false by default and changed ...

javascriptcssvue.jsanimationvue-data

Issue with Font-Awesome icons failing to display properly when using the BootstrapCDN

Trying to integrate Font-Awesome icon fonts using the BootstrapCDN link with what seems like the latest version: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> The link has been added to the <hea ...

htmlcssfontsfont-awesome

How can I use JavaScript or JQuery to retrieve the HTML content as a string from a specific URL?

How can I extract the URL of a link from a webpage and add it to my code without an ID for that specific link? Is there a way to search based on the content within the <a> tag? ...

javascriptjqueryhtmlajax

Leveraging jQuery's .animate method to create engaging search box animations

Greetings esteemed individuals... I am currently working on enhancing the search component for my application... http://jsfiddle.net/SkyKOG/K8utq/24/ input{ display:none; width:0px; color:#999; } Initially, I only had a simple search box so ...

javascriptjquerycssformsjquery-ui

Column spilling over with cards

Having a card with a form in it, I wanted to implement a y-scroll bar to control the visibility of the form on the page. However, it seems that the columns are extending beyond the boundaries of the card. .card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2 ...

cssangularcol

use angularjs directive to position a div absolutely aligned with the right edge of another div

I am attempting to use an angularjs directive to align the right side of an absolute div with another div. The code is working, but I am encountering an issue where the children divs are slightly wider than their parent, causing the offsetWidth value to be ...

htmlcssangularjs

The concepts of width and min-width in CSS allow for controlling

I have a table with the following styles applied: width: auto; min-width: 98.5%; When viewing in Chrome, the table inside a div appears to only be about 50% of the width of the containing div. However, in IE9, the table occupies the full width. Checking ...

css

Using jQuery Datepicker, showcase two distinct datepickers on a single page

Currently, I am utilizing the jQuery [Datepicker][1] on a website, but I am facing challenges when attempting to display two datepickers on the same page in different manners. The first one should only appear once you click the text box, and once a date i ...

javascriptjqueryhtmlwebdatepicker

Verify whether an accordion is in the open or closed position

I am trying to determine if an accordion item is currently open or closed in Framework7. Can anyone provide guidance on how this can be accomplished? To open an accordion item, I have been using the following code: myApp.accordionOpen(".accordion-item"); ...

htmlhtml-framework-7

Switch the video source using JavaScript

I've been experimenting with creating a custom dropdown (ul li list) that allows users to select a different video to play, which is then loaded into the background of the page. Once the user clicks on the dropdown, it should switch to a different vi ...

jqueryhtmlvideo

Tips on using Jquery to animate an element to a specific pixel measurement

My expertise lies in executing the following code: $("#nurseView").animate({"left": "+=100px"}, "slow"); However, I am facing a dilemma. How can I animate an object to exactly 1576px on the X-axis regardless of its current position? The code snippet abov ...

javascriptjqueryhtml

The datepicker feature has been programmed to only allow past or present dates

I've integrated a date picker on a website like so: <input type="text" id="popupDatepicker" placeholder="Select Date" name="from_date" class="input" size="50" /> Here's the script being used: $(function() { $('#popupDatepicker&apos ...

jqueryhtmldatepicker

The concept of Border-Merging within Material Design Tables

Is there a way to implement the following border style in a Material Design Table: border-collapse: collapse; I tried adding a border to .mat-cell: .mat-cell { border: 1px solid; } However, in some instances, the border appears to be 2px. The reas ...

cssangularmaterial-design

Apply the CSS style to make one element identical to another, while modifying a single property

I am currently working with the following CSS: input[type="text"] { border: 2px solid rgb(173, 204, 204); height: 31px; box-shadow: 0px 0px 27px rgb(204, 204, 204) inset; transition:500ms all ease; padding:3px 3px 3px 3px; } My goal i ...

css

Update Symfony form class to replace the HTML5 input type from "text" to "number"

Attempting to implement an input with the "number" type for HTML5 frontend support has been a challenge. Here is my form class: class MyType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { ...

phphtmlformssymfony

Spin: twist beyond 360 degrees or less than 0 degrees

Attempting to rotate an arrow indicating wind direction using the transform: rotate() property. The data for rotation is retrieved from an API fetch, and conventional measurement of wind direction involves indicating where the wind is coming from. Therefo ...

javascriptcssreactjsrotatetransform