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.
Related
So, here is JSFIDDLE.
Here, you see header with background color gradient:
background: linear-gradient(to right, #827099 0%, #dc5562 100%)
I also have span with :before css attribute that mimics the background color behind it.
The purpose of this is to get a "cut" feature as a part of the word "THIS". You will notice that a top left portion of "T" is missing or more like hidden behind the :before attribute.
The issue I am having is that since the background color is linear-gradient, when the screen width changes, so does the linear-gradient (you can see by making the browser window smaller)
This change in the gradient does not reflect on the :before attribute and it no longer matches the background color.
Is there a way to fix this while keeping the linear-gradient of the background?
Not sure if this is an option for your use case, but you could set the linear gradient to ensure that the color change doesn't happen until after it clears the cutout.
You would set the first stop in the gradient to be the width of the padding (118px) plus the width of the clip border (21px) and then change the clip border colors to be the same as the starting color of the gradient. In the example below I rounded up to 140px.
https://jsfiddle.net/6dvy7dks/
.head {
background: linear-gradient(to right, #827099 140px, #dc5562 100%);
}
span.first:before {
border-top-color: #827099;
border-left-color: #827099;
}
I want to make my webpage with a background-color with opacity: 0.5 but the content inside the webpage will have an opacity: 1, as the default value.
The problem is that if I set opacity: 0.5 to the container, all the childs inside this container gets the same opacity value.
I have searched about opacity specifications and saw this:
Inherited No
but in my case it is being inherited so I have searched a bit more and found another transparency specification in which I saw this:
If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .
So, as it seems that it is impossible to set a parent with less opacity than its childs, is there some workaround to get it?
Note: I think that in this case is not very important to add code (because you can reproduce it easily) but here I have created a simple JSFiddle "to play" with it.
Thanks in advance!
No, it's not possible.
If you only want a semi-transparent background without affecting contents, you can use a rgba color.
The RGB color model is extended in this specification to include
“alpha” to allow specification of the opacity of a color.
For example,
body {
background: linear-gradient(to right, #fff, #ff0, #0ff);
}
p {
background-color: rgba(0, 0, 255, 0.3); /* semi-transparent solid blue */
padding: 70px;
}
<p>Semi-transparent background but fully opaque text</p>
Not possible. Opacity to a parent container will also apply to the children. If you want to have a background with an opacity effect you could use RGBA for the background color. This applies to solid colors and there is an option for working with gradients as well.
If you have an image you want to use, you could position absolute the image behind your content using a div/container. Give that container an opacity and a position.
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;
}
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.