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;
}
Related
Im writing css code to add a dark theme to a website. One element is a lineargradient from the top to the bottom of a div. How can I change this element to have the lineargradient at the top only and #000 at the bottom?
You could define a breakpoint where your #000 color starts as a percentage. For example setting
background: linear-gradient(#555, #000 50%);
on your element would only display the gradient in the first 50% of its height and the rest would be black. It also works for colored gradients:
background: linear-gradient(#0EB6F3, #002A65, #000 70%);
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)
I am currently trying to fix some CSS. The specification I've got is that the background should be transparent, like this:
But as you can see, when I set the background to transparent the white texts looks very washed out, as compared with:
At the moment the text is set to fully white, fully opaque in the CSS:
.banner-content p {
color: rgba(255,255,255,1) !important;
}
Can anyone suggest any CSS tricks to increase the apparent contrast, given that the text is already as white and as opaque as possible...
When you set the opacity of a container like this:
#container {opacity:0.5;}
it affects the opacity of the container AND all of its children. So the font becomes 50% opaque too.
It seems like you really just want to give the container a translucent background, which you would do like this instead:
#container {background-color:rgba(0, 0, 0, 0.5);}
and that won't affect the text within that container.
I have a background image that is set to 100% width, depending on the screen size. This means, the height of the background image could be 100px or 800px.
I have a gradient to make the background image slowly transform into a grey color. But because the height of the background varies, I cant figure out how to get the gradient to begin where it is needed.
Setting a % makes it relevant to the page so doesn't work. I figure, I need to use the calc() function somehow. This is what i have, any ideas?
background: linear-gradient(to bottom, transparent, #ddd calc(??)),
#ddd url('../img/bg.jpg') no-repeat;
I have a background gradient on a div (only code for FF shown below for readability)
background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
I then have an image inside this that needs to "break out" the bottom over a second div below that has the same gradient. I am using z-index 2 on the image, z-index 1 on the div.
This works fine when the divs have no gradient (just a solid background colour), but as soon as I apply the gradient the z-index fails and the image drops behind the second div, see images below:
With gradient background
With solid background
The issue was the z-index on the containing div, even though it was set lower than the image, removing it fixed the problem :/
I'm going to guess that the elements with the z-indexes don't have a position property. Then z-index won't work. It may seem to work with no gradient, but that is because the background-color of the div is transparent an the image is visible underneath it, giving the impression of being on top.
Am I right?