I have some variables to easily define the color of my webapp, something like this:
:root {
/*Variables for color style*/
--main-bg-color: rgba(243, 243, 243, .7) !important;
}
The problem is that I.E. is not handling it. I solved it using preprocessor varialbes like this:
$main-bg-color: #fff
However, preprocessor variables can't handle rgba colors... Is there any way to store my rgba (without using one variable for each r, g, b, and alpha channel)?
rgba not working in IE 6 & 7 (fixed in IE 8).
Try this:
:root {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
This may help you.
Is there any way to adjust only specific values using hsl? For example, if I only want to change the saturation or lightness and keep the hue the same?
.red {
background-color: #ff0000; /* or, hsl(0,100%,50%); */
}
.red-dark { // Adjust saturation +10% and lightness -15%
background-color: hsl(, +10%, -15%);
}
You'll need to use javascript or a css preprocessor like sass, as mentioned by Fran.
CSS is declarative and has no reference to previous condition with a few small exceptions. For the most part, it only executes what it is given.
How do you implement a color palette for a website? For example given a color palette with five colors
#67CFE3 #A4D8D8 #DCE0C9 #EF842F #F66700
How do you assign the above colors to website components, that is what is the best practice?
Given a selector you can apply the color to your element in different ways:
as a background, as the color of the font, as the color of the border etc. see here an exhaustive list.
Looking at an example you see you can use color with hexadecimal, rgb, rgba, name etc.
Check out the global css syntax
body {
color: red;
}
h1 {
color: #00ff00;
}
p {
color: rgb(0,0,255);
}
I'm developing a project using LESS as compiler for my CSS.
I have already a fully working loop that sets the background color properly.
My question is this:
With my current code, when i try to use darken property, the compiling result is this:
SyntaxError:error evaluating function darken: Object # has
no method 'toHSL'
and the code is this one:
#colors:
"008B8B",
"00CDCD",
"00EEEE";
/* Colors and background loop (based on colors.less arrays) */
.loop-colors(#index) when (#index > 0){ // loop to generate rules for each color
.loop-colors(#index - 1);// call for the next iteration
#color: e(extract(#colors, #index));
#hexColor: ~'##{color}';
#border: 1px solid darken(#hexColor, 5%);
&.col-#{color}{
background: #hexColor;
border:#border;
}
}
i have no idea why this is not good.
I mean, i think is because the list of color doesn't have the "#" before every color, but just because i'm using it on the css class as well, i can't add it to #colors, so i have to add it later.
I don't know if and why adding the "#" later will affect the darken property and how.
Thanks
As mentioned by #seven-phases-max, ~'##{color}' will not create a color but a string. To convert a string to a color, you can use color function.
#colors:
"008B8B",
"00CDCD",
"00EEEE";
/* Colors and background loop (based on colors.less arrays) */
.loop-colors(#index) when (#index > 0) { // loop to generate rules for each color
.loop-colors(#index - 1);// call for the next iteration
#color: e(extract(#colors, #index));
#hexColor: ~'##{color}';
#border: 1px solid darken(color(#hexColor), 5%);
&.col-#{color} {
background: #hexColor;
border: #border;
}
}
Does LESScss convert all rgba colors to hex values?
I am trying to create a mixin, say, .color, that allows you to pass in a color variable previously defined, and I want it to be in rgba.
this doesn't work, but here's the idea:
.bgcolor(#colorvariable,#alpha) {
background-color: #colorvariable + rgba(0, 0, 0, #alpha);
}
Where #colorvariable would be, #blue: rgb(17,55,76); or #green: rgb(125,188,83); etc.
I want to define a bunch of these variables, and then be able to pass them in to .bgcolor or .color mixin and change the alpha transparency on the fly.
I feel like this should be possible, but I am missing something. -Right now, my code only ever outputs a hex color value, almost no matter what I input.- If I pass in an #alpha value of 1, it outputs a hex color value. Only #alpha values less than 1 force the browser to show me an rgba value. So that's solved.
Now--how to pass in the rgb and a parts separately from a predefined variable?
Turns out, less has hsla functions built in (see less color functions). So with some help, here's what we discovered:
#dkblue: #11374c;
.colorize_bg(#color: #white, #alpha: 1) {
background: hsla(hue(#color), saturation(#color), lightness(#color), #alpha);}
Then use the mixin:
section {.colorize_bg(#dkblue,1);}
So we pass in the color variable #dkblue and less' functions like hue(#color) take #dkblue and pull out its hue, saturation, and lightness values. We can then pass in an alpha that we define in that mixin.
Then I can use it in other ways, like to define transparent borders. By adding background-clip: padding-box; to .colorize_bg I ensure that my borders show outside of the bg box color (isn't CSS3 magical?) Then I can redefine the mixin to work for border color:
.colorize_border(#color: #white, #alpha: 1) {border-color: hsla(hue(#color), saturation(#color), lightness(#color), #alpha);}
and then give section the border width, style, and define color via the mixin:
section {border-width: 0 10px; border-style: solid; .colorize_border(#dkblue, .5);
And you'll get magical, shiny transparent borders, like so: http://i.stack.imgur.com/4jSKR.png
LESS has a set of functions to fade, fadeIn, or fadeOut a color. You should be able to pass any color to these mixins (hsl, rgb, rgba, hex, etc.)
// fade color to 40%
color: fade(#000000, 40);
// fade in color by 10%
color: fadeIn(rgba(0, 0, 0, .5), 10);
// fade out color by 10%
color: fadeOut(rgba(0, 0, 0, .5), 10);
You don't need to convert to hsla either so you won't need a white value
.hexBackgroundToRGBA(#color,#alpha){
#myred:red(#color);
#mygreen:green(#color);
#myblue:blue(#color);
background-color: #color;
background-color: rgba(#myred,#mygreen,#myblue,#alpha);
}
You'll have to write a few of these mixins in you need to set stuff other than the background-color property set but that's the idea. Just call it like this:
#selector{ .hexBackgroundToRGBA(#gray, 0.8); }
That will take whatever color val you have in the #gray variable and output a cross browser solution at 80% transparency with a solid color fallback for browsers that don't support rgba().