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).
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.
I want to create a background with two gradients - layered atop one another.
I created the below example, and it seems like I can't put multiple gradients together. (The example was created based on MDN-Using multiple backgrounds & MDN-gradient)
.radial-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
.linear-repeat {
background: repeating-linear-gradient(45deg,
blue, blue 5px, white 5px, white 10px);
}
.combined-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255)),
repeating-linear-gradient(45deg, blue, blue 5px, white 5px, white 10px);
}
<div class="radial-gradient">radial gradient</div><br/>
<div class="radial-gradient linear-repeat">linear gradient</div><br/>
<div class="radial-gradient linear-repeat">combined gradient 1</div><br/>
<div class="combined-gradient">combined gradient 2</div>
Maybe the following constraint prevents layering gradients:
Only the last background can include a background color.
If it's not allowed to layer two gradients as a background, how should I layer them in another way?
I think what you're looking for is this.
What's the problem with your code?
Well, each of your gradient is non-transparent, so one will overlap the other completely and that's why only one is visible. The workaround is, you make use of rgba(x,y,z,alpha) to give them alpha transparency which gives the background a fade effect to see through each other.
.combined-gradient1 {
background: repeating-linear-gradient(45deg, rgba(00, 00, 255, 0.8), rgba(00, 00, 255, 0.8) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px), radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8));
}
.combined-gradient2 {
background: radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8)), repeating-linear-gradient(45deg, rgba(00, 00, 255, 1), rgba(00, 00, 255, 1) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}
<div class="combined-gradient1">combined gradient 1</div>
<br>
<div class="combined-gradient2">combined gradient 2</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>
This gradient from one color to another only happens in chrome.
In Firefox:
In Chrome:
The full code:
background: rgb(216, 216, 216);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, rgba(255, 255, 255, 1)), color-stop(33%, rgba(216, 216, 216, 1)), color-stop(33%, rgba(255, 255, 255, 1)), color-stop(70%, rgba(255, 255, 255, 1)), color-stop(70%, rgba(216, 216, 216, 1)), color-stop(93%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8d8d8', endColorstr='#ffffff', GradientType=0);
Yesterday I stumbled upon a similar problem and decided to post my solution.
I am using SCSS but I really don't think it matters.
The idea is to use two maps: one with colors and one with stops.
Then iterate over the maps and generate multiple backgrounds.
TL;DR You can see the demo live here
I am using a mixin for this because I like to reuse things:
/**
* Create a single background image using CSS gradients
* without blur between color stops.
* This can be achieved with a single linear-gradient,
* but in only Firefox will render it properly.
* All other browsers will blur the edges of the stops.
*
* #param $colors - Map of colors
* #param $stops - Map of color stops
* #param $direction - One of 'horizontal' or 'vertical'
* #return - Multiple background declaration consisting of
* many linear gradients
*
* It's important that the keys of both maps are the same.
*/
#mixin rainbow($colors, $stops, $direction: 'horizontal') {
$dir: to right;
$background: '';
#if $direction == 'vertical' {
$dir: to bottom;
}
#each $name, $color in $colors {
$list: map-keys($colors);
$slash: unquote('/');
$index: index($list, $name);
$comma: unquote(', ');
#if $index == length($list) {
$comma: unquote('');
}
$offset: map-get($stops, $name);
$gradient: linear-gradient($dir, $color 0%, $color 100%);
$size: $offset 100%;
#if $direction == 'vertical' {
$size: 100% $offset;
}
// prettier-ignore
$background: $background + $gradient no-repeat 0% 0% $slash $size + $comma;
}
$background: unquote($background);
background: $background;
}
And then I am creating two maps - one with colors and one with color stops.
It's important to mention that the keys of the maps should be the same:
// DEMO
body {
background: black;
}
div {
$blue: blue;
$green: green;
$orange: orange;
$purple: purple;
$red: red;
$colors: (
'blue': $blue,
'green': $green,
'orange': $orange,
'purple': $purple,
'red': $red
);
$stops: (
'blue': 30%,
'green': 45%,
'orange': 62%,
'purple': 87%,
'red': 100%
);
height: 20px;
#include rainbow($colors, $stops);
}
Now let's see how will it work for your use case.
I am using a dummy span element:
span {
$white: #fff;
$gray: #d8d8d8;
$colors: (
'1': $white,
'2': $gray,
'3': $white,
'5': $gray
);
$stops: (
'1': 5%,
'2': 33%,
'3': 70%,
'5': 100%
);
height: 200px;
display: block;
#include rainbow($colors, $stops, 'vertical');
}
Use Browser prefixes for different browsers, for mozilla, go through this.
background: -moz-linear-gradient(top, rgba(255,255,255,1) 5%,rgba(216,216,216,1) 33%,rgba(255,255,255,1) 33%,rgba(255,255,255,1) 70%,rgba(216,216,216,1) 70%,rgba(255,255,255,1) 93%);
i had the same problem, here's a workaround i just found, at least works for me (Chrome 48.0):
For direction (first argument) use angle instead of descriptive direction, and for Chrome change the angle just slightly, like by 0.01deg. It won't be noticeable, but it will render crisp.
You can put it into browser specific property, so other browsers aren't affected (because it will work the other way around for them - slightly slanted direction will get you slightly blurry gradient).
Just bear in mind that -webkit-linear-gradient has different angle defaults: vertical 'to bottom' gradient equals 180deg angle value in other browsers, while in webkit it's -90deg.
Thus, for vertical gradient, add:
-webkit-linear-gradient(-89.99deg, colorstops....)
...and add it after linear-gradient, to override it, because Chrome reads both declarations (standard and vendor-prefixed)
I am try to get the equivalent of:
background-image: linear-gradient(90deg, rgb(166, 230, 230), rgb(231, 231, 231) 5%, rgb(255, 255, 255) 15%);
using webkit gradient.
Use left instead of 90deg for -webkit.
http://jsfiddle.net/Wyv4f/1/