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.
Related
I am new to web development. I am trying to put an app together. I don't know how i can achieve the background like in the image.
I already tried linear-gradient with some angles but that did not help.
If anyone want's to know what property i used than it would be the one mentioned below:
background-image: linear-gradient(90deg, red, blue);
Are you trying to get something like this?
body{
height: 400px;
width: 400px;
background: linear-gradient(to top right, #9999FF 0%, #9999FF 50%, white 50%, white 100%);
}
<body>
<h1>Some dumy text...</h1>
</body>
How it works
In your background you can use linear-gradient, in this you can tell what direction it goes. In this example I use "to top right", this makes it so the starting color starts in bottom-left and the end color goes to the top-right.
You could use all kind of directions like "to bottom right" or "to right".
Then you say what color you want it to start with, in this example its some blue color. Then you tell it when it should stop using this blue color, in this example 50%. Then if you want the white color on the other side you say "white 50%" and it will start using white till 100%.
You could also try some other cool things with it. You can say for example linear-gradient(to top right, blue 0%, blue 40%, white 60%, white 100%)
notice that the blue stops at 40% and the white begins at 60%. Now it will transition between it.
Although Jeremy answer is helped me to attain the effect but i had to change it a bit to look like the one in the image.
My Css file:
body{
height: 100vh;
background: linear-gradient(to bottom left,#fff 0%, #fff 50%, #8186D5 50%, #8186D5 100%);
}
My HTML file:
<body>
</body>
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 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.
I want to make a div with a gradiant: white to transparent. I add a red bow shadow on it, but I need the box-shadow effect respect the same gradient to transparancy than the box her-self!
Like we see http://jsfiddle.net/by57bkgy/ it's not good here, I don't want red effect at the left of my div.
I tried box-shadow(0px 0px 2px 1px linear-gradient(90deg, rgba(0,0,0,0) 0, red 10%, red 100%)); but don't work.
How can I do a linear gradiant red to transparent on box-shodow?
thx.
EDIT I tried with -webkit-mask:linear-gradient(90deg, rgba(0,0,0,0) 0, white 10%, white 100%); but box-shadow is ignored....
Just change the div gradiant from (white, transparent) to (white, the background -color of the element in which the div is placed).
There is no css support for gradient shadow