Is it possible to create the effect shown in the following image, using CSS?
Basically I want to create <div>s that have a background split diagonally with a block color on side and white on the other?
You can use linear-gradient on background. See the following example:
body {
height:100vh;
width:100vw;
background:linear-gradient(160deg, red, red 60%, white 60%, white);
}
Related
I need to change the color of the center line in the v-timeline components of the Vuetify framework so that it will be a particular color up-to a certain colored dot and another color afterwards as shown here, is it possible to do so?
The color for the whole line could be changed as follows
.theme--light.v-timeline:before {
background: red;
}
I think only one way is setting linear-gradient. Because v-timeline divider setting up all the space. Try setting
background: linear-gradient(180deg, black 0% 50%, gray 50% 100%) !important
Is it possible to make a part of image gradient on an existing background?
The result as in the example picture you added can be achieved by using 2 containers, one with a background image, the other (which lies on top of the first) uses a CSS gradient background, where one of the gradient colors has an alpha of 0 (i.e. is transparent).
For more info on CSS gradients see: https://developer.mozilla.org/nl/docs/Web/CSS/CSS_Images/Using_CSS_gradients
to make a gradient that is transparent on one side, use rgba color, for example:
#grad1 {
height: 200px; width:500px;
background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0));
}
The a in rgba stands for alpha, it is the transparency an has a value between 1(opaque) and 0(transparent)
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 have a gradient image as the background to my website and I am having problems making it look correct with all page sizes. The image is 291x1080 and I am having it do a repeat-x. This is fine with all pages that are no larger than 1080p. However, for a page with more content or a screen with a resolution larger than 1080p, a white space follows the background. I do not want to do a simple repeat-y because the gradient going from light to dark without a transition would be strange. Is there any way to flip the background image every time it does a repeat-y using CSS?
This is the css to do this:
body {
...
background: #eeeeee url("/static/img/background.png") 0 0 repeat-x;
...
}
My suggestion: have the fabric texture and a gradient, not in an image.
For example:
body{
background-image: url("/static/img/background.png") repeat, linear-gradient(top, #000000, #123456);
}
You should make sure you add the browser support tags (-webkit, etc)
For further reference check out this:
How do I combine a background-image and CSS3 gradient on the same element?
Is it possible to change the color or tint of background image on hover/focus using pure css
See example here http://jsfiddle.net/jitendravyas/HdDRA/
In above example there is a white arrow on an image. I want to change the color of white arrow ( not the other background image) to something else on hover and focus.
I cannot use inline images in my case.
Edit:
I'm looking almost same like this http://jsbin.com/icemiy but for background images.
And I also want to change the color with fade-out so I can't do with multiple images
A quick and dirty fix would be to duplicate the arrow image in the color you want it to be onHover. Then replace the background image with this in the code.
body
{
background:
url(http://www.kapellohair.com/images/white-arrow.png) no-repeat,
url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
background-position:
center 50px,
center top;
}
body:hover
{
background:
url(http://www.example.com/images/arrow-with-desired-color.png) no-repeat,
url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
background-position:
center 50px,
center top;
}
p.s: The link does not exist. It is only for illustration purposes
Just thinking off the top of my head here.
I suppose you could put a transparent coloured div over the top of the image with an opacity of 0, then have its opacity go up to say 10% on hover. You'd be somewhat limited on what you could do though, it would look weird if you did it to an image with an irregular outline, for example, and you'd only have limited control over the tinting (I think it would pretty much be the equivalent of a semi-opaque layer in Photoshop so you couldn't do anything that you would require other tricks such as multiply or screen to achieve).
No, you can't do what you want, you can change the background using another different image.
An alternative could be to use a font to render the arrow and then to change its color (which is also animatable).
Alternatively, you can rely on Javascript to do some color manipulations on the image. See this answer