I am wondering if it is possible to add the opacity element to a sass variable? I am working on a project where I need to create different shades of a color and use them in custom typography file. My problem is when I create a color variable in rdga and implement it into my work the variable changes the code to a CSS opacity element which is written under a color element then this gets ran through the browser and throws and error. Is there a certain way to implement opacity in a variable so you don't get this problem?
Any help would be great, thanks
here are my variables:
$white-text-dh: rgba(255, 255, 255, 0.5);
$white-text-d: rgba(255, 255, 255, 0.12);
here is the typography ex:
.c-title{
font-size:20px;
color: $white-text-d;
font-family: Roboto-Light;
}
here is the html
<span class="c-title">hello</span>
this is what reads in the developer tools with an error going through the color. the color element can not read opacity
.c-title {
font-size: 20px;
color: #ffffff opacity 0.7%;
font-family: Roboto-Light;
}
I tested this and it works for me:
SCSS
$white: #fff;
$white-text-dh: rgba($white, .5);
.c-title {
color: $white-text-dh;
}
HTML
<h1 class="c-title">Test</h1>
Related
I found another question on SO about rgb vs rgba that is very similar, but it's missing an answer about the usage of rgb with opacity.
I know the difference between both – rgba is just rgb but with alpha for opacity. The thing is, it has been months or even years that I am using rgb with opacity values. It has always worked for me. rgb(255, 0, 255, 0.5)
Makes me wonder if there's an advantage to use one if both works the same? rgb has been there longer so browser compatibility I suppose is better? Also I was told by a coworker that rgba value will only work for background colors, but then again, I did some tests in codepen and it works on Edge and Chrome.
(I know both are Chrome based both these are the one I have downloaded)
Related question : What are differences between RGB vs RGBA other than 'opacity'
Here is my snippet
/* texts */
.one {
color: rgba(255, 200, 0, .5);
}
.oneFive {
color: rgb(255, 200, 0, .5);
}
/* backgrounds */
.two {
background-color: rgb(255, 0, 255, 0.5);
}
.three {
background-color: rgba(0, 0, 255, 0.5);
}
/* */
/* settings */
/* */
.two, .three {
height: 50px;
}
.two {
margin-top: 30px;
}
.two, .three, .zero {
color: white;
}
.one, .oneFive {
height: 50px;
font-weight: bold;
font-size: 2em;
padding-left: 40px;
padding-top: 20px;
}
body {
background-color: #444;
color: white;
}
.zero {
background-color: darkgreen;
width: 300px;
height: 350px;
position: absolute;
top: 35px;
z-index: -1;
}
dark grey 100% opacity
<div class="zero">dark green 100% opacity</div>
<div class="oneFive">rgb yellow text 70% opacity</div>
<div class="one">rgba yellow text 70% opacity</div>
<div class="two">rgb 50% background opacity</div>
<div class="three">rgba 50% background opacity</div>
Answer as requested:
I'm going to go out on a limb and say it's the browser translating what is essentially an "incorrect" value set in rgb with an opacity value.
If you look in the browser dev tools under the computed tab, you'll notice that the rgb values are computed to rgba (at least in Firefox).
I'm thinking that any browser that supports CSS3 will "fix" the property.
Also I was told by a coworker that rgba value will only work for background colors: Your coworker is wrong.
rgb has been there longer so browser compatibility I suppose is better? I wouldn't say that. You'll never notice a performance hit, but you'll make your browser do less work if it doesn't have to "fix" your incorrect values being passed to the rgb set. Update: rgba is an alias for rgb, so it's really not fixing anything, it's simply passing to rgb anyway.
Here is some documentation on rgb and rgba - specifically the aliasing of the functions:
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors
Makes me wonder if there's an advantage to use one if both works the same?
It's not about advantage but this is something new defined in the Specification
rgb() and rgba(), and hsl() and hsla() are now aliases of each other (all of them have an optional alpha). ref
And
Also for legacy reasons, an rgba() function also exists, with an identical grammar and behavior to rgb(). ref
So rgba() is meant to disappear and only rgb() should be used but this won't happen because it will create a lot of issues and conflit so rgba() will still be considered and will simply have the same syntax as rgb()
Also note that the new syntax no more contain comma:
rgb() = rgb( <percentage>{3} [ / <alpha-value> ]? ) |
rgb( <number>{3} [ / <alpha-value> ]? )
<alpha-value> = <number> | <percentage>
You should write rgb(255 65 40) or rgb(255 65 40 / 80%) for example but still for legacy reasons the comma syntax is still supported:
For legacy reasons, rgb() also supports an alternate syntax that separates all of its arguments with commas:
I have a login form with 2 fields, username and password. Username field is autocompleted by chrome. When I submit the form (when it is valid), this style is applied mysteriously:
input:-internal-autofill-selected {s ñ
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark-color(black, white) !important;
}
Is there a way to avoid that? The form is submitted using Ajax, so it is a little ugly if for Username field that style is applied, but for Password field it is not.
I noticed that this happen only if field is filled with an element in the chrome sugggestions list. If field is filled with a value that is not in the list, the style is not applied.
Regards
Jaime
To get rid of the undesired behavior, this trick "just works" (tm):
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
The answer is not intuitive. It's more a trick than anything else but it looks like it's the only one that works:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px yellow inset;
}
This will style a yellow background to you input. It's basically a very opaque and overwhelming inner shadow. They use the same trick in the link #ravb79 sent.
If you're ok with the default -internal-autofill-selected styling on a light theme and just want it to look nicer in a dark theme then you might just need:
input {
color-scheme: dark;
}
You can add a box-shadow to remove the blue background
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);
I tried overwriting the style but for some reason it didn't work at all. Webkit or at least chrome just ignored that style.
When I added !important to the style webkit / chrome just flat-out removed it from the equation entirely. Nowhere to be seen in the element inspector.
Everything I tried got either ignored or removed.
Sooo, I came up with this horrible bullshit. But it works so far.
// Fix autocomplete shit
function fix_autocomplete_shit() {
setTimeout(() => {
if ($(this).is(':-internal-autofill-selected')) {
var clone = $(this).clone(true, true);
$(this).after(clone);
$(this).remove();
}
}, 10);
}
$('.form-control').on('input', fix_autocomplete_shit);
I'm using bootstrap and I want to keep validation icons in form of background-images.
Only god knows why the webkit creators thought they absolutely have to set background-image to none but if they want war they can have it.
You could just add your own CSS so the updated state matches your regular input state. Adding an extra class to your declaration together with the !important attribute should override it.
So:
input.my-input {
background-color: rgb(255, 255, 255) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
input.my-input:-internal-autofill-selected {
background-color: rgb(255, 255, 255) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
I also found this btw: https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
I slightly tweaked #kostiantyn-ko's answer to only be applied to invalid inputs.
Sass:
input {
&:is(:invalid, [aria-invalid=true]) {
// your error styles
background-color: var(--color-background-critical-subdued);
border: 1px solid var(--color-border-critical-subdued);
// hack needed to get rid of autofill styles only on invalid forms
&:is(:-webkit-autofill, :-webkit-autofill:focus) {
transition: background-color 600000s 0s, color 600000s 0s;
}
}
}
CSS:
/* your error styles */
input:is(:invalid, [aria-invalid=true]) {
background-color: var(--color-background-critical-subdued);
border: 1px solid var(--color-border-critical-subdued);
}
/* hack needed to get rid of autofill styles only on invalid forms */
input:is(:invalid, [aria-invalid=true]):is(:-webkit-autofill, :-webkit-autofill:focus) {
transition: background-color 600000s 0s, color 600000s 0s;
}
I see this question has been asked twice before, but both solutions had to do with removing spacing. Without any spacing in between rgba and (, my issue still seems to persist. My CSS code is:
background: rbga(255,255,255,.7);
I've also tried:
background-color: rbga(255,255,255,.7);
In Chrome, both of these register as an Invalid property value.
However, if I use:
background-color: white;
opacity: .7;
The above code does work. Any reason why the rgba code is not working?
Please try with
rgba(255,255,255,.7);
Your Spelling is incorrect
hello you have typo background-color: rgba(255, 255, 255, .1);
and you tried background-color: rBga(255,255,255,.7);
So I've been wasting a lot of time trying to do something simple. Using a custom css plugin I've been trying to set my body to be transparent to see the image in the background.
What I first tried using was opacity selector, but that set everything in the body as transparent. I'd like to have my images and text not be transparent. I've been googling this for many hours and each answer I see for other people is to use the rgba (number, number, number, opacity). I can see how this would work, but using this does not make the background transparent at all. I'm really at a loss for what to do, I feel like there is just something really simple I am missing.
Please inspect my code to see where I've gone wrong: [jaredbabinec.com][1]
Also here is my css:
body {
opacity: .9;
}
.site-header {
rgba(255, 255, 255, .9);
}
.site-content {
background-color: rgba(210, 210, 210, 0.9)
}
change the background color of the div with id="page"
for example
#page{
background-color: rgba(185, 178, 178, 0.71);
}
change the color as needed. Hope this will fix ur problem
use this
.site-content {background: rgba(210,210,210,0.9)}
`
.site-header {
rgba(255, 255, 255, .9);
}
`
rgba is not a property, it is a value you left out background:
Give the body the background image with background-size set to cover.
You want to create a site-wrapper div that is height and width 100%.
Make the background for that div transparent
I am currently wondering which is the best CSS property to use, Opacity or RGBa? More specifically I am trying to recreate something similar to the famous BBC Home page slider, and it got me thinking why they use Opacity.
In my version I have came across using the following two versions of code:
.left-button {
background: rgb(255, 255, 255) url('../images/left-arrow.png') no-repeat; //FALLBACK
background: rgba(255, 255, 255, 0.4) url('../images/left-arrow.png') no-repeat;
}
or
.left-button {
background: #fff url('../images/left-arrow.png') no-repeat; //FALLBACK
opacity: 0.4;
}
Obviously the second one makes the actual button image opaque too, which is why I assume the BBC has made separate buttons and background masks for the buttons (which in my opinion is unnecessary additional markup).
I'd like to use the first version with RGBa though. Would anyone care to point out why one is better than the other and if there is any compatibility issues I am unaware of?
Opacity is inherited to all child items, RGBa is not. If a child item has a lesser or no opacity, use RGBa.
IE8 and lower does not support RGBa, so you may need an opacity back-up plan.
Neither one is "better" because they do different things, so it depends on what you're trying to accomplish.
opacity sets the opacity for the entire element and all of its contents (text, inline images, etc). RGBa is a way to define a color with a certain level of alpha transparency.
So let's say you have a div:
<div>Hello!</div>
This will make the entire div and its contents ("Hello!") 50% opaque:
div {
background: #000;
color: #fff;
opacity: 0.5;
}
Whereas this will make just the background of the div 50% opaque, while leaving the text at 100% opaque pure white:
div {
background: rgba(0, 0, 0, 0.5);
color: #fff;
}