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.
Related
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>
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>
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'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).
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/