Is there a way to create a glow effect in CSS that considers the background color?

Exploring ways to create realistic-looking LEDs using HTML and CSS has been a fun challenge. Achieving a glowing effect for each LED would be simple if the color remained constant. However, I aim for the glow to dynamically adjust based on the LED's color, making traditional methods ineffective. The approach illustrated here is not suitable: https://fiddle.jshell.net/dwv5xxws/. Generating individual classes for each color is not a viable solution either, as I intend for the LEDs to transition smoothly between colors without creating an excessive number of classes.

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0px 0px 6px 2px #ff0000;
  
  float:left;
  margin-right: 10px;
}
<div class="led" style="background-color:red"></div>
<div class="led" style="background-color:green"></div>
<div class="led" style="background-color:blue"></div>

My inspiration for this project: http://codepen.io/fskirschbaum/pen/MYJNaj

edit: What if we enlarge the size of the LEDs and apply a shadow overlay internally to simulate a glowing effect without altering the LED itself?

javascripthtmlcss

Answer №1

CSS Variables are still in their beginnings, but an established and dependable variable in CSS is currentColor. This variable always takes on the current value of whatever color: is set to.

To achieve the desired outcome, a small adjustment to your code is all that is needed:

.led {
  width: 10px;
  height: 10px;
  background-color: currentColor;
  border-radius: 50%;
  box-shadow: 0px 0px 6px 2px currentColor;
  
  float:left;
  margin-right: 10px;
}
<div class="led" style="color:red"></div>
<div class="led" style="color:green"></div>
<div class="led" style="color:blue"></div>

To check browser support for currentColor, visit: http://caniuse.com/#feat=currentcolor

Answer №2

Using JavaScript, I've created a loop that targets all elements with the 'led' class and sets their box shadows to match their background colors:

leds = document.getElementsByClassName('led');
for (var i = 0; i < leds.length; i++) {
    led = leds[i];
    led.style.boxShadow = '0 0 10px 1px ' + led.style.backgroundColor;
}

Remember to re-run this script if you change the background color of any element.

Answer №3

It is your concept, after all ...

.bulb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0px 0px 11px 3px rgba(255,255,255,0.8);
  float:left;
  margin-right: 10px;
}
<div class="bulb" style="background-color:red"></div>
<div class="bulb" style="background-color:green"></div>
<div class="bulb" style="background-color:blue"></div>

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

What are the advantages of choosing express.js over Ruby on Sinatra?

Currently brainstorming for a social app and contemplating the switch from my initial option, Sinatra/Ruby to express.js/nodejs. My main focus is on the abundance of open source projects in Ruby that can expedite development. Another major consideration i ...

javascriptrubynode.jssinatraexpress

Using Three.js to control the camera's position and direction

Despite hours of searching, I have been unable to find a solution to a fundamental issue in Three.js. I know the position of the camera (my eyes), the direction the camera is facing (my eyes), and the direction my head is pointing. I need to create the cam ...

javascriptthree.js

Is it necessary to send form data back with Express, or is there an alternative solution?

I am facing a simple problem with my handlers for /login get and post requests. Here is the code: loginRender(req, res) { let options = { title: 'Login', layout: 'auth.hbs' } res.render('login', options) } logi ...

javascripthtmlnode.jsformsexpress

Converting a function to an ES6 class-based style

Hello, I am new to ES6 and eventEmitter. I have created a module in Node.js with an event-based style and now I am trying to convert it to ES6 class style. This is my code: // eventStyle.js const events = require('events'); const util = require ...

javascriptnode.jseventsecmascript-6eventemitter

Vows.js: Utilizing data from parent topics in nested topics

