Imagine having a CSS property called box-shadow:
box-shadow: 5px 5px 0 #ccc;
What if there is a need to create a variable from the color #ccc? While in SCSS, you could accomplish this with code like:
$grey: #ccc;
.element {
box-shadow: 5px 5px 0 $grey;
}
However, it doesn't seem to work with regular CSS variables. Could there be a missing piece that I am not aware of?
CSS Variables are a feature that is currently in the experimental stage and may not be supported across all browsers (no support for IE, Edge is being considered, Firefox and latest versions of Chrome are compatible). For more information, please visit: http://caniuse.com/#search=css%20variables
// example of declaring a variable
.element {
--variable: #ccc;
}
// using a variable
.other-element {
box-shadow: 0 2px 3px var(--variable);
}
For additional details, check out: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
Fellas, I understand this may be a new addition, but we can't deem it experimental since it's already incorporated into the stable version of Chrome.
In my situation, I managed to find a resolution. I simply reutilized that color in another variable and then applied it to an actual property. Let me demonstrate with an example:
:root {
--focus-input-color: #6db3fd;
--box-shadow-focus: 3px 3px 0 var(--focus-input-color),
-3px -3px 0 var(--focus-input-color),
-3px 3px 0 var(--focus-input-color),
3px -3px 0 var(--focus-input-color);
}
.element {
box-shadow: var(--box-shadow-focus);
}
I'm uncertain as to why this method works while directly using --box-shadow-focus in a property doesn't yield the same results, but that's the current behavior in Chrome 49.
One of the current challenges we are facing involves implementing an action button similar to the one found in GMail for adding new content. This button needs to remain fixed during scroll. Here is the HTML code: <div class="addButton actionButton" on ...
Hey everyone, I'm currently tackling a new project and running into an issue with Bootstrap 5 nav pills. I need them to toggle between column and grid view, but they aren't behaving as expected (content displays fine on the first pill, but nothin ...
We've implemented babel and lerna to maintain specific elements of our react web app separately. While the setup has been effective thus far, we're encountering styling issues when generating the static build. The main project is not processed t ...
Looking for a way to eliminate the effect of an inherited CSS property with Jquery. .class1 #id1 div.class2 input.class-input{ border-color: #bbb3b9 #c7c1c6 #c7c1c6; } Can someone explain how to delete this "border-color"? Thanks. ...
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 ...
After creating a fixed menu using unordered lists and extensive CSS, I added a custom class button that redirects back to the frontpage. However, I noticed an extra pixel of height in the menu causing alignment issues with the buttons. The big button stick ...
Below is an HTML table that I have created: <table id="customers" class="table table-bordered" width="100%"> <thead> <tr> <th colspan="2">Activities</th> <th>Mon 17</th> <th>Tue 18</th> </thead> ...
I'm still learning CSS, so bear with me if I don't explain this issue correctly. Whenever I click on a navigation menu tab in Chrome or Safari, a mysterious blue rectangle appears. It doesn't show up in FireFox though. I'm not sure what ...
Check out this JS Bin: http://jsbin.com/ojiJEKa/1/edit I have a question regarding the different width results of <div> and <a> compared to <input> and <button>, even though they have the same style applied. Can anyone explain why ...
While watching a video, I came across some concepts that were a bit difficult for me to grasp. The video mentions that scripts are 'serialized' and can block subsequent files from loading. According to this explanation, Script 1 would load first ...
Imagine having a square parent container with 100 child elements of equal sizes, as illustrated below. How can you use the :nth-child selector to target and style the children in the top-left, bottom-left, top-right, and bottom-right corners separately? ...
I am currently working on a webpage that features text enclosed in bordered boxes with styled formatting. The primary issue I am encountering is that when I try to add another paragraph within the styled <p> tag containing the border styling, the su ...
Currently, I am using flex-mode and aiming to create a 'deck' of 'cards' with uniform height and width. My goal is to ensure that the width remains consistent across different breakpoints. Unfortunately, I have not been able to achieve ...
When I try to convert HTML to PDF using iTextSharp, the CSS styling I apply to the webpage does not get carried over to the converted PDF file. Here is the CSS code I am using: <style type="text/css"> .cssformat { ...
I'm currently experiencing an alignment issue with two stacked navbars in my code. I want to align the upper navbar with the lower one, but I've tried various approaches without much success. Is there a problem with the buttons or something else ...
In the development of my app, I noticed an interesting issue. When I set the background on the html with a height of 100vh and resize the viewport to cause vertical overflow, the background does not cover the overflowed content: html { height ...
When applying overflow: hidden; to a div, I have encountered situations where keyboard actions can still cause the div to scroll, even without visible scrollbars. This makes it difficult to return the div to its original state. Are there any additional ste ...
Struggling to get both a background gradient and a background image (transparent PNG) to display in my div. No matter what, only the color gradient shows up while the image remains hidden. If I use a solid color instead of a gradient, the image displays ju ...
I am trying to align the edit and delete buttons with the image and premise name on the same line. Both buttons should be placed on the right side and have the same size as the card. Currently, the layout looks like this: https://i.sstatic.net/sNikU.png ...
I'm at my wit's end! The container div I'm dealing with is 1170px wide. My goal is to fit in 3 divs within this width. The first div is 275px wide, the second is 580px wide, and the third is also 275px wide. Altogether, these divs should ad ...