Im using a green image as a repeating background tile on my site. When you click an element the background changes to a blue repeating image.
I want to animate the colour change. Can this be done with CSS3? Could one solution be to use a black and white image for the tillable pattern and colourise it with CSS3?
Instead of having a tile background-image with a solid colour, give it a transparent background. This will then allow you to transition the background-color using CSS3 to achieve the same effect:
DEMO: http://jsfiddle.net/yLLNa/
CSS
html {
background-color: red;
transition: background-color 1s linear;
}
html:hover {
background-color: blue;
}
Related
I have this image and I want to make it white by default and cyan by hover. Is there another way than to make 2 images, one white and one cyan?
You can make a PNG where the magnifying glass is transparent, then set the background color on the img tag in CSS:
img {
background: steelblue;
}
img:hover {
background: skyblue;
}
Demo: http://jsbin.com/jeqihuxo/2/edit
Another way is to use sprites. Well, technically would not be two seperate images but one image which background-position is changed on hover. Your image is 36x48, so make a new image 72x48 with the non-hover version on the left side and the hover version on the right and move the background on hover.
With CSS3, is it possible to fade from a background-color to a background-image?
I know it's possible to fade from color to color or from image to image, but can you also fade from the one to the other?
It's not possible from native view, but you can simulate it: jsFiddle
body {
background-image: url('http://s1.directupload.net/images/140212/gvyaj9ca.png');
}
This picture is a PNG with nothing inside (not even white color) and the same size as:
body:hover {
background-image: url('http://connexo.de/img/logos/CSS3_Logo.png');
}
I don't exactly know what behavior of the background color you want to achieve.
I just revert it to white.
I have an imput field in form with multiple(two) backgrounds like this:
background: url(framework/images/search.png) no-repeat 6px 7px,
/*this is a magnifying glass icon - this is important later */
rgba(200,200,200,0.1);
Then I've got a transition:
transition:background 0.2s linear, box-shadow 0.5s linear;
And on focus of the input field:
input:focus, {
background:rgba(0,0,0,0.1);
box-shadow:0px 1px 0px rgba(0,0,0,0.1) inset;
}
Basically what it does (or should) is when the input field is active the background changes to slightly darker color with transitions. Also box shadow makes an inner effect of inside border. That was the case when background was of one element (only background color). Now when I added icon on higher layer the background wont change, but box-shadow works. I think that browser is confused how to change color of bitmap image.
My question is: Is there a way to transition only one layer of background (address it somehow), so that the bitmap image will stay the same and the color will change?
Thank you.
EDIT: Jsfiddle -> http://jsfiddle.net/8DRTt/
http://jsfiddle.net/8DRTt/1/
input:focus, #two:focus {...}
the problem was the selector.
The #two selector is stronger than the input:focus selector, thus overiding the background property.
When you add #two:focus to the selector of the darker background, it can no longer be overridden.
I've got to this point in which I'm trying to do a hilite animation on an element which I can't move or modify its boundings, so i used an outline in addition to its background color to have an animation area bigger than the element itself (here's a sample):
#keyframes hilite {
0% {
background-color: transparent;
outline: #ffffff solid 10px;
}
20% {
background-color: #F6F6BC;
outline: #F6F6BC solid 10px;
}
100% {
background-color: transparent;
outline: #ffffff solid 10px;
}
}
But now i'm freaking seeing that the background animation triggers in every case, but the outline animation works only when the element has an outline style value (none doesn't work, when background none doesn't avoid animations).
You can see it here.
I don't want to fix it, it's already fixed, but understand it - seems illogical to me.
Lots of thanks in advance.
Border and outline styles cannot be animated; this is by design. When you attempt to animate a change from none to solid, as shown in the last box in your fiddle, what happens is that it switches to solid immediately, which causes it to display as a black outline momentarily before animating to the color that's defined, so it doesn't actually animate from no outline to a solid outline in that sense.
If you need a smooth animation from an invisible outline to a visible outline, animate outline-color between a color value and transparent instead of outline-style between solid and none. I see that you're using #ffffff in place of transparent, which also works provided the background of the container is also white.
Is there any way I can use CSS3 to fade in and out a solid white background of a <div>?
the content should remain visible so just the background should fade.
Any ideas using css3 transitions/transforms?
thank you for your help.
Sure, you can use the transition property directly on the background-color:
div {
background-color: white;
/* transition the background-color over 1s with a linear animation */
transition: background-color 1s linear;
}
/* the :hover that causes the background-color to change */
div:hover {
background-color: transparent;
}
Here's an example of a red background fading out on :hover.
You may find this useful for examples of image and background color fades: -
http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
However using CSS 3 to do the transition will limit the effect to browsers that don't support it.
You could have two divs in one container div. The first div contains the white background, the second one gets the content.
Then, use a CSS3 transform to animate the opacity of the first div to zero.