Advanced background styling in CSS

I am looking to design a link with inner shadows on both sides (left and right) while keeping the rest of the item transparent.

My desired effect is illustrated below:

The challenge I'm facing is that I do not know the exact width of my link in advance. Therefore, I need a solution similar to the following:

background: url(left-shadow) left center;
background: url(right-shadow) right center;

However, this needs to apply to a single element only. Any suggestions on how to implement this?

I understand that using multiple backgrounds is a possible solution, but it may not be compatible with IE8:

http://www.quirksmode.org/css/multiple_backgrounds.html

Is there an alternative method that would work with at least IE8 (and preferably also with IE7)?

cssbackgroundbackground-image

Answer №1

For this particular situation, utilizing the CSS "Sliding Doors" is recommended as it introduces some additional markup, but functions effectively until support for CSS3 multiple background properties grows more prevalent.

To learn more about this technique, you can refer to: A List Apart "Sliding Doors" technique

Answer №2

The latest version of CSS, CSS3, allows for the use of multiple backgrounds using this syntax:

background: url(left-image) left center,
            url(right-image) right center,
            url(bottom-image) center bottom;

Answer №3

Wow, I'm fascinated by this! My recommendation would be to incorporate three different backgrounds into your design.

background:url(bottom-shadow) left bottom, url(left-shadow) left center, url(right-shadow) right center;

Make sure the bottom shadow also features the gray-white gradient. Pay attention to the commas separating each background layer.

Answer №4

CSS Inner Shadow - learn how to create an inner shadow effect

.innerShadow_css
{
   -moz-box-shadow:inset 0 0 11px #000000;
   -webkit-box-shadow:inset 0 0 11px #000000;
   box-shadow:inset 0 0 11px #000000;
}

Discover more about CSS inner shadow 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

Combine various CSS rectangles into one cohesive design

Hey there! I have 3 unique rectangles defined in my css stylesheet. #background .icicle#ice1 { left: 24%; top: 0%; width: 2%; height: 8%; } #background .icicle#ice2 { left: 26%; top: 0%; width: 2%; height: 16%; } #backgro ...

css

Ways to fix the bootstrap image zoom issue

Here is my code snippet: https://i.sstatic.net/BJoAP.png Currently, I am attempting to ensure that the thumbnails adjust to the background zoom. I have been struggling to remove the black borders surrounding the thumbnails. If anyone can provide assista ...

javascriptcsshtmltwitter-bootstrapbootstrap-4

An easy guide to animating multiple sections of progress bars individually in Bootstrap

My Bootstrap code successfully animates a section of progress bars when the user views it. However, it currently animates all progress bars on the page rather than just those in the viewed section. This means that when the user moves to another section, th ...

javascriptcsstwitter-bootstrap-3progress-barjquery-waypoints

Style your div with CSS to include a border around the content

As a CSS beginner, I am attempting to create a div element with a border, similar to the design shown in the image below: https://i.sstatic.net/fGy2u.png Here's my HTML code: <div class="mystyle"> <h3>header message<h3> <p& ...

htmlcss

In what location is it possible to define this CSS property?

After inheriting a website, I am encountering CSS issues that are driving me crazy. There is a mysterious div element with a height of 185px that is causing content truncation problems. The strange part is that this height is not defined anywhere in the st ...

cssheight

JavaScript issue causing unexpected behavior in top and left positions

I've been experiencing an issue with my JavaScript code on an HTML file. Despite changing the top or left values, the image does not move as expected. I've spent hours searching for a solution and even tried copying tons of different code snippet ...

javascripthtmlcss

What is the best way to adjust the size of the browser window when opening my page?

I have created a single page scrolling website specifically designed for children. The optimal viewing experience is at 1200 pixels wide. Is there a method to set the window size to that by default when visitors land on the site? ...

javascripthtmlcss

What can I do to stop my list items from dropping below the menu even when there isn't enough space?

I'm facing an issue with my menu and despite several attempts, I can't seem to resolve it. In Firefox, everything looks fine, but in other browsers, the last anchor tag inside my menu keeps collapsing underneath. I've tried various solutions ...

csscss-float

Can jQuery Alignment be Adjusted Based on the Size of the Browser Window?

After browsing through several websites, I managed to create a basic pop-up box using javascript to showcase my contact details. While I am content with its functionality, I have encountered an issue where the popup window is positioned absolutely rather t ...

javascriptjquerycsspopupcss-position

Unable to hide content in Shopify using @media

How can I hide a Facebook like button when the browser window is resized to a certain width? This is the code I am using: @media all and (max-width: 300px) { .fb-like { float: right; display: none; } } While this code works on regular websites, it do ...

cssmobilemedia-queriesdevice

Exploring nested styles within Less to style both parent elements and their children

Is there a way to apply styles to an element and its descendants? For example: .datepick-month-header, .datepick-month-header select, .datepick-month-header input { background-color: black; color: #fff; font-weight: bold; } In some less documentation, I ...

cssless

Is it possible to detect text overflows in HTML using only CSS?

Is there a way in 2013 to use CSS to detect and respond to text overflowing an HTML element? I've read about using JavaScript for this, but I'm curious if the CSS spec offers a solution. For example, having a fixed size div like this: <div c ...

htmlcssoverflowselectorspecifications

What is the number of steps jQuery animates in?

Exploring my creative side, I decided to create my own custom animate function. Struggling to achieve a seamless animation effect, unlike the smooth transitions produced by jQuery. I'm curious about the formula they utilize to determine the ideal num ...

javascriptjquerycssalgorithmanimation

Space within a receptacle

As a newcomer to bootstrap5, I am encountering whitespace issues on the left side of my screen. While everything looks fine in full-screen mode, the whitespace around the image persists when I test responsiveness. https://i.sstatic.net/gZTq5.jpg Despite t ...

htmlcssbootstrap-5whitespacecol

Attach a tab-icon to a picture

I am looking to add a tab to the bottom border of an image within a gallery. This tab needs to be right up against the image border with no space in between. When clicked, this tab should activate a small JavaScript function that will display the content ...

javascripthtmlcsstabsimage

placing a command button to the right side

Currently, I have successfully implemented a graphical solution using jsf2.2 primefaces 6.0 to allow users to view, download, and print pictures through the galleria component of primefaces. However, I am facing an issue with positioning the print command ...

cssprimefacesjsf-2.2

Disappearing act: CSS3 transform - rotate makes font vanish

When applying a simple css3 transformation rule to an html element which contains various other elements like h1, h2, inputs, and img, I encounter the following issue: div{ -moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skew ...

cssfontsrotationtransform

Aligning vertical pills to the right using Bootstrap framework

Here is the relevant code snippet that I am working with: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <scrip ...

htmlcsstwitter-bootstrapright-align

Collapse or display div elements with jQuery - First close all other elements before opening the selected item

The Problem at Hand Currently, the script is expected to hide all elements with the "gallery-collapse" class and reveal the specific content based on the clicked link. However, sometimes multiple divs might appear simultaneously when switching between ite ...

javascriptjqueryhtmlcss

Avoid using the FONT tag with the execCommand function

Is there a way to hide the next element using execCommand configuration? Font Tag <font color="xxxxxxx"></font> I am facing an issue while creating a simple editor for a project. I am struggling with CSS formatting and the font tag is not he ...

htmlcssfonts