Here is a linear gradient that creates triangles in the top right of bottom left of the div, however, i can't work out how to make for the top right only, i.e. remove the bottom left. can anyone help?
Here is the codepen
http://codepen.io/pete3795/pen/LZVLZK
background: linear-gradient(45deg, rgba(237,165,9,1) 0%, rgba(237,165,9,1) 5%, rgba(231,229,219,1) 5%, rgba(231,229,219,1) 10%, rgba(240,239,235,1) 10%, rgba(240,239,235,1) 90%, rgba(231,229,219,1) 90%, rgba(231,229,219,1) 95%, rgba(237,165,9,1) 95%, rgba(237,165,9,1) 100%);
Remove the one from 0% to 5% and the one from 5% to 10%
Basically here you have to imagine a page with a series of lines dividing it, rotated by 45 degrees.
So from 0% of the page to 5% (bottom left), it's orange - rgba(237,165,9,1) 0%, rgba(237,165,9,1) 5%
From 5% to 10% - grey: rgba(231,229,219,1) 5%, rgba(231,229,219,1) 10%,
From 10% to 90% - light grey: rgba(240,239,235,1) 10%, rgba(240,239,235,1) 90%,
From 90% to 95% - grey: rgba(231,229,219,1) 90%, rgba(231,229,219,1) 95%,
And Finally from 95% to 100% - orange: rgba(237,165,9,1) 95%, rgba(237,165,9,1) 100%
.test {
min-height: 17rem;
background: linear-gradient(45deg, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 90%, rgba(231, 229, 219, 1) 90%, rgba(231, 229, 219, 1) 95%, rgba(237, 165, 9, 1) 95%, rgba(237, 165, 9, 1) 100%);
<div class="test">
</div>
Or as GCyrillus pointed out - if you would prefer to have your corner at the start of your css instead of the end, you could do the following:
.test {
min-height: 17rem;
background: linear-gradient(-135deg, rgba(237, 165, 9, 1) 0%, rgba(237, 165, 9, 1) 5%, rgba(231, 229, 219, 1) 5%, rgba(231, 229, 219, 1) 10%, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 100%);
}
<div class="test">
</div>
Related
I'm attempting to show a white gradient overlay from just the left side. A liner gradient, from left to right. Where only the left side is white and the right side is transparent. Is this possible with css?
try this
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
doing this, you are setting white-transparent gradient color in your page from left to right
You can try something like this one.
background: rgba(255, 255, 255, 1);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);
background: -webkit-gradient(left top, right top, color-stop(50%, rgba(255, 255, 255, 1)), color-stop(72%, rgba(246, 246, 246, 0.9)), color-stop(100%, rgba(237, 237, 237, 0.78)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1);
It is possible in CSS, see this code snippet for example :
body {
background-color: #9999ff;
}
.bg-demo {
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
<div class="bg-demo">
<p>Don't mind me I'm just a very long text, like veeeery long ! I know I'm long right ? I know y'all know better my cousin Lorem Ipsum but hey ! Is he that long ? I don't think so ! Like I said, I am so long you probably won't ever find something as long as me.</p>
<p>So anyways what is like being long ? It is much like being tall except on a much different axis. Also instead of growing up I am basically "longging left", right ? Just in case that wasn't obvious, I just did a joke, a short one. Yeah sure, that is quite interesting to have a short joke for a text as long as me</p>
</div
My whole body has a blue background but my .bg-demo div has a linear-gradient starting from the left and going from white to transparent.
It's easy to create a rainbow in CSS using linear-gradient.
#grad1 {
height: 200px;
background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
}
<div id="grad1"></div>
But look at it! This gradient is aesthetically horrifying. It's streaky, there's ugly strips of pure colour where the endpoints meet, it doesn't loop very well, it's not smooth, and the colours clearly contrast against each other when they should seamlessly blend.
In short: it's a terrible gradient.
I'd like to find the perfect gradient. One that encompasses the rainbow in a slick, smooth way, one that doesn't leave any obvious bumps or visual tearing. Instead of a spiky mess, this gradient is a smooth curve.
Does this gradient exist?
You need to choose colors that will blend nicely together and more color steps.
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);
.rainbow-box {
width: 80vw;
height: 200px;
border-radius: 5px;
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 20%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);
}
<div class="rainbow-box"></div>
I made it using CSS gradient generator:
https://cssgradient.io/
You can get something that looks better by overlaying the individual red, green, and blue colours, trying to match the human colour cone sensitivities.
Here's an example, but it could be improved by adjusting some of the % numbers in the linear-gradients, and by having smother gradient shapes (currently triangles with cut-off tops).
<!DOCTYPE html>
<html>
<head>
<title>Rainbow</title>
<meta charset="UTF-8" />
<style>
* { box-sizing: border-box; }
.separate { width: 100%; height: 10em; }
.separate>* { width: 100%; height: 100%; margin-top: 1em; }
.overlay { width: 100%; height: 10em; filter: brightness(3); }
.overlay>* { width: 100%; height: 100%; position: absolute; }
.overlay>:nth-of-type(1) { opacity: 1; }
.overlay>:nth-of-type(2) { opacity: .5; }
.overlay>:nth-of-type(3) { opacity: .33; }
.overlay>:nth-of-type(4) { opacity: .25; }
.blue { background: linear-gradient(
90deg, rgb(0,0,256) 0%, rgb(0,0,256) 5%, rgb(0,0,0) 20% ); }
.green { background: linear-gradient(
90deg, rgb(0,0,0) 0%, rgb(0,256,0) 25%, rgb(0,256,0) 35%, rgb(0,0,0) 55% ); }
.red { background: linear-gradient(
90deg, rgb(0,0,0) 15%, rgb(256,0,0) 35%, rgb(256,0,0) 45%, rgb(0,0,0) 100% ); }
.blue2 { background: linear-gradient(
90deg, rgb(0,0,0) 65%, rgb(0,0,256) 95%, rgb(0,0,256) 100% ); }
</style>
</head>
<body>
<h1>Rainbow</h1>
<div class="overlay">
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
<div class="blue2"></div>
</div>
<div class="separate">
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
<div class="blue2"></div>
</div>
</body>
</html>
"Rainbow" or "Color wheel" is often referred to as Hue.
CSS has the hsl() function (stands for Hue, Saturation, Lightness).
To create the gradients, simply divide the 360 hue degrees by 12 main colors (= 30 deg. steps).
Apply increments on the Hue by 30 degrees:
#hue {
height: 40px;
background: linear-gradient(90deg,
hsl(0, 100%, 50%),
hsl(30, 100%, 50%),
hsl(60, 100%, 50%),
hsl(90, 100%, 50%),
hsl(120, 100%, 50%),
hsl(150, 100%, 50%),
hsl(180, 100%, 50%),
hsl(210, 100%, 50%),
hsl(240, 100%, 50%),
hsl(270, 100%, 50%),
hsl(300, 100%, 50%),
hsl(330, 100%, 50%),
hsl(360, 100%, 50%)
);
}
<div id="hue"></div>
I’m not a CSS programmer, but just using the linear gradient fill in MS Word/Excel/PowerPoint, I like to create my rainbow with just the following 4 RGB colors:
(255,0,0) ; (255,255,0) ; (0,192,255) ; (192,0,255).
That looks pretty good to me, and with very little effort! {See Images >>}
Another variation of the rainbow above is “Sunset over the Ocean”. (It will make a great background for a webpage). Start with the rainbow, replace the last (purple) color with the following dark blue one: (60,70,200). Then move the yellow slider right up against the light blue one (mine is at 60% and 61%). And that’s it! {See Image >>}
I managed to do it in CSS! :-) >>
.Rainbow-4Color-Mix
{ width:200px; height:350px;
background: linear-gradient(180deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 255, 0, 1) 33%,
rgba(0, 192, 255, 1) 66%,
rgba(192, 0, 255, 1) 100%);
}
.Gap {width:200px; height:50px; background-color:white;}
.Ocean-Sunset
{ width:200px; height:350px;
background: linear-gradient(180deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 255, 0, 1) 60%,
rgba(0, 192, 255, 1) 61%,
rgba(60, 70, 200, 1) 100%);
}
<div class="Rainbow-4Color-Mix"></div>
<div class="Gap"></div>
<div class="Ocean-Sunset"></div>
Just an idea: Instead of explicitly specifying all of the colors in the rainbow, you could just specify red, yellow, and blue. The colors should then just blend naturally.
Another idea: If you don't like these particular shades of yellow, red, and blue, you could try custom ones with RGB values. The basic idea is the same though with only using the three primary colors in the rainbow.
EDIT: You can add violet back in by adding red at the end.
#grad1 {
height: 200px;
background: linear-gradient(45deg, red, yellow, blue, red);
}
<div id="grad1"></div>
I am taking a very popular example from here. I want to understand how these patterns are being generated from gradient properties. I have just taken and compiled few examples below. Need to understand how to pass thing in gradient property so I can generate my own patterns.
.pattern {
height: 100px
}
.pattern1 {
background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), #8a3;
background-size: 20px 20px;
}
.pattern2 {
background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), #444;
background-size: 16px 48px;
}
.pattern3 {
background: radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 31%), radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 31%) 50px 50px;
background-color: #b03;
background-size: 100px 100px;
}
.pattern4 {
background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #EC173A;
}
<div class="pattern1 pattern"></div>
<div class="pattern2 pattern"></div>
<div class="pattern3 pattern"></div>
<div class="pattern4 pattern"></div>
If you want to understand how each pattern is built, you should deconstruct it by making it bigger (4x in following example) and replace each color by a distinct and more visible one.
Below, for the second pattern, I replaced background-color #444 by transparent at the end of line (tomato wasn't as clear) and replaced each occurence of #999 by a random color like blue, red, etc.
EDIT: and added a new line after each comma. One *-gradient per line shows there are 3 of them and a background-color.
.pattern {
height: 192px;
}
.pattern2 {
background: linear-gradient(63deg, red 23%, transparent 23%) 7px 0,
linear-gradient(63deg, transparent 74%, blue 78%),
linear-gradient(63deg, transparent 34%, darkgreen 38%, #999 58%, transparent 62%),
transparent;
background-size: 64px 192px;
}
<div class="pattern2 pattern"></div>
so I'm having a slight issue. I need some way to get my background color of RGB(151,151,151) to be set as a base for the preceding code. I'll copy it down below
body {
background-image: url(sd_back2.jpg);
background: -webkit-radial-gradient(circle closest-corner at 40% 70% , #ffffff 15%, rgba(151,151,151,0.5) 50% );
background: -webkit-radial-gradient (circle closest-corner at 80% 40% , #ffffff 15%, rgba(0,0,0,0) 30% );
background: -webkit-radial-gradient ( closest-side at 10% 20% , #ffffff 20%, rgba(0,0,0,0) 45% );
background: -webkit-radial-gradient (farthest-side at 90% 10% , #ffffff 15%, rgba(0,0,0,0) 40% );
background-color
If you see any other issues please let me know thanks.
In order to achieve the effects you would need to group the background image and radial gradients together into a background
try this:
body {
background: url(sd_back2.jpg),
radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
radial-gradient(closest-corner at 80% 40%, white 15%, rgba(0, 0, 0, 0) 30%),
radial-gradient(closest-side at 10% 20%, white 20%, rgba(0, 0, 0, 0) 45%),
radial-gradient(5% 5% at 90% 10%, white 15%, rgba(0, 0, 0, 0) 40%);
background-color: rgb(151,151,151);
}
this will combine all the effects instead of them overwriting each other.
What do you mean by"set as a base"? If you want your color to display if the gradient doesn't work, just do exactly as you have done...
body {
background-image: url(sd_back2.jpg);
background: -webkit-radial-gradient(circle closest-corner at 40% 70% , #ffffff 15%, rgba(151,151,151,0.5) 50% );
background: -webkit-radial-gradient (circle closest-corner at 80% 40% , #ffffff 15%, rgba(0,0,0,0) 30% );
background: -webkit-radial-gradient ( closest-side at 10% 20% , #ffffff 20%, rgba(0,0,0,0) 45% );
background: -webkit-radial-gradient (farthest-side at 90% 10% , #ffffff 15%, rgba(0,0,0,0) 40% );
background-color: rgb(151,151,151);
}
I'm wanting to recreate the background pattern on https://meta.stackexchange.com/, and was wondering if it's achievable through CSS gradients?
I've managed to do the squares, but adding the dashed lines is proving troublesome.
background-color: #16A6DA;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
background-size:50px 50px;
http://jsfiddle.net/04fjos8x/
I suggest you to take a look in the following links. They're CSS generators which could save you some time. I hope they help you.
Ultimate CSS Gradient Generator
Linear gradients
CSS background patterns - this is good
Well its not semantic but its what you requested i think:
http://cssdeck.com/labs/full/zfogyyuf
I created a lot of empty div-s and added borders to those divs. Using the borders of the divs created using only HTML & CSS a design like you requested.
Probably some jQuery/Javascript could have been used there too to "infinitely" create new empty divs but i didnt wanted to use javascript since it was just an easy example.
http://jsfiddle.net/04fjos8x/1/
Apply your initial grid to your html then apply this to your body:
body {
width: 100%;
background-image: linear-gradient(0deg, transparent 24%, rgba(22, 166, 218, 1) 25%, rgba(22, 166, 218, 1) 26%, transparent 27%, transparent 74%, rgba(22, 166, 218, 1) 75%, rgba(22, 166, 218, 1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(22, 166, 218, 1) 25%, rgba(22, 166, 218, 1) 26%, transparent 27%, transparent 74%, rgba(22, 166, 218, 1) 75%, rgba(22, 166, 218, 1) 76%, transparent 77%, transparent);
background-size: 10px 10px;
height: 100%;
}
Make sure your html has its width and height set to 100%.
Basically applying blue lines on top of your white lines at a smaller distance (background-size).