How can I shortcut the color #F4F4F4? - css

I'm already using shortcuts for example #EEEEEE changed to #EEE
Is there any way that I can shortcut colors such as F4F4F4 using CSS
Hope someone has the answer

No.
As you noted, colors on the form #xxyyzz can be shortened to #xyz, but there is no shorthand notation for colors where the red, green and blue components are all equal.

Not really.
F4F4F4 is shorter than RGB(244,244,244), if it's any consolation :)

No you cant, only colors where the hex represntatino of each color (RGB) consits of to equal characters can be shortened.
read about it here http://www.websiteoptimization.com/speed/tweak/hex/
there are also names for certain colors (red, blue, lightblue,etc). pretty much actually, but i dont think your color is among them. read about that here: http://www.w3schools.com/css/css_colornames.asp

Related

How to "wash out" colors with CSS filters?

I am trying to use CSS filters to create a "disabled" look for components I am working on. I am trying to make it so that everything is "washed out" a bit. I can create this effect by using opacity(0.75) for components which are on white background: then black becomes gray and all strong colors become a bit more white. But the issue is if the component is not on white background, then opacity does not work as I would like. So how could I use CSS filters to create this "wash out" look? Like to multiply with white color a bit all colors.
I tried contrast but it looks like everything goes to gray, not white (so black stays black much longer than with opacity, while other colors are already washed out).
Using a combination of Contrast and Brightness filters might give you what you need:
filter: contrast(30%) brightness(150%);

How does transparency in rgba work?

I have recently learned about rgba for setting colours in css. I am curious about the technical aspect of the transparency channel actually works.
For example, if I set the values to be rgba(15, 34, 160, 1) and rgba(15 34, 160, 0.5) for two separate headers, then they are referred to as having the same colour, but having a different opacity value. What I am wondering is whether or not these colours are actually the same. By this I mean that in terms of the light coming out the pixels, they must surely be different in order to create two different looks of headers. Does this mean that the alpha value is actually used to change the colour in some sort of specific way?
Cheers!
since you can "half see" the color of the element behind a half-transparent element, it will be mixed with that color (if the background is white, it will appear lighter, if it's black, darker, and if it's another color there will also be a mixture of the colors.
So, technically it's the same color with different transparency, but the perceived result will be a different color (unless by chance the element behind the transparent one has the same color)
An RGB value is a color, an RGBA value is a color plus transparency. When you overlay it on a colored background, it can result in a different apparent color. So yes, they are the same COLOR, but can result in different colors depending on where they are.
Check out this JSFiddle
Play with the the top CSS property that looks like this:
background-color: rgba(225, 225, 225, 0.7);
The last value there is the opacity (opposite of transparency) measured from 0 to 1. 0 is fully transparent and 1 is fully opaque. The first three values are just like a regular rgb() CSS property.
By setting an RGBA color value. You are really just setting the color and a separate opacity value. This could be accomplished by setting the color with RGB and then the opacity separately with opacity, but RGBA combines the two into a single function. Using RGBA is shorter, but setting RGBA and then opacity separately allows you control over the values separately.
So, your two examples are setting the same value for color, but applying two different levels of opacity to that color.

Rickshaw: Changing colors of X-Axis Labels

By default the labels are all a dark gray, I've tried to override them using CSS multiple ways.
How do I change the label's color on render?
Or how do I change the color in the SVG output?
I've looked everywhere and have found similar titles but different meanings. Love how manipulatable this graph is, but the label text color is a must for me.
Thanks in advance.
Finally found the way to do it. Gotta use JS to overwrite the attributes.
After the graph.render() function use these:
$('.x_ticks_d3 text').css('opacity', '1.0');//fix text opacity
$('#x_axis text').css('fill', 'white');//text color
$('.x_ticks_d3 .tick').css('stroke-width', '0px');//text smoothing
$('#x_axis path').css('opacity', '0');//remove line or
$('#x_axis path').css('stroke', 'white');//change line color
This got everything to be white for me, and was able to remove the lines also.

CSS change child colors based on math?

Alright, I'll admit that title seems a bit cryptic, but here's the situation:
I have a list of actors on a page with photos and short bios, each one is its own <div>. Let's say that I have seven actors on my page, and I want the text colors in their boxes to change, say, to create a rainbow, so actor 1 would be red, 2 would be orange, 3 would be yellow, and so on. Can I do this without having to manually specify style="color:rgb(whatever)" on every div? Let's say I want the color values to change dynamically if I add more people to the list or take them away, so I'd specify a beginning color value of rgb(255,0,0) for red and and end value of rgb(255,0,255) for violet and somehow fill in the rest, so that each subsequent box has a different text color but all together they make a rainbow.
...or would I be forced to use JavaScript to do this?
No you need not required to red color manually you can use CSS nth-child selectors please check below tutorial
Click here!

Why won't it let me change the value of a property of an object?

I have this code and the commented line breaks it. What have a done wrong here? I know I can just say pen can be red, green, or blue; but I want to use the value color or something like it to share the property with other objects.
NicePlace is a room. "Its a pretty nice place."
A color is a kind of value.
The colors are red, green, blue.
A pen is a kind of thing.
A pen has a color called pencolor.
A coolpen is a pen.
The pencolor of coolpen is red.
[Now the pencolor of coolpen is blue.]
There is a coolpen in NicePlace.
Phrases like "now ..." must be placed in rules, otherwise Inform doesn't know when to run them. So try this:
When play begins:
Now the pencolor of coolpen is blue.

Resources