Related
Essentially, I want to create an element that combines a "to right" gradient with a color stop at a certain percentage and another color stop for the remaining width with a "to bottom" gradient that fades both colors to transparent. Getting the color stop part is easy, getting the fade is easy; I just can't figure out how to get both.
/*I can get this:*/
div {
width: 500px;
height: 100px;
}
.color-change {
background: linear-gradient(to right, rgb(255, 175,157) 80%, rgb(255, 95, 89) 80%);
}
/*or this:*/
.fade {
background:linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
/* but not both*/
<div class="color-change"></div>
<div class="fade"></div>
This probably isn't hard but I can't find any examples that do exactly this. I could just use a png., but it seems as though this ought to be doable in CSS. Thanks for any suggestions (or better, solutions).
Use CSS ::before (:before)
In CSS, ::before creates a pseudo-element that is the first child of
the selected element. It is often used to add cosmetic content to an
element with the content property. It is inline by default. https://developer.mozilla.org
div {
width: 500px;
height: 100px;
}
.fade {
background: linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
position: relative;
}
.fade::before {
display: inline-block;
content: "";
height: 100%;
width: 20%;
background: black;
position: absolute;
right: 0;
background: linear-gradient(0deg, rgba(246,115,115,1) 4%, rgba(250,192,194,1) 34%, rgba(255,233,234,1) 66%, rgba(255,255,255,1) 100%);
}
<div class="fade"></div>
Multiple background layer can do it:
.color-change {
--p:80%; /* this is your percentage */
background:
linear-gradient(to bottom, transparent, #fcc1b0) left,
linear-gradient(to bottom, transparent, rgb(255, 95, 89)) right;
background-repeat:no-repeat;
background-size:var(--p) 100%,calc(100% - var(--p)) 100%;
width: 500px;
height: 100px;
margin:10px;
}
<div class="color-change"></div>
<div class="color-change" style="--p:50%"></div>
<div class="color-change" style="--p:20%"></div>
Or you can mask it with a pseudo element. This is real transparent.
body {
background: dodgerblue;
}
div {
width: 500px;
height: 100px;
}
.color-change {
-webkit-mask: linear-gradient(to bottom, transparent, #000);
mask: linear-gradient(to bottom, transparent, #000);
position: relative;
}
.color-change:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgb(255, 175, 157) 80%, rgb(255, 95, 89) 80%);
}
<div class="color-change"></div>
Header left and right side should display white and blue colors while body background-color grey.
White color for left side area with logo inside header and blue color for right one.
Using colorzilla, I've made background for the container1 horizontally half blue for the right side. Then I included a couple pseudo elements for razor-blade effect. And when I set background-color for body I realized that the area with my logo inside header colored with body color.
I read about linear-gradient but I was told that using it I'll face cross-browsing issues because even if you do it the way it should still there are a list of versions or even browsers that wouldn't understand it.
That's exactly where I find myself stuck. I need that all browsers and versions understood this code or as much as possible in this case. Please tell me how can I do that without using Colorzilla and linear-gradient.
#media only screen and (min-width: 900px) {
.container1 {
width: 100%;
margin: 0 auto;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+44,1e5799+44,7db9e8+45,1e5799+45,7db9e8+46,7db9e8+46,7db9e8+46,7db9e8+46,7db9e8+46,7db9e8+46,1e5799+46,7db9e8+50,1e5799+50,1e5799+100&0+44,0+46,1+47 */
background: -moz-linear-gradient(left, rgba(30, 87, 153, 0) 44%, rgba(30, 87, 153, 0) 45%, rgba(30, 87, 153, 0) 46%, rgba(30, 87, 153, 1) 47%, rgba(30, 87, 153, 1) 50%, rgba(30, 87, 153, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(30, 87, 153, 0) 44%, rgba(30, 87, 153, 0) 45%, rgba(30, 87, 153, 0) 46%, rgba(30, 87, 153, 1) 47%, rgba(30, 87, 153, 1) 50%, rgba(30, 87, 153, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(30, 87, 153, 0) 44%, rgba(30, 87, 153, 0) 45%, rgba(30, 87, 153, 0) 46%, rgba(30, 87, 153, 1) 47%, rgba(30, 87, 153, 1) 50%, rgba(30, 87, 153, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#1e5799', GradientType=1);
/* IE6-9 */
}
.logo {
width: 250px;
}
header {
display: flex;
justify-content: space-between;
padding: 0em 3.15em;
}
.cont {
position: relative;
}
.cont::before {
position: absolute;
content: '';
width: 40em;
height: 15rem;
background: blue;
bottom: -.8em;
z-index: -1;
}
.cont::before {
left: 42%;
transform: skew(-30deg);
}
.cont::after {
position: absolute;
content: '';
width: 1.6em;
height: 10rem;
background: green;
bottom: -.8em;
}
.cont::after {
left: 38.9%;
transform: skew(-30deg);
}
<div class="container1">
<div class="cont">
<header>
<img src="/images/logo.png" alt="O-Credit logo" class="logo">
<nav>
<div id="menu-bar" class="hide-desk">
<div class="menu" id="menu">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
</div>
<ul class="show-desk hide-mob" id="nav">
<li id="exit" class="exit-btn close hide-desk">
</li>
<li>Обрати позику</li>
<li>Компанії</li>
<li>Види позик</li>
<li>Блог</li>
<li></li>
</ul>
</nav>
</header>
</div>
</div>
Left side of header with logo to show background white. Right side of the same header to show background blue. And set Body to show background grey everywhere but header.
.header {
display: flex;
justify-content: space-between;
padding: 0em 3.15em;
background: linear-gradient(to right, blue 50%, red 50%)
}
The border-top-color is #9b9c9d and the border-bottom-color is #f6f9fc. The gradients are intended to transition the top color to the bottom color on the border-left and border-right.
How do I mix border-left-image and border-right-image with border-top-color and border-bottom-color?
HTML
<a class="button-style">Evil Whales</a>
CSS
.button-style
{
background: linear-gradient(to bottom,
rgba(129,232,117,1) 0%,
rgba(129,232,117,1) 50%,
rgba(62,179,48,1) 51%,
rgba(62,179,48,1) 100%);
border-top-color: #9b9c9d;
border-left-image: linear-gradient(to bottom,
rgba(155,156,157,1) 0%,
rgba(246,249,252,1) 100%);
border-bottom-color: #f6f9fc;
border-right-image: linear-gradient(to bottom,
rgba(155,156,157,1) 0%,
rgba(246,249,252,1) 100%);
border-style: solid;
}
You can stack two gradients and use background-size, padding and background-clip to draw the border:
.button-style {
background: linear-gradient(to bottom, rgba(129, 232, 117, 1) 0%, rgba(129, 232, 117, 1) 50%, rgba(62, 179, 48, 1) 51%, rgba(62, 179, 48, 1) 100%) no-repeat
/* use for background */
, linear-gradient(to bottom, rgba(155, 156, 157, 1) 0%, rgba(246, 249, 252, 1) 100%)
/* use for border */
;
background-size: 100% 100%, auto auto;
background-clip: content-box, border-box;
padding: 3px;
}
html {
padding: 3em;
background: gray;
<a class="button-style">Evil Whales</a>
Got it to work though just in Chrome, Firefox and IE aren't working.
background: linear-gradient(to bottom,
rgba(129,232,117,1) 0%,
rgba(129,232,117,1) 50%,
rgba(62,179,48,1) 51%,
rgba(62,179,48,1) 100%);
border-image: linear-gradient(to bottom,
rgba(155,156,157,1) 0%,
rgba(246,249,252,1) 100%) 25 30 10 20 repeat;
border-image-repeat: stretch;
border-width: 4px;
It should be noted that there is no border-left-image and related properties; unfortunately not one of the better documented CSS properties.
I'd like to take a style for graded colors and make it into bars. So each bar would be a solid color, from red at the top, then slightly orange, then more orange, then even more orange, then orange, then orange but a bit yellow, etc.
Has anyone figured this out as a css trick?
The code I'm starting from is:
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}
Something like this maybe?
.gradients {
background: orange;
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, rgba(255, 0, 0, 1)),
color-stop(20%, rgba(255, 255, 0, 1)),
color-stop(40%, rgba(0, 255, 0, 1)),
color-stop(60%, rgba(0, 0, 255, 1)),
color-stop(80%, rgba(255, 0, 255, 1)),
color-stop(100%, rgba(255, 0, 0, 1)));
}
Do you want something like this?
div {
width: 400px;
height: 400px;
background: repeating-linear-gradient(to right, transparent 0%, transparent 30%, white 30%, white 80%, transparent 80%, transparent 100%), linear-gradient(to right, red 0%, yellow 100%);
background-size: 10px 100%, 100% 100%;
}
Working Fiddle
It's really just a matter of playing with colors...
HTML:
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
css:
div { height: 20px; margin: 0 0 10px 0; }
.a {
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(150,0,0) 100%);
}
.b {
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(150,100,0) 100%);
}
.c {
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(200,150,0) 50%);
}
.d {
background: linear-gradient(to bottom, rgb(255,60,0) 0%, rgb(250,200,0) 90%);
}
.e {
background: linear-gradient(to bottom, rgb(255,150,0) 0%, rgb(250,250,0) 90%);
}
.f {
background: linear-gradient(to bottom, rgb(255,200,0) 0%, rgb(250,250,0) 90%);
}
fiddle
As answers clearly show there are a few ways to do it.
You could do something like this with linear-gradient and border
body, html {
margin: 0;
padding: 0;
}
#grad {
min-height: 100vh;
color: white;
font-size: 30px;
display: flex;
align-items: center;
background: linear-gradient(to bottom, #81EDDD 14.3%, #94DFC1 14.3%, #94DFC1 28.6%, #ABD2A3 28.6%, #ABD2A3 42.9%, #C0C38A 42.9%, #C0C38A 57.2%, #D3B56C 57.2%, #D3B56C 71.5%, #EAA750 71.5%, #EAA750 85.8%, #FF9934 85.8%);
}
p {
padding: 0 50px;
max-width: 250px;
}
<div id="grad">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis.</p>
</div>
I have a div which sits in another div which I am trying to color the background of and have it be about 50% of the solid color #0F7BD5, and then blur into a more transparent version of that color. I have come up with this CSS but it's showing a sharp edge instead of the blur / fading effect that I'm trying to create. This is the CSS that I've come up with:
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
-webkit-background-background-image: -webkit-linear-gradient(-180deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
background-image: -moz-linear-gradient(270deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
background-image: linear-gradient(270deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
The colors in-between don't matter, as long as it starts with this #0F7BD5 with no transparency, and ends with this rgba(15,123,213,0.15).
There is no need to specify extra color-stop positions as long as the colors in between do not matter. Just specify the start and end colors and that should be enough (first div in snippet). The browser would automatically split the colors evenly and gradually.
When you add extra color-stop positions in between, the gradient is forced to have the specified color at the specified point and this produces the sharp edge effect (second div in snippet). Sharp edges are produced because of uneven distribution of colors. For example, for the first 40% of the gradient, the alpha changes from 1 to 0.7 but for the next 5% (40% to 45%), it suddenly drops by 0.1.
div {
position: relative;
display: inline-block;
height: 200px;
width: 200px;
}
#gradual:after {
position: absolute;
content: '';
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
background-image: linear-gradient(270deg, #0F7BD5, rgba(15, 123, 213, 0.15));
}
#sharp:after {
position: absolute;
content: '';
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
background-image: linear-gradient(270deg, #0F7BD5 0, rgba(15, 123, 213, 0.7) 40%, rgba(15, 123, 213, 0.6) 45%, rgba(15, 123, 213, 0.52) 50%, rgba(15, 123, 213, 0.4) 55%, rgba(15, 123, 213, 0.3) 59%, rgba(15, 123, 213, 0.2) 63%, rgba(15, 123, 213, 0.15) 100%);
}
<div id="gradual"></div>
<div id="sharp"></div>