I have the following problem:
Write a web page which has on top of it a rainbow built using gradient colors. The rainbow should be tilted with an angle (it should not be perfectly horizontal) and the width of the rainbow on the left side should be smaller than the width of the rainbow on the right side.
I don't know how to do the part with the width. Can anyone help me?
#grad1 {
height: 200px;
background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
}
<div id="grad1"></div>
You can use many backgrounds in the background property, and thus, many gradients. Here is an ugly rainbow using many gradients:
#grad1 {
height: 200px;
background: linear-gradient(78deg, red 5%, transparent 7%), linear-gradient(69deg, orange 10%, transparent 12%), linear-gradient(60deg, yellow 15%, transparent 17%), linear-gradient(51deg, green 20%, transparent 22%), linear-gradient(43deg, blue 25%, transparent 27%), linear-gradient(35deg, indigo 30%, transparent 32%), linear-gradient(28deg, violet 35%, transparent 37%);
}
<div id="grad1"></div>
It is not perfect, but it is a start... Fiddle around with the values and you will get what you want.
Related
I'm trying to find how to build this pattern, with parallel squares (each square with about 3px) to put as background on a div using css (not using an image background and repeating the X axe). I can only find chess patterns, which is not the case. Could anyone help me with that challenge? thank you really much!
I did search for hours on google how to make this pattern here:
While your specific example is easier to make using a repeating image, more interesting effects can be realized using pure CSS so it's not a useless skill to have. As always when trying to learn something web-related, MDN is a good place to start and has a pretty good article about CSS gradients. Here's the short of it.
CSS gradients are functions which return images. The simplest one is linear-gradient. Picture a horizontal line in your head and place a series of points along this line to which you'll assign a color. The function will automatically make the color transition smoothly between these points.
body {
background-image: linear-gradient(to right, black 0%, black 50%, green 75%, yellow 100%);
}
As you can see, the gradient is pure black from the left until we get to the middle (50%) then it starts to fade to green and finally to yellow. This modern and verbose syntax is very intuitive. We can actually remove some of that to get the same effect.
body {
background-image: linear-gradient(to right, black 50%, green 75%, yellow);
}
This time, we got rid of the black 0% stop. If we don't have a stop at 0%, the color of the first stop is simply used to fill the empty space. We also didn't specify the position of the last stop (yellow), so it was automatically placed at 100%.
When we set two consecutive color stops at the same point, we get interesting results:
body {
background-image: linear-gradient(
to right,
black, black 50%,
green 50%, green 75%,
yellow 75%, yellow
);
}
Here we told the gradient function to be black from the start to 50%, then to be green from 50% to 75%, then to be yellow from 75% to the end. By leaving no room between color stops, we abuse gradients to produce solid colors. Of course we didn't need the first black and the last yellow.
Something I haven't mentioned yet is that the generated gradient isn't actually the size of the full element, and it is actually tiled across it like any background-image. If we change the angle of the gradient, it becomes quite apparent.
body {
background-image: linear-gradient(
45deg, black 50%, green 50%, green 75%, yellow 75%
);
background-size: 100% 40px;
}
As you can see, the gradient is now at a 45degree angle so it makes a triangular shape, but it is only 40px tall and tiled, which creates an interesting zig-zag.
Since the gradient function generates an image, we can actually tile said image to create a repeating pattern. I prefer using percentages when making gradients and then specifying the total size of the gradient using background-size, like this:
body {
background-image: linear-gradient(to right, #617ca2 50%, #28487d 50%);
background-size: 10px 10px;
}
This creates a gradient that is #617ca2 from 0 to 50% and then #28487d from 50 to 100%, and considering 100% as 10px.
The final trick is that we can have multiple layers of background and use transparent colors in our gradients.
body {
background-image: linear-gradient(to bottom, transparent 50%, #28487d 50%),
linear-gradient(to right, #617ca2 50%, #28487d 50%);
background-size: 10px 10px, 10px 10px;
}
You can also use repeating-linear-gradient directly instead, but you'll have to set the gradient in pixels and be a little more explicit when it comes to the first and last color stops. I'm less familiar with this method, and the result might be slightly different.
body {
background-image: repeating-linear-gradient(to bottom, transparent, transparent 5px, #28487d 5px, #28487d 10px),
repeating-linear-gradient(to right, #617ca2, #617ca2 5px, #28487d 5px, #28487d 10px);
}
With the support for conic-gradient now being pretty good you can achieve square patterns like these quite easily.
body {
background-size: 10px 10px;
background-image: conic-gradient(
#28487d 90deg,
#28487d 90deg 180deg,
#617ca2 180deg 270deg,
#28487d 270deg
);
}
The background-size constrains it to a square, and the conic-gradient divides that square up into four parts at right angles to be colored however you like.
This can be achieved using css grid. Here's the code snippet for it:
<html>
<head>
<style>
.container{
top:5%;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(10px,1fr));
grid-gap:3px;
grid-template-rows: repeat(100,10px);
}
.container div{
background-color:aqua;
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container"></div>
<script>
for(let i=0; i<1000; i++){
$('.container').prepend($('<div></div>'));
}
</script>
</body>
</html>
I was reading about gradients and was wondering whether it is possible, for one given div, to mix solid and gradient colors as the CSS of its background.
I was thinking about this in the context of a bar which would represent the alternance of day and night: white for the day (50% of the div width), then a gradient from white to black (= dusk, 20% of the divwidth) and then black (30% of the div width). The percentages are just to set the context, the actual lengths would be calculated.
The documentation for gradients seems to imply that the mix is not possible, i.e. the possibility to set several stops is available, but each of them is faded into (so no solid colors).
You can use the following solution using the linear-gradient:
body {
background:grey;
}
div {
background: linear-gradient(to right,
white 0%, white 50%,
white 50%, black 70%,
black 70%, black 100%);
height:200px;
width:100%;
}
<div></div>
The answer is yes you can but there is a bit of calculation needed if you want to split multiple sections:
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(127,127,127,1) 70%,rgba(0,0,0,1) 100%); /*
If you want to split the second section 20/30, then you need to know the calculate the middle RGB value between black and white, which is easy enough. Other colours would be more difficult
I'm trying to skew my menu items like this:
I've found a few solution that will let me skew all 4 corners but they use a border-top solution whilst I need to use a background-image solution because of the gradient.
Does anybody know how to do this?
It's not possible to move each corner around freely, but you can combine skew with rotate and transform-origin to create a lot of different effects. Here's a demo of something similar to the picture you shared.
If you need something more intricate, it'd likely be best to use SVG.
You can build it with a separate gradient for each zone
div {
width: 400px;
height: 200px;
background-image: linear-gradient(6deg, blue 19%, transparent 10%),
linear-gradient(80deg, green 12%, transparent 10%),
linear-gradient(175deg, red 18%, transparent 10%),
linear-gradient(275deg, yellow 18%, transparent 10%),
linear-gradient(6deg, lightblue 21%, transparent 10%),
linear-gradient(80deg, lightgreen 13%, transparent 10%),
linear-gradient(175deg, lightcoral 21%, transparent 10%),
linear-gradient(275deg, lightyellow 19%, transparent 10%);
}
demo
I need to create a square element with gradients to achieve same way as border or box-shadow, because when skewing and rotating the element a slight line appear on the border.
As far as I can get is using multiple gradients with different directions, but it looks like it's not possible (or I don't know how)
I have tried with this but it doesn't work (with its vendor-prefixes):
background:
linear-gradient( top, white 0%, white 5%, red 5%, red 95%,white 95%, white 100%),
linear-gradient( left,white 0%, white 5%, red 5%, red 95%,white 95%, white 100%)
;
Have created a codepen to show what want to achieve and why can't use border (with box-shadow still the same issue)
I have also tried with an :after and it works, but I need an approach without :after pseudo-element.
Thanks!
Try using the :after element with the middle color set as transparent.
Thanks to Ilya Streltsyn I solved the problem.
The thing is, when using gradients, the order of the code is important. So basically will work:
background:
-webkit-linear-gradient( top,white 0%, white 5%, transparent 5%, transparent 95%,white 95%, white 100%),
-webkit-linear-gradient( left,white 0%, white 5%, red 5%, red 95%,white 95%, white 100%);
}
Codepen here
Is it possible to make a shape like the one depicted below in pure CSS? How could I go about doing it?
I would like a horizontal solid-filled block on a solid background, with a chevron at one end separated from the main block.
You can accomplish this with just a few background gradients:
div {
width: 300px;
height: 50px;
background-color: black;
background-image:
linear-gradient( -45deg, white 25px, transparent 25px),
linear-gradient(-135deg, white 25px, transparent 25px),
linear-gradient( -45deg, black 40px, transparent 40px),
linear-gradient(-135deg, black 40px, transparent 40px),
linear-gradient( -45deg, white 50px, transparent 50px),
linear-gradient(-135deg, white 50px, transparent 50px);
}
Fiddle: http://jsfiddle.net/jonathansampson/fxj3u/
The code above doesn't have any of the required vendor prefixes for linear-gradient. In order to use it in your project you will need to either provide all of the prefixes, or you can simply reference a tool like -prefix-free (which is what I use).
You can, you will need to construct it out of several different shapes. You want to make these shapes in this order:
Black rectangle
Black triangle with purple background
Purple triangle with black background
Black triangle with purple background
Have a look at http://css-tricks.com/examples/ShapesOfCSS/ for how to create the shapes. Give it a shot and come back with your CSS/Markup if you get stuck.
Something to be weary of: You will probably need to use float:left; so the shapes sit next to each other without any gap between them.