I have a navigation bar and want it to have a border at the bottom like a multi-colored stripe. For example, Google uses a multi-colored stripe like this:
Could I do this in pure CSS, or would I have to use something like border-image?
You can do this with a linear gradient. In addition to just plain colors, you can do gradients for each stop. For google's own stripe, the color stops would look like this, CSS color names used for clarity:
background-image: linear-gradient(
to right,
blue,
blue 25%,
red 25%,
red 50%,
orange 50%,
orange 75%,
green 75%);
You can play with background-position and background-size to make it smaller than just the full header size, or put it into an :after / :before element and change the size on that element.
Example of color stops with gradient:
http://codepen.io/tholex/pen/nCzLt
I think you're much better doing this with a background image. You can keep the image really tiny by making each colour 1px wide and your image file 1px tall (they'll scale perfectly, with crisp edges).
An example:
.navigation-bar:after {
content: " ";
height: 6px;
width: 100%;
background: url(../img/stripe.png) repeat;
background-size: 100% 1px;
}
Related
I have an image that has:
White pixels: I would like to dynamically set these to any colour
Black pixels: I would like these to remain black
Transparent pixels: I would like these to show through whatever background it is currently on.
Here is an example of the image overlaid on a reddish background:
I would like to be able to tint the bunny any colour I like, without resorting to background tricks because the background colour that the tinted image is shown against, should show through unchanged.
A pure CSS solution is preferred, but javascript image manipulation ideas are also welcome.
The bunny by itself:
Using mask and blend mode you can do it:
.bunny {
--img: url(https://i.ibb.co/ngFGkgy/clOwR.png); /* Your png */
width: 32px;
aspect-ratio: 1;
background: var(--img) center/cover;
background-blend-mode: darken;
-webkit-mask: var(--img) center/cover;
mask: var(--img) center/cover;
background-color: red; /* the color */
}
<div class="bunny"></div>
<div class="bunny" style="width:100px;background-color:green"></div>
<div class="bunny" style="width:100px;background-color:blue"></div>
For a client I am trying to implement a background on an HTML element, which contains 2 radial gradients. One is located in the top right, one is located in the bottom left. My CSS only renders one of the radial gradients.
I have tried putting two radial gradient elements as a background:
body {
width: 100vw;
height: 100vh;
background-color: green;
background:
radial-gradient(
circle at top right,
red,
black 20%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%
);
}
Only the first radial-gradient appears, but the second one doesn't. When I switch the position of both gradients in de CSS markup, the colors change. So it appears as if only the first gradient is recognised.
I'm not sure which amount of color you want to see in the result, but my guess is you are after something like this.
body {
width: 100vw;
height: 100vh;
margin:0;
background-color: green;
background-image:
radial-gradient(
circle at top right,
red,
black 20%,
transparent 40%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%,
transparent 40%
);
}
One problem with your code was that you used the background shorthand for the background images, which resets the background color, so the green was no longer there. Use background-image instead.
Another was that both gradients covered the whole page, while you apparently want them to take up only the top right corner and bottom left corner instead. I solved this by giving them both transparent from 40%.
And I took the liberty of giving the body 0 margin, to get rid of the scrollbars.
My CSS only renders one of the radial gradients.
Simply because you are using opaque colors and by default a gradient will cover all the element so your will only see the top layer.
In addition to the answer of Mr Lister, you can adjust background-size to control the space each gradient should take:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right, red, black 40%) right,
radial-gradient(circle at bottom left, yellow, orange 40%) left;
background-size:50% 100%;
background-repeat:no-repeat;
}
This looks a bit ugly but if you want to have a continuous background make sure both end color are the same:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right , red, black 40%, green 60%) right,
radial-gradient(circle at bottom left, yellow, orange 40%, green 60%) left;
background-size:50.5% 100%;
background-repeat:no-repeat;
}
I'm trying to create a grid in pure CSS using background-image and -webkit-linear-gradient. I have the spacing and the tiling working fine, but for a reason I can't figure out, the vertical lines are coming out as #B8B8B9 instead of #E3E4E5 like I specify. Any ideas?
JSFiddle: http://jsfiddle.net/2faSt/
CSS:
.grid {
position: absolute;
width: 100%;
height: 500px;
background-image: -webkit-linear-gradient(0deg, #e3e4e5 0px, transparent 1px, transparent 15px, #e3e4e5 16px, transparent 16px, transparent 99px, #e3e4e5 100px, #ffffff 100px), -webkit-linear-gradient(90deg, transparent 20px, #e3e4e5 20px);
background-size: 111px 21px;
}
If you want to get really the color that you specify, you should set 2 color stops with the same color, separated by at least 1 px.
Otherwise, you set only the point of gradient change, but it is already changing to transparent, even in the same pixel
And, even it is non intuitive, transparent if black transparent (rgba (0,0,0,1))
See this fiddle
There, you have this CSS:
#one {
background: linear-gradient(90deg, #e3e4e5, transparent);
}
#two {
background: linear-gradient(90deg, #e3e4e5, rgba(255, 255, 255, 1));
}
In the first div (The same color stops that in your question), you can see that in the middle of the transition the color is darker than at the beginning.
As a comparison, in the second you can see what probably you intended, make the transition to white transparent.
I'd like to have a css background-image be a top-to-bottom gradient, and then a color. For example, if I wanted gradient that's #FF0000 at the top, #00FF00 400 pixels from the top, and immediately cuts to #EFEFEF after that, how would it be done? Is there some form of background-image-repeat I could use?
The actual property is called background-repeat. You need to use it in conjunction with background-size to restrict the gradient to 400 pixels tall and prevent it from tiling:
html {
background-color: #efefef;
background-image: linear-gradient(#ff0000, #00ff00);
background-repeat: no-repeat;
background-size: 100% 400px;
}
jsFiddle preview
Of course, this assumes you're using a CSS3 gradient, in which case browser support isn't an issue as all browsers that implement CSS3 gradients also implement background-size. But if you're using an image file for your gradient and you need to support older browsers, you're going to have to create an extra element or a pseudo-element with the appropriate height and position, to contain just the gradient.
Yes, use background-color and a gradient, set the proper background-repeat & background-size.
DEMO
background: #EFEFEF linear-gradient(#FF0000, #00FF00) repeat-x;
background-size: 1px 400px;
Adding a 3rd stop to your gradient is also an option (in case there are browsers that support gradients but not background-size). Place the 2nd and 3rd stops right at 400px, with the color for the 3rd gradient as your desired bg color.
How to design
1) a vertical gradient background with unfixed height,
2) a vertical gradient background with fixed height (say 600px, from blue to white to green), then the rest has the same green color?
update
Now the new design is from the top to the bottom, 120px fixed height from blue to white, then unfixed height for white, and then 120px fixed height from white to green. How to code that?
There is a way to do it, you will want to take advantage of the available background properties:
body {
background-color: green;
background-image: linear-gradient(blue, white, green);
background-repeat: no-repeat;
background-size: 100% 600px;
}
Live example: http://jsfiddle.net/sl1dr/PxNhY/
If you want an unfixed height then replace 600px with 100%.
EDIT: Here is the new solution according to your changes: http://jsfiddle.net/sl1dr/EtYLZ/
You can try crossbrowser (ie5.5+) linerar gradient generator
This Link:
Css Gradient From Green To White To Blue
Or you can use this link directly: Gradient Generator for generating cross-browser Css 3.0 Backgrounds.
You can generate Professional gradients and get the code for pasting in your own css file.
You must know that the css may not support some versions of IE