I want to archive a background linear-gradient (to right, from light pink to red) and fade out vertically (to bottom, to white color or opacity to 0), but it seems it's not possible to do it by using css linear-gradient.
background: linear-gradient(to left, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));
any ideas how to archive this kind of effect without using static image?
You need mask:
.box {
height:100px;
position:relative;
border:1px solid;
}
.box:before {
content:"";
position:absolute;
inset:0;
-webkit-mask:linear-gradient(#000,#0000);
background: linear-gradient(to left, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));
}
<div class="box"></div>
If you want to achieve a background gradient from light pink to red and then fade out on bottom.
This might help you.
.divX {
position: relative;
z-index: 0;
background: linear-gradient(to right, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));
/* Ignore these below */
width: 100%;
height: auto;
min-height: 150px;
}
.divX::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background: linear-gradient(180deg, transparent, rgb(255 255 255));
}
.divXcontent {
position: relative;
z-index: 3;
}
<div class="divX">
<div class="divXcontent">
<h1>test test</h1>
</div>
</div>
Then add another div inside .divX and set position:relative and z-index to 3, for the content to be on top of everything.
Related
My goal is to create a faded blue circle on black background.
However, there is a white square surrounding the circle, and it doesn't look good.
What can I do to get rid of this white background?
body {
background-color: black;
}
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: blue;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
}
<div class="circle"> </div>
You seems to overcomplicate a simple task:
body {
background-color: black;
}
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: radial-gradient(farthest-side,blue,#0000);
}
<div class="circle"> </div>
One way is to fade away with black instead of white.
body{
background-color:black;
}
.circle {
border-radius: 50%;
width:200px;
height:200px;
background-color:blue;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);
}
<div class="circle"> </div>
I have a DOM element:
<div style="background-image: url(layer1.png)">...</div>
I want to add next layer using CSS:
div {
background-image: url('layer2.png'),radial-gradient( rgba(255, 255, 255, 0.85) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
}
As a result i need to have DIV with all 3 layers as a background image.
Is it possible by pure HTML5 CSS3?
Inline styling totally replaces the properties defined by CSS for that element.
What you can do is create a parent element and child elements as layers, then layer it with the help of z-index and then use opacity to give it some transparency.
HTML
<div class="layers">
<div class="layer1" style="opacity: 0.2; background-image: url(foo.png);"> </div>
<div class="layer2" style="opacity: 0.4;"></div>
<div class="layer3" style="opacity: 0.2;"></div>
</div>
CSS
.layers{
position:relative;
width: 100px;
height: 100px;
}
.layer1, .layer2, .layer3{
position:absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
}
.layer1{ background-color: red; z-index: 0;}
.layer2{ background-color: orange; z-index: -1;}
.layer3{ background-color: pink; z-index: -2; }
JsFiddle
No, it's not possible. What will happen:
Your div {} rule has lower priority than inline css, so your inline css background-image will overwrite previous rule, not be appended to it.
Solution:
Use child element or :before/:after to apply layer1.png
.wrapper {
height: 200px;
width: 300px;
background-image: radial-gradient( rgba(255, 255, 255, 0.85) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
position: relative;
}
.wrapper div {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
}
body {
background-color: black;
}
<div class="wrapper"><div style="background-image: radial-gradient(rgba(0, 255, 0, 0.85) 10%, rgba(0, 245, 0, 0.19) 75%, rgba(0, 245, 0, 0) 90%);"></div></div>
I want background like this. How can I get this with pure CSS.
I have searched for this but I didn't find any answer.
I want to ignore usages of large background images.
UPDATE
I have tried like this (only with color)
background : linear-gradient(125deg, #3081ff 31%, #3081FF 78%, #307aff 33%, #307aff 25%)
But, I want to add image with color.
Here is Fiddle which I have tried Fiddle-Demo
And it have problem with responsive, you can check by resizing window.
Multiple background images:
div {
height: 200px;
width: 400px;
margin: auto;
border: 1px solid grey;
background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%), url(http://lorempixel.com/image_output/city-q-c-400-200-1.jpg);
}
<div></div>
Or a pseudo-element:
div {
height: 200px;
width: 400px;
margin: auto;
border: 1px solid grey;
background-image: url(http://lorempixel.com/image_output/city-q-c-800-400-1.jpg);
background-size: 100%;
background-position: center right;
background-repeat: no-repeat;
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%);
}
<div></div>
So, I am trying to use pure CSS to have a slight dropshadow that lays over a tab. I want it to fade out on the ends at 20% and 80%. I've been trying to acheive this for some time now, but finding myself not happy with the results so far.
Here's an image of what I want to have:
HTML:
<button type="button" class="btn">
<span>Button Text</span>
<span class="buttonshadow"></span>
</button>
CSS:
.btn {
-webkit-border-radius: 0px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 0px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 0px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 24px;
padding: 6px 16px 7px;
line-height: 1;
position: relative;
color: #ffffff;
background-color: #5CBCEC;
border-color: #5CBCEC;
display: inline-block;
margin-bottom: 0;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
overflow: visible;
}
.buttonshadow {
width: 120%;
height: 100%;
position: absolute;
top: 0;
left: -10%;
}
.buttonshadow:before {
content: "";
position: absolute;
z-index: 1;
top: -1px;
left: 0;
width: 100%;
height: 5px;
background: -webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.2), rgba(97, 97, 97, 0.0) 40%);
background: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.4), rgba(97, 97, 97, 0) 70%);
}
Here's my current fiddle so far: JSFiddle
Clearly this does not look the same. Any help is much appreciated!!!
If i understand the problem correctly you want the gradient outside the button on the edges.
problem lies in the .buttonshadow and .buttonshadow:before
I changed it to this
.buttonshadow {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -25px;
}
.buttonshadow:before {
content: "";
position: absolute;
z-index: 1;
top: -1px;
left: 0;
width: 130%;
height: 5px;
background: -webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.2), rgba(97, 97, 97, 0.0) 40%);
background: radial-gradient(ellipse at 50% 0%, rgba(55, 55, 55, 1), rgba(97, 97, 97, 0) 80%);
}
Check fiddle
http://jsfiddle.net/rLsbC/1/
you can then fiddle around with the gradient to get more what you want.
Hope this helps!
Note: If you want to change the width of the gradient change the width in .buttonshadow:before and the left attribute in .buttonshadow
This is one solution that may work for you.
Demo Fiddle
In order to get the fading at the ends I had to squish the radial gradient down a bit, and then position it to look right. I added it to the .btn class instead of a separate element.
CSS:
.btn:after {
content: '';
display: block;
position: absolute;
width: 120%;
height: 5px;
top: -2px;
left: -10%;
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 85%);
}
[me, earlier via comments] I’d try with just a linear gradient for the span over the whole width of the button, and then add a faded shadow via an elliptical gradient on both sides using :before/ :after elements on the span …
OK, I gave it a go now – http://jsfiddle.net/rLsbC/3/
Sorry, it’s Firefox only for now as I didn’t bother with vendor prefixes for other browsers – but to add those should be not a big deal. (For those that actually support radial gradients anyway.)
I replaced the shadow in the span element itself with a linear gradient,
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%,
rgba(97, 97, 97, 0) 100%);
and then added positioned :before/:after with an elliptical radial gradient positioned at the top right resp. top left corner of those generated elements, like this
background: -moz-radial-gradient(top right, ellipse cover, rgba(0, 0, 0, 0.4),
rgba(97, 97, 97, 0) 50%);
Had to make the span element itself a little higher to get the linear gradient and the elliptical ones stuck to the sides of it to match up.
If you take that as a basis and play around with the specific values of the gradients (and maybe the width/position of the generated elements), you should be able to get very close to what you want.
What I'm going to explain is a little complicated, so I made an image hoping it could help us.
Here is the large image.
In the top part of the page there is an header. It must have some characteristics:
it have to be full width but...
its content (the logo and the menu) is wrapped in a centered div, 960px of width
these two points are simple: I create an header with a fixed height and a 100% width, then a div with 960px of width and margin 0 auto so that it's always centered.
Now it comes the difficulties:
the background color, as you can see, is transparent, in fact we see the photo under the header. And this transparency is not the same for all the header: the side in which I should locate the logo has a certain value of opacity, and the side of menu has another value. And, moreover, the two sides are separated by a diagonal line.
It seems to be easy, but I don't find a solution to set the background in the way it appears in the image without having problems.
Here is a pure CSS solution.
Update Version:
To implement full-width multiple colored header, I changed my mind and decided to use CSS3 Gradient, Nowadays all modern web browsers support linear-gradient, but can use a transparent image or SVG as fallback for old browsers.
HTML:
<div class="header">
<div class="wrapper">
<div class="left">Left</div>
<div class="right">right side</div>
</div>
</div>
CSS:
.header {
background: -webkit-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
background: -moz-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
background: -ms-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
background: -o-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
background: linear-gradient(110deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
min-width: 960px;
width: 100%;
}
.wrapper {
width: 960px;
margin: 0 auto;
outline: 2px dashed green; /* Just for demo */
}
.left, .right {
height: 35px;
line-height: 35px;
}
.left {
float: left;
width: 350px;
}
.right {
text-align: right;
margin-left: 350px;
}
Here is the JSBin Demo.
Previous Answer:
I've used :before and :after pseudo-elements to implement the bevel corners. You can simply transparent image instead, if you want to support old IE versions.
CSS:
.left, .right {
position: relative;
height: 35px;
line-height: 35px;
}
.left {
float: left;
width: 200px;
background-color: rgba(255, 200, 0, .5);
}
.right {
background-color: rgba(255, 150, 0, .5);
margin-left: 225px;
}
.left:after {
content: ' ';
display: block;
border-style: solid;
border-color: rgba(255, 200, 0, .5) transparent transparent transparent;
border-width: 35px 25px 0 0;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -25px;
}
.right:before {
content: ' ';
display: block;
border-style: solid;
border-color: transparent transparent rgba(255, 150, 0, .5) transparent;
border-width: 0 0 35px 25px;
width: 0;
height: 0;
position: absolute;
top: 0;
left: -25px;
}
JSBin Demo
The CSS color property can be used by rgba method.
background:rgba(RED,GREEN,BLUE,OPACITY);
For example if you want to make background red with an opacity of of 50% then you have to use the following code.
background:rgba(255,0,0,0.5);
Things you must know
the maximum value for color (red green or blue) is 255 while lowest value is 0.
The highest value for opacity is 1 while lowest is 0.