Utilize the parent element's background color as the color for the box-shadow styling

Question

Utilize the parent element's background color as the color for the box-shadow styling

Currently working on enhancing a radio button design by incorporating an inset box-shadow.

If you're interested, check out this CodePen showcasing my progress so far.

The main challenge I'm facing is getting the background of the .radio-button <div /> to dictate the color of the box-shadow. In my initial approach, the color was specified as #fff, which proved effective on a white backdrop but not on a gray one.

Assigning it as currentColor results in the box shadow picking up the border-color value (#333);
Opting for inherit seems to deactivate the box-shadow, particularly noticeable in Chrome. It makes some sense as I suppose inherit might not apply to certain property components here.
Omitting any specific color selection defaults to using the color value, typically resulting in black.

Any suggestions on how to achieve this desired effect without resorting to JavaScript?

html css

Answer 1

Answer №1

Unlike currentColor, CSS doesn't offer a direct way to access an element's background color value. However, you can simulate this by setting the text color as the background color and using background-color: currentColor. This trick involves creating a separate element for the label text with its own font color.

It's worth noting that while the keyword inherit works for certain CSS properties like box shadows, it must be used alone in a declaration. You cannot apply it singularly within a set of values. Therefore, full inheritance of the box-shadow property is necessary; trying to inherit only parts of it won't yield the desired result if the parent element doesn't have a box shadow to begin with.

Answer 2

Unlike currentColor, CSS doesn't offer a direct way to access an element's background color value. However, you can simulate this by setting the text color as the background color and using background-color: currentColor. This trick involves creating a separate element for the label text with its own font color.

It's worth noting that while the keyword inherit works for certain CSS properties like box shadows, it must be used alone in a declaration. You cannot apply it singularly within a set of values. Therefore, full inheritance of the box-shadow property is necessary; trying to inherit only parts of it won't yield the desired result if the parent element doesn't have a box shadow to begin with.

Answer 3

Answer №2

I'm still a bit confused about your intentions...

Perhaps something along these lines?

.example {
  width: 80px;
  height: 80px;
  border: solid 2px black;
  border-radius: 50%;
  margin: 20px;
  display: inline-block;
  background: radial-gradient(circle, white 15px, transparent 35px);
  box-shadow: 2px 4px 8px 0px black;
}

body {
  background-image: linear-gradient(to right, red 100px, green 100px, green 200px, blue 150px);
}

<div class="example"></div>
<div class="example"></div>
<div class="example"></div>

Answer 4

I'm still a bit confused about your intentions...

Perhaps something along these lines?

.example {
  width: 80px;
  height: 80px;
  border: solid 2px black;
  border-radius: 50%;
  margin: 20px;
  display: inline-block;
  background: radial-gradient(circle, white 15px, transparent 35px);
  box-shadow: 2px 4px 8px 0px black;
}

body {
  background-image: linear-gradient(to right, red 100px, green 100px, green 200px, blue 150px);
}

<div class="example"></div>
<div class="example"></div>
<div class="example"></div>

Answer 5

Answer №3

In the realm of CSS, achieving a 'padding of transparency' may seem quite challenging, but fear not as there is a clever workaround using pseudo-elements. To bring this concept to life, you must remove the box-shadow and any background from the circular shape, and instead view the central dot as an independent element that will appear to 'float' above:

.radio-button-input + .radio-button-circle {
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-right: .5em;
  border: 2px solid #333;
  border-radius: 50%;
  transition: background-color .1s ease-out;
  position: relative;
}

.radio-button-input + .radio-button-circle:after {
  content: ' ';
  display: block;
  background-color: transparent;
  transition: background-color .1s ease-out;
  width: .55em;
  height: .55em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%
}

.radio-button-input:checked + .radio-button-circle:after {
  background-color: #333;
}

Answer 6

In the realm of CSS, achieving a 'padding of transparency' may seem quite challenging, but fear not as there is a clever workaround using pseudo-elements. To bring this concept to life, you must remove the box-shadow and any background from the circular shape, and instead view the central dot as an independent element that will appear to 'float' above:

.radio-button-input + .radio-button-circle {
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-right: .5em;
  border: 2px solid #333;
  border-radius: 50%;
  transition: background-color .1s ease-out;
  position: relative;
}

.radio-button-input + .radio-button-circle:after {
  content: ' ';
  display: block;
  background-color: transparent;
  transition: background-color .1s ease-out;
  width: .55em;
  height: .55em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%
}

.radio-button-input:checked + .radio-button-circle:after {
  background-color: #333;
}

Utilize the parent element's background color as the color for the box-shadow styling

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing Backward and Forward Navigation with AJAX, JavaScript, and Window.History

Attempting to isolate just a fragment of the inner content

What is the most effective way to create a live preview using AngularJS and CSS?

Ways to apply CSS to a changing div ID

Expansive HTML body width (exceeding 100%)

What is the process for incorporating a scrolling feature into my HTML page?

Creating HTML elements dynamically in ASP.NET MVC on the server-sideWould you like a hand with

Verify the entered information in the input field and showcase it in the display box after pressing the ENTER key

Having trouble with the gradient hover effect on the Tailwind Button in dark mode?

Challenges with conflicting CSS styling issues

Utilizing jQuery for Summation Calculation

Removing data entry from MySQL database table using PDO

Bootstrap 5's gutter-x class is causing alignment issues with divs

The hyperlink function is not operational in Gmail attachments

sort jquery alphabetical characters

Position the table at the bottom of the page using CSS

The function I created is having trouble connecting to the controller.js file

Creating an online store checkout system with JavaScript?

Attempting to adjust the spacing between my <h2> and <ul> tags to be more concise

`Enhance Image with a Fresh Hue`