Creating a dynamic visual effect by changing the background color's opacity with each

Is there a CSS or Less solution to change the background color of all dynamically added or removed child elements with a gradual increase of opacity?

ul li {
  list-style: none;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  margin: 3px 0;
}

ul li:nth-child(1){
  background-color: rgba(0,0,255, 0.1);
}

ul li:nth-child(2){
  background-color: rgba(0,0,255, 0.2);
}

ul li:nth-child(3){
  background-color: rgba(0,0,255, 0.3);
}

ul li:nth-child(4){
  background-color: rgba(0,0,255, 0.4);
}

ul li:nth-child(5){
  background-color: rgba(0,0,255, 0.5);
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

htmlcsssassless

Answer №1

Implemented the following styles

ul li {
 box-shadow: 2px 2px white, 0px 2px white;
}

ul {
  padding: 0;
  background-image: linear-gradient(rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.8));
}

Instead of individually coloring each li element, applied a background gradient to the ul element and added a box effect with box-shadow.

ul li {
  list-style: none;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  margin: 3px 0;
  box-shadow: 2px 2px white, 0px 2px white;
}

ul {
  padding: 0;
  background-image: linear-gradient(rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.8));
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
</ul>

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

Cease the audio from playing unless you are actively hovering over the image

Is there a way to make the sound stop playing when you are not actively hovering over the picture? Any suggestions on how to achieve this would be greatly appreciated! imgarr[i].onmouseout=function(){ this.setAttribute('src',this.getAttribu ...

javascripthtmlaudiohovermp3

Incorporating fresh components and newly defined attributes in Angular

Is there a way for me to click on a new component button, specify a name, description, select type, and add attributes such as default value and type? I need all this information to be saved and for the new button to appear in the drag-and-drop section. ...

htmlangularangularjstypescript

Issue with Bootstrap checkbox buttons not rendering properly

I'm attempting to utilize the checkbox button feature outlined on the bootstrap webpage here in the "checkbox" subsection. I copied and pasted the html code (displayed below) from that page into a jsfiddle, and checkboxes are unexpectedly appearing in ...

htmlcsstwitter-bootstrap

What is the best way to implement JavaScript for loading and removing content based on button clicks on a webpage?

I'm in need of a vanilla JavaScript solution (I know JQuery options exist, but I want to stick to vanilla JS for now)? Currently, I am using a simple page as a testing ground for my ongoing project. The page consists of two buttons that load HTML pag ...

javascripthtmldom

Learn how to manipulate the DOM by dynamically creating elements and aligning them on the same line

Providing some context for my page: The section I have always contains a single input field. Below that, there is an "add" button which generates additional input fields. Since only one field is required on the screen, the following fields come with a "de ...

javascriptcssdom

A guide to programmatically downloading a file with JavaScript on Internet Explorer

I'm currently facing a challenge with my web page. There is a button that, when clicked, should generate a CSV file (by converting from JSON) for the user to download. I've implemented the logic based on this jsfiddle, and it works perfectly in C ...

javascriptjqueryhtmlcsvinternet-explorer

How to customize TextField error color in Material-UI using conditional logic in React

Currently, I am incorporating the React Material-UI library into my project and faced with a challenge of conditionally changing the error color of a TextField. My goal is to alter the color of the helper text, border, text, and required marker to yellow ...

javascripthtmlcssreactjsmaterial-ui

Parsing HTML with Qt library isn't able to detect any elements

I am currently working on a web crawling application. Within the code, I have the following snippet: // Normally, the HTML content is retrieved from the web using QNetworkAccessManager & QNetworkReply: // QString htmlCode = this->reply->readAll( ...

c++htmlqthtml-parsing

ngClass causing styling issue when applying styles

When I use class names like error and info, the CSS works fine. For example, in this Angular app (latest version) here: https://stackblitz.com/edit/github-i4uqtt-zrz3jb. However, when I try to rename the CSS classes and add more styles, like in the examp ...

cssangularjstypescript

When hovering, the <a> element does not fully encompass the background color

I am currently working on a navigation bar that changes the background color of the links when hovered. However, I encountered an issue where the dropdown menu in the navigation bar does not cover the entire area. body { margin: 0; font-family: Aria ...

css

Tips for retrieving HTML file content as a string using JavaScript

I'm looking to retrieve the contents of an HTML file using JavaScript and store it as a string. I tried writing some code for this purpose, but unfortunately, I encountered an error: Error: Cannot find module 'xmlhttprequest' Could someone ...

javascripthtmlnode.js

What is the best way to eliminate the extra spacing on the right side of my navigation bar?

Hello everyone! I am diving into the world of HTML and CSS, but I've hit a roadblock. Despite searching through various resources and forums, I can't seem to find a solution to my problem. The issue at hand involves an irritating space in my nav ...

htmlcssnav

Is it possible to switch the background-image after a gif has finished loading?

I am currently using a GIF as a background image, but I would like it to show a static image until the GIF is fully loaded and ready to play. After reading several similar discussions, I understand that you can manipulate elements with JavaScript once the ...

javascripthtmlcssimage

Trouble with scrolling horizontally on the website

After completing the coding for this website with bootstrap, I encountered an unexpected issue with a horizontal scroll appearing. This is my first project using bootstrap. I attempted to troubleshoot by using the 'divide et impera' method - rem ...

htmlcsstwitter-bootstraphorizontal-scrolling

Styling Angular2 Material Dialog: the perfect fit

The Angular2 material team recently unveiled the MDDialog module at https://github.com/angular/material2/blob/master/src/lib/dialog/README.md I am interested in customizing the appearance of Angular2 material's dialog. Specifically, I want to adjust ...

cssangularangular-materialangular-material2

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript

How to toggle classes in a list item one by one using the mouseover event in JavaScript? const items = document.querySelectorAll("ul li"); let currentItem; for (const item of items) { item.addEventListener("mouseover", e => { currentItem &am ...

javascripthtmlcss

What are the steps to creating a screen that mimics a mirror in the physical world?

Is there a way for the user to see themselves when they open a URL? I'm not looking for a mirror effect like the one produced by jQuery reflection js. I don't want to rely on using the front camera or any other camera to achieve this. Any sugges ...

javascriptjqueryhtmlcssmirror

Is there a way to determine if a browser supports the offline event?

I attempted to implement the code from this Stack Overflow question: How can I check for support of the `focusin` event? However, in Chromium, the method hasEvent('offline') returns false even though it supports the `offline` event. Does anyone ...

javascripthtmldom-events

Assigning attributes to each letter in a pangram

I am attempting to assign the appropriate class to a group of elements, representing each letter in the alphabet. The elements have IDs ranging from #alpha_0 to #alpha_25. If a letter appears just once in the input, it should be displayed in green. If a le ...

javascriptjqueryhtmlcssjquery-selectors

Organizing table data by columns in a continuous loop

I'm currently working on extracting data from a database, organizing it into tables (potentially multiple tables), and presenting them in columns of 4 across several pages. My main concern is figuring out how to display the tables horizontally like t ...

phpcsswhile-loop