Is there a way to access the return value of an outer topic from within a test in an inner topic? To clarify, consider this example: "build.css" : { topic : function(file) { fs.readFile(fixtures + "/public/build.css", "utf8", this.callback); }, ...

javascriptnode.jsbddvows

Understanding the functionality of an array as an index in JavaScript

It was discovered (tested in Chrome) that the index of an array can actually be an array itself: a = [1, 2, 3] index = [1] a[index] // returns 2 Has there been any official documentation confirming this behavior? ...

javascriptarrays

What is the reason behind JavaScript subtracting the timezone offset for ISO dates when passed into the Date() function?

In my function, I handle different valid date strings to produce a JavaScript Date object. Most strings work as expected, however, when an ISO formatted date (YYYY/MM/DD) is provided, the user's timezone offset is deducted from the date. For example ...

javascriptdatedatetime

Generating grid-style buttons dynamically using jQuery Mobile

I am in need of assistance to create a dynamic grid using jQuery Mobile. The grid should consist of buttons with either 'onclick' or 'href' functionality. The number of buttons should be generated dynamically at runtime. Specifically, I ...

javascriptjquerycsshtmljquery-mobile

Struggling with implementing the use of XMLHttpRequest to transfer a blob data from MySQL to JavaScript

I have a blob stored in my local WAMP64/MySQL server that I need to retrieve and pass to an HTML file using XMLHttpRequest. I know I should set responseType="blob", but I'm not sure how to transfer the blob from PHP to JavaScript in my HTML file. Any ...

javascriptphphtmlmysqlajax

``The error 'Uncaught SyntaxError' is thrown during the production build of

I am facing an issue with the production build of my Vuejs application. When I use the npm run build command to generate the production build and then use serve -s dist to deploy it, everything works fine except for one parameterized path (product) in Vue ...

javascriptvue.jsnpmvue-routerproduction-environment

Unable to retrieve information from v-for as it returns null data

Currently facing an issue with retrieving data from the database using Axios in Vue.js. I am able to see the data in my database through Vue.js developer tools like this: https://i.stack.imgur.com/n7BRO.png However, when attempting to loop through the dat ...

javascriptdatabaselaravelapivue.js

Struggling to integrate the c3 chart library with Angular, encountering loading issues

I've been attempting to utilize the c3 angular charts, but unfortunately nothing is displaying on my page. Despite checking for console errors and following a tutorial, I still can't seem to get anything to show up. I have cloned the git repo an ...

javascriptangularjsweb

Uniquely tag an uploaded file

My code for uploading files is as follows: var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.open("POST", requestUrl, true); xhr.send(f); I want to draw your attention to the fact that I have attached a l ...

javascripthtml

Banner Placement

Is there a way to arrange 3 banners without using absolute positioning? I prefer to use relative positioning so that the footer doesn't overlap with the page. How can I achieve this layout? .bms { height: 810px; left: 0; position: absolute; ...

htmlcss

Error: Could not locate local grunt on Windows 7 Professional

When attempting to initiate grunt, an error message is displayed: c:\repositories\kunde_1\themes-projekt_1\projekt_1-responsive\source>grunt grunt-cli: The grunt command line interface. (v0.1.13) Fatal error: Unable to find lo ...

javascriptnode.jsgruntjsnpminstallation

How can I determine the mouse's location relative to the bottom right corner of the

Currently, I am in the process of writing jQuery code that will detect if the mouse is positioned near the bottom or right side of a window, and then adjust the tooltip's position accordingly. This becomes crucial because the table in which these tool ...

jqueryhtmlcss

Exploring the world of using Bootstrap containers, rows, and columns

I have a good grasp on containers and columns, but I am a bit confused about rows. The example below shows a 50/50 split. <div class="container"> <div class="row"> <div class="col-md-6"> 50 / 50 Content </ ...

htmlcsstwitter-bootstrap

What is the best way to transfer data between windows using titanium (classic)?

'The code I've written utilizes MyHTTPlink to retrieve information such as Restaurant Name, url, and address. Currently, it lists all restaurant names and urls in a table. Now, I want to figure out how to send the details of a table row to the ne ...

javascripttitanium

Exploring a GitHub image repository with HTML loops

I need assistance with incorporating a gallery into my GitHub pages website. Within my username.github.io directory, I have an assets/images folder containing various images that I want to display by looping through them. After searching for a solution, I ...

phphtmlajaxgithub-pages

Client-side validation with Jquery is failing to function properly

Currently, I am experimenting with the jquery.validate.unobtrusive.js plugin to dynamically generate form fields. Here is an example of how I'm creating a textarea field: var message = $("<textarea id='test'></textarea>"); $(mes ...

javascriptjqueryasp.net-mvc-3