I have a class called "button", I simply use it for all hover elements. Most of my buttons are black (background-color), and the .button:hover changes the background-color value of the items to gray.
However, some of my buttons have random colors so they lose the effect when their background-color changes to light gray. for this reason, I would like to change the "satauration" value of the hovered item instead of modifying the whole color. That way, the hover effect will base on the base color..
I was thinking... if it is possible to change the "saturation" value (only) of the background-color so that my hover effect will still be useful for random colors.
Using filter currently seems to only work for webkit-based browsers..
-webkit-filter: saturate(3);
filter: saturate(3);
Demo | Source
Coupling the saturation filter with brightness seems to have the most effect, with the black being visibly affected
-webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);
Demo | Source
Additional demo: http://html5-demos.appspot.com/static/css/filters/index.html
There are two solutions for this problem:
First, use a transparent png with a white to transparent gradient. On onHover, apply the image over the button. I haven't tried it but it looks promising.
Second, use a css inset dropshadow. With the parameters set correctly, you can easily manage the gradient effect.
You can also use rgba(r,g,b,a) for making changes to the underlying button color. But remember that the text value of the button will also get affected, giving you issues of usability.
Related
I've been coding my portfolio website from scratch and I want to implement an image change (black and white to color) when I hover over the thumbnails in my gallery. Is there a way to do this easily? I have 14 images, two pictures each (color and black and white).
Thanks!
You can save some traffic for you and your visitors and only have one color image, which you can desaturate using CSS filter.
Assign the class to your image in HTML: <img class="image-bw" src="image.jpeg"/>
Make your image black and white in non-hovered state by using this CSS:
.image-bw {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
And turn off this filter in hovered state:
.image-bw:hover {
-webkit-filter: none;
filter: none;
}
Take into account that this solution will not work in IE. Refer here for detailed browser compatibility information. You may also use SVG images, which can be desaturated in IE, as described here.
If you want to use two images, several ways to do so are described in this question.
I'm very very bad with CSS (I do not understand syntax at all), I'm just using my knowledge to tinker with code.
I'm using Chrome with Stylish addon, and I want to make dark wikipedia but with my preferences.
I took some code from stylish and just changed colors, but now it's something new where I have
to add stuff so I'm stuck.
It's obviously made in chrome, so it's temporary. This is my problem:
http://imgur.com/a/9IYI3
And my question is how to make that box opaque with like #555 color, without destroying everything else.
Here is code that I'm using: pastebin.com
EDIT: note that opacity will change the opacity of everything in the element it is applied to. Depending on the situation, rgba is the best route.
This can be accomplished a couple of ways:
#mybox
{
background-color:#555;
opacity:0.5;
}
Or
#mybox
{
background-color:rgba(85, 85, 85, 0.5);
}
The opacity property is to change the transparency of an element (0.0 is 0%, while 1.0 is 100%).
The same can be done with rgba (red, green, blue, alpha). Alpha being similar to opacity (same affect really).
As Dwza said in the comments, it would be good for you to take some CSS tutorials. A quick Google search will bring up many. This one looks good: http://webdesign.tutsplus.com/tutorials/the-best-way-to-learn-css--webdesign-11906
I have a PNG picture representing a monochrome white magnifying glass with an alpha channel. This image is overlayed on the top of other pictures, with a semi-transparent background such that you still see below it:
When you hover that picture, I would like it to change to red, as do textual links per my CSS.
I have considered several options:
Use a 'LEFT-POINTING MAGNIFYING GLASS' (U+1F50D) character. This wouldn't work for the (fewer and fewer) clients that don't support an extensive set of Unicode characters; but when it works, it's not guaranteed to produce a monochrome character (on Apple implementations, it's a full-color emoji).
Use a mask, as described in this other similar question. This only works when you don't mind an opaque background (mine is not opaque) or when you can tell what's underneath your element with great certainty (and then it's rather hackish and ugly).
My current solution is to use a different picture to represent the white magnifying glass and the red magnifying glass that it changes for when you hover over the picture. It's an okay solution, but I was wondering if there was a way I could have just one picture of just one color, so that I don't have to go back to change the image color if I change my mind about the color.
I'm already doing extensive use of CSS3 and HTML5, so I don't mind going deeper as long as it's supported by the latest iterations of each major browser.
Fiddle with the numbers on this to get your color.
img.magnify:hover {
filter: hue-rotate(20deg);
-webkit-filter: hue-rotate(20deg);
-moz-filter: hue-rotate(20deg);
-o-filter: hue-rotate(20deg);
-ms-filter: hue-rotate(20deg);
}
Found here - more options available
I found a Stackoverflow article on creating text shadows in IE: StackQuestion
Now I tried all of the 'filter' solutions in there, and in IE9, the text renders horrible(although the shadow shadow shows, the text pixelates heavily...).
Does anyone know of a proper text-shadow technique for IE? Even if it is just for IE9...
Thank You
Check this site out: http://css3pie.com/
It's a plugin that enables you to use CSS3 in IE6-9
You can get text-shadow effects in Internet Explorer, taming IE's crunky filter shadow effects, forcing them to look okay and stop pixelating the text. Use the IE Chroma filter:
Set a background colour that is close to, but not the same as, your shadow colour - e.g. for black shadows, a dark grey, for white glows, a light grey
(set the background colour in a stylesheet or style rule inside an IE-only class or conditional comment, to not wreck your design in every other browser!)
Precede your IE filter CSS rule with a Chroma filter set to the same colour as the background fill
It looks (almost) quite good!
jsfiddle examples (load in IE8, IE9)
...or if you don't have easy access to IE8/9, here's a screenshot from that fiddle in IE9 IE8 mode. Notice the difference between the horrible, artifact-ridden, pixelated mess that is IE's default filter, against the quite crisp, normal-looking Chroma filter equivalents.
CSS code examples. Note how you've got a Chroma filter then another filter, all on one line, in quotes against one -ms-filter - and how the Chroma colour matches the background colour precisely, and how the Chroma colour compliments (but doesn't match) the main effect colour:
.chroma-glow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Glow(color=ffffff,strength=4)";
}
.chroma-shadow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ffffff)";
}
Some requirements (learned the hard way...)
Elements must be block or inline-block, can't be inline.
Filters fail to apply to any children that are position: relative; or position: absolute;
(they work if applied directly to position: absolute; or `position: relative; elements)
If you're adding the filters dynamically, e.g. with jQuery like $elem.css('filter','progid...');, it seems like the background colour must be applied directly to the element with the filter for the chroma to work. A couple of tips:
Have the effect colour, applied background colour, and chroma colour all identical
Since you'll want this background colour only in IE, use feature detection or IE detection.
#element {
filter: glow(color=black,strength=5);
}
This works:
a { color: hsla(0,100%,50%,0.2) }
And this does not:
img { color: hsla(0,100%,50%,0.2) }
Is there something like img { opacity: 1 } that allows to define hsl values to an image?
Text and images are 2 different things.
Text is rendered by the browser with the settings you provide (decoration, size font color ...)
an image is rendered in another way. the browser does not have information about what is on the image, and can therefor not alter the image itself.
Parameters like color etc will not have effect on the image.
By the way, the color parameter defines the text color.
Edit: If you want to apply a "color" to an image, you could create a div with a background image, and then in that div another div with a background color and an opacity. that way the transparant color will be overlayed on the image.
You can apply filters to images in some browsers: Firefox allows you to apply SVG filters to HTML content from CSS, but Chrome, Safari and Opera you'll need to wrap your content in SVG to apply filters to them, here's an example that works in Opera. There might not be an appropriate SVG filter for what you need, but it may be an avenue worth exploring if you have no other alternatives.
In Internet Explorer you might be able to use a static filter.
This works (press 'run code snippet' multi times):
.colors{ filter: hue-rotate(90deg); }
<img src="http://lorempixel.com/300/150/" heigh=150 >
<img src="http://lorempixel.com/300/150/" heigh=150 class="colors" >
degree is 0 to 360.
W3Schools.com: CSS filter Property
The color attribute is used as the drawing colour for text characters, borders and such. It does not apply to bitmap images.
Therefore, it doesn't matter whether you add alpha channel information to your colour value or not: The whole of the declaration doesn't apply.
opacity is different, because it specifies the alpha value for the whole element.
The only way to impact the colors of an image with css is to use opacity to control the alpha channel. Note that you could make a hack to (sort of) change the luminance of your image by placing another element on top of if. Ensure that it covers the image exactly by adjusting position and size, make the background-color black, and set the opacity to 0.5.
http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
may be these filter help you to change a single image in different color sachem but they also have browser compatibility issue