Is it possible to adjust the box shadow without specifying a color in the code?

My dilemma arises from having 2 css classes, each defining different shadow effects for my elements

.classA{box-shadow:inset -2px 0px 0px 0px rgba(63,191,31,1);}
.classB{box-shadow:inset -2px 0px 0px 0px rgba(204,29,29,1);}

I am looking to introduce a third class that alters the inset without changing the color

.classC{box-shadow:inset -10px 0px 0px 0px;}

While this solution provides the desired shadow effect, it unfortunately changes the color to black. My goal is to retain the original color.

Is there a way to adjust the shadow properties using CSS ONLY while preserving the color?

htmlcss

Answer №1

The concept of breaking down box-shadow into different parts, as one can do with borders, is not applicable. However, a useful trick is to make use of the color attribute of the element to control the color of the box shadow.

<div class="box">
</div>

<div class="shadow box">
</div>

.box{
  box-shadow: 0 0 10px;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #fff;
}

.box.shadow{
  color: rgba(255,0,0,.3);
}

http://jsfiddle.net/82z8r73o/

Answer №2

Here is a convenient code snippet for accomplishing this effect:

box-shadow: 1vw 1vw 5px #202C45;

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

Regular expressions used to efficiently parse CSS selectors

I am looking to enhance the scope of my selectors. One effective method, in my opinion, is to target a CSS selector and return a combination of mySelector and oldSelector For instance, if I have .old { background: black; }, I would modify it to .mySelecto ...

cssregex

Display a DIV element containing a button using Jquery

Can anyone guide me on how to use Jquery to load a specific DIV onto the page only when called by a button or event? I've attempted several functions without success, making me question if it's achievable at all. Being new to Jquery, I believe my ...

jqueryhtmlload

Google Map not rendering correctly when dynamically implemented for the second time

When this specific HTML code is pasted into an .html document and opened directly in a web browser, it showcases the issue I am experiencing. <!DOCTYPE HTML> <html ng-app="myApp"> <head> <link href="https://netdna.bootstrapcdn.com/bo ...

javascripthtmlangularjsgoogle-mapsangular-ui-bootstrap

Issues with image display on Firefox

I'm facing a major issue with my website (check it out here), where some users are unable to view images using Firefox. Interestingly, I personally use Firefox and have not encountered this problem. The affected users are on Firefox 3.5.2 running Win ...

htmlimagefirefox

Animating splitting elements with VueJS

I am facing a challenge in creating a split animation with two icons. My goal is to split the icons with some translation in the X-axis after hovering on the container, but it seems like I am missing something in my implementation. The animation does not w ...

cssvue.js

Position the object at the center of the window

Trying to navigate the complex world of web development and facing a challenge that seems simple, yet tricky. Not quite sure how to properly refer to elements using HTML, Javascript and CSS. In my HTML page, I have used divs as clickable objects styled wi ...

javascripthtmlcss

What seems to be the issue with my JQUERY and CSS implementation?

I'm looking to create a click function that toggles the 'text decoration' setting to 'strike-through'. Additionally, I would appreciate any guidance on how to make it move to the bottom of the list when clicked. $(".player-nam ...

javascripthtmljquery

Retrieving a page using jQuery

Below is the JavaScript code that I am using: $.ajax({ url: "test.html", error: function(){ //handle error }, success: function(){ //perform actions here with the received data } }); After retrieving test.html, I am wo ...

javascriptjqueryhtmlcssajax

Display Div when scrolling near the top, not the bottom

I found this code snippet on Stack Overflow that shows a div when the bottom scrolls into view. However, I need it to show the div when the top scrolls into view instead. How can I make this adjustment? Here's the JS Fiddle link $(document).ready ...

javascriptjquerycss

Arranging images in a dynamic layout, either next to each other or on top of one

Currently, I am tackling a project involving two images of the human body - one for the front and one for the back. Both images are set at a height of 80vh. The challenge lies in my use of bootstrap to align these images side by side when the screen is wid ...

htmlcssimagetwitter-bootstrap

Customizing Hyperlink Attributes

Is there a way to ensure that an anchor stays at the center or bottom of the screen when clicked? I am facing this issue because I have an ASP.net document that loads dynamic content from a database, resulting in a long form. Currently, I have placed an a ...

htmlasp.netanchor

Transforming an image by masking it to create a binocular-like view

I've been experimenting with creating a unique visual effect where an image is revealed through a binocular-shaped element that follows the mouse cursor. The circular part of the element moves along with the cursor, unveiling parts of the image as it ...

jquerycsssvgmasking

jQuery and Bootstrap are failing to display passwords on dynamic forms

I am currently grappling with the challenge of showing/hiding passwords on dynamically generated forms using jQuery and Bootstrap. The main issue I'm facing is making the script recognize the dynamic forms. While I am able to add new form inputs with ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

make changes to the current selection in the drop-down menu

Imagine I have a select list with 3 options: <select> <option>1</option> <option>2</option> <option>3</option> </select> My goal is to create a textfield and button that will allow me to upd ...

javascripthtml

`How can I use JavaScript to display a modal?`

I am currently a student immersing myself in the world of coding, particularly focusing on learning javascript/jquery. In my recent project, I have developed a chess game using RoR and now I am tackling the promotion move. The idea is that when a Pawn piec ...

javascriptjquerycssjquery-ui

Custom component not rendering expected CSS style

I have successfully developed a custom web component without using any framework. I then proceeded to populate it with content from a template tag. Although I was able to manipulate the content using JavaScript, I encountered difficulties when trying to m ...

javascriptcsstypescriptweb-componentnative-web-component

Fullscreen overlay or pop-up display

I have a website with images and iframes displayed within a fancybox. Everything is functioning properly, but now the website's requirement is to have a fullscreen overlay like on the usatoday website. Take a look at for reference. When clicking on ...

jqueryhtmlcss

Tips for creating a clickable ::before image

I'm trying to create a hover effect where an image appears and is clickable when hovering over an element, similar to what is seen on many websites. For example, I want to display a bin icon when hovering over an element by using the ::before pseudo-e ...

csspseudo-element

How to dynamically switch classes in Angular 2

I am looking to toggle the "active" class on a div in the app-component when a button is clicked in the app-header component. Here's what my app-component.html looks like: <div class="off-canvas"> <app-header></app-header> & ...

htmlangular

What is the best approach for determining which CSS file to import in next.js?

I'm currently facing the task of selecting which CSS file to apply in my next.js project. I have two separate CSS files, one for desktop and one for mobile devices. My current method of importing CSS files is as follows: // _app.tsx import ".. ...

htmlcsstypescriptnext.js