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
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 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 need help to create the styling shown in the image above which is a graphic design of what I am needing to do. The bottom left hand corner shading for the panels shown in the image above is my real sticking point.
I have tried all sorts of generators but I just can't get close enough with radial gradients.
As you can see I have a number of panels (actually 5 in total) lined up next to each other, each panel is a different width potentially and will resize with borwser view port sizing so providing a background image is not really an option.
I have a repeating transparent background image that creates the texture effect that works fine so I am not concerned about the texture effect but I am totally unable to create the bottom left corner darker shading effect and I need to get as close as absolutely possible using css. I have been tearing my hair out over this for days.
The main green colour hex code is #3F4B0B
My css currently looks like this
#mixin forest-green-texture{
#include background-image(url("texture.png"), linear_gradient($dark-green, $light-green));
}
.footer-box{
#include banner-color;
#include forest-green-texture();
width:18%;
float:left;
}
The linear gradient just doesn't cut it! It was my last attempt and totally wrong
I am using SASS if that makes a difference
I got pretty close using this tool http://ie.microsoft.com/TESTDRIVE/Graphics/CSSGradientBackgroundMaker/Default.html
which gave me
/* IE10 Consumer Preview */ background-image:
-ms-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* Mozilla Firefox */ background-image: -moz-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%,
#000000 100%);
/* Opera */ background-image: -o-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* Webkit (Safari/Chrome 10) */ background-image:
-webkit-gradient(radial, right top, 0, right top, 970, color-stop(0, #3F4B0B), color-stop(0.7, #3F4B0B), color-stop(0.9, #3F4B0B), color-stop(1, #000000));
/* Webkit (Chrome 11+) */ background-image:
-webkit-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(circle farthest-side at right top, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
I know the colours are slightly wrong, I'm not bothered about that I can adjust them but the above wasn't really much better than a linear gradient.
UPDATE
This is a screen shot of what I have managed to achieve so far
As you can see, the shading just isn't right.
The css I have for this is
background-image: url("texture.png"), linear-gradient(to right top, black 0%, rgb(70, 84, 12) 50%, rgb(82, 97, 14) 100%);
All help greatly appreciated
I would suggest putting the textured image on the background of the container div of the columns then for each column use that line shadow image with transparent background as the background property for each colum.
<style>
.container {
background: url(textureImg.png) repeat;
}
div[class^="col"] {
background: url(lineShadowImg.png) no-repeat;
}
</style>
<div class='container'>
<div class='colOne'>
//your content
</div>
<div class='colTwo'>
//your content
</div>
<div class='colThree'>
//your content
</div>
</div>
If you need to tweak the positioning of the line just use background-position. This will allow your columns to be as wide as they need to be without having to change your image for each.
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.