Related
I have an image section with a gradient layer that was built into the stylesheet of the theme. What in this block of code do I need to change to reduce the gradient?
.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
Any help with handling this block of code is appreciated.
To reduce the gradient you should change the background gradient values for example :
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
The previous style it start with opacity 0.2 at 0% of the height and end with opacity 0.9 at 100% of the height, you can change those opacity values as you need.
let say that you want to start with 0.2 and end with 0.5, the style should be like this :
background: -moz-linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%)
the style :
.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.3)), color-stop(80%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
Demo : https://jsfiddle.net/IA7medd/rnjunkod/
I use a <div class="menu"></div> and I set a background color with a gradient.
It floats from red in the top to white in the Bottom. Here is my .css code:
.menu {
background-color: #FFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#791014), to(#FFF));
background-image: -webkit-linear-gradient(top, #791014, #FFF);
background-image: -moz-linear-gradient(top, #791014, #FFF);
background-image: -ms-linear-gradient(top, #791014, #FFF);
background-image: -o-linear-gradient(top, #791014, #FFF);
background-image: linear-gradient(top, #791014, #FFF);
clear: both;
}
I like the starting and end color. My question is, if there is a way that I can change how it flows from red (top) to white (bottom)
For example that it switches very much earlier to white, so that I have the dark red at the beginning of the top but in the middle it is already much more white.
In other words, I want to change how fast it transitions from red to white.
If you want the transition between the colors to happen quicker than normal , just change the point by where the transition should be fully completed. When just two colors are given without any color-stop percentage then the first color starts at 0% and the in between colors are calculated such that second color is reached at 100% mark (100% = container's height by default or background-size in Y-axis if specified). Instead of that give a lower value for the white color. In the below snippet, I have given it as 60% and so the background reaches white color by the time it reaches 60% of the container's height.
Note:
100% = Container's height (default) or background-size in Y-axis (if it is specified) for a vertical gradient.
100% = Container's width (default) or background-size in X-axis (if it is specified) for horizontal gradient.
div {
float: left;
height: 100px;
width: 200px;
line-height: 100px;
text-align: center;
margin-right: 5px;
}
.menu-60 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: linear-gradient(top, #791014 0%, #FFF 60%);
}
.menu-40 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: linear-gradient(top, #791014 0%, #FFF 40%);
}
.menu-80 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: linear-gradient(top, #791014 0%, #FFF 80%);
}
br {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>Red to White at 60%</h3>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<br/>
<h3>Red to White at 40%</h3>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<br/>
<h3>Red to White at 80%</h3>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>
You can use colour stops to achieve this like
background: -moz-linear-gradient(top, #791014 0%, #ffffff 28%);
background: -webkit-linear-gradient(top, #791014 0%,#ffffff 28%);
background: linear-gradient(to bottom, #791014 0%,#ffffff 28%);
You could use a tool like http://www.colorzilla.com/gradient-editor/ to easily tweak this visually and have the code generated for you.
http://colorzilla.com/gradient-editor/#791014+0,ffffff+28
I've some scenario where I should use multiple background color to one div. It's better for me rather than using background images or additional div. But, I can't find easier way to use it by CSS. So, I need help about some scenario. Please, see the image:
(1) I want to build "A". for that I wrote:
div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }
But, after writing that code, it'll like "B". But, I want exactly like "A". So, by css/css3 how can I do it(without adding more divs)?
(2) Is it possible to make one portion smaller than other portion? For example, at "C", blue color is smaller(at height) than the other portion. How, can I apply multiple background color to one div with making one portion smaller like "C"(without adding additional divs to "C")?
Update:
After #Mohammad's answer, I've tried with that way. But, for "C" scenario, I can't decrease the height of blue portion. Can you please, tell me how can I do it?
jsfiddle.net/mFjQ6
The A div can actually be made without :before or :after selector but using linear gradient as your first try. The only difference is that you must specify 4 positions. Dark grey from 0 to 50% and ligth grey from 50% to 100% like this:
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);
As you know, B div is made from a linear gradient having 2 positions like this:
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%);
For the C div, i use the same kind of gradient as div A ike this:
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
But this time i used the :after selector with a white background like if the second part of your div was smaller. * Please note that I added a better alternative below.
Check this jsfiddle or the snippet below for complete cross-browser code.
div{
position:relative;
width:80%;
height:100px;
color:red;
text-align:center;
line-height:100px;
margin-bottom:10px;
}
.a{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}
.b{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}
.c{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */
}
.c:after{
content:"";
position:absolute;
right:0;
bottom:0;
width:50%;
height:20%;
background-color:white;
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
There is also an alternative for the C div without using a white background to hide the a part of the second section.
Instead, we make the second part transparent and we use the :after selector to act as a colored background with the desired position and size.
See this jsfiddle or the snippet below for this updated solution.
div {
position: relative;
width: 80%;
height: 100px;
color: red;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
}
.a {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, #f6f6f6), color-stop(100%, #f6f6f6));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
/* IE6-9 */
}
.b {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(100%, #f6f6f6));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #f6f6f6 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
/* IE6-9 */
}
.c {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#ffffff00', GradientType=1);
/* IE6-9 */
}
.c:after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 80%;
background-color: #33ccff;
z-index: -1
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
You could apply both background-color and border to make it look like 2 colors.
div.A { width: 50px; background-color: #9c9e9f; border-right: 50px solid #f6f6f6; }
The border should have the same size as the width.
Sorry for misunderstanding, from what I understood you want your DIV to have three different colors with different heights. This is the output of my code:
,
If this is what you want try this code:
div {
height: 100px;
width:400px;
position: relative;
}
.c {
background: blue; /* Old browsers */
}
.c:after{
content: '';
position: absolute;
width:20%;
left:0;
height:110%;
background: yellow;
}
.c:before{
content: '';
position: absolute;
width:40%;
left:60%;
height:140%;
background: green;
}
<div class="c"></div>
it is compatible with all the browsers, change values to fit your application
background: #fdfdfd;
background: -moz-linear-gradient(top, #fdfdfd 0%, #f6f6f6 60%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(60%,#f6f6f6), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f2f2f2',GradientType=0
With :after and :before you can do that.
HTML:
<div class="a"> </div>
<div class="b"> </div>
<div class="c"> </div>
CSS:
div {
height: 100px;
position: relative;
}
.a {
background: #9C9E9F;
}
.b {
background: linear-gradient(to right, #9c9e9f, #f6f6f6);
}
.a:after, .c:before, .c:after {
content: '';
width: 50%;
height: 100%;
top: 0;
right: 0;
display: block;
position: absolute;
}
.a:after {
background: #f6f6f6;
}
.c:before {
background: #9c9e9f;
left: 0;
}
.c:after {
background: #33CCFF;
right: 0;
height: 80%;
}
And a demo.
You can create something like c using CSS multiple-backgrounds.
div {
background: linear-gradient(red, red),
linear-gradient(blue, blue),
linear-gradient(green, green);
background-size: 30% 50%,
30% 60%,
40% 80%;
background-position: 0% top,
calc(30% * 100 / (100 - 30)) top,
calc(60% * 100 / (100 - 40)) top;
background-repeat: no-repeat;
}
Note, you still have to use linear-gradients for background types, because CSS will not allow you to control the background-size of a single color layer. So here we just make a single-color gradient. Then you can control the size/position of each of those blocks of color independently. You also have to make sure they don't repeat, or they'll just expand and cover the whole image.
The trickiest part here is background-position. A background-position of 0% puts your element's left edge at the left. 100% puts its right edge at the right. 50% centers is middle.
For a fun bit of math to solve that, you can guess the transform is probably linear, and just solve two little slope-intercept equations.
// (at 0%, the div's left edge is 0% from the left)
0 = m * 0 + b
// (at 100%, the div's right edge is 100% - width% from the left)
100 = m * (100 - width) + b
b = 0, m = 100 / (100 - width)
so to position our 40% wide div 60% from the left, we put it at 60% * 100 / (100 - 40) (or use css-calc).
background: linear-gradient(152deg , #0A64B1 60%,#0A64B1 33%,#2C3E52 45%,#2C3E52 156%);
You can do this way:-
In CSS file:-
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
display: flex;
}
.split {
height: 100vh;
width: 50%;
top: 0;
}
.left {
background-color: lightblue;
left: 0;
}
.left h1 {
text-align: center;
margin-top: 20%;
font-size: 90px;
}
.right {
background-color: lightsalmon;
right: 0;
}
.footer {
background-color: black;
color: white;
font-size: 13px;
padding: 1px;
}
</style>
And in body:-
<body>
<div class="container">
<div class="split left">
<h1>Welcome<br>to<br>website</h1>
</div>
<div class="split right">
<h2>welcome<br>to<br>website</h2>
</div>
</div>
<div class="footer">
<h3>copyright ©</h3>
</div>
</body>
I've got the following background properties I want to apply to an element:
background: url('../img/bg.png') !important;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
I want the image to be displayed first, and the gradient over it. Is it possible to do this?
Because gradients are considered images for the purposes of background (or pretty much any CSS property that takes an image), you can simply list the image after the gradient with a comma. The caveat is that because you have so many prefixes, you need to repeat the image URL for each one:
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))), url('../img/bg.png') !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
I left the !important tokens in but you should probably remove them if they aren't there for any specific purpose. I did remove the -ms-linear-gradient() line though, because it's absolutely not needed.
It's probably going to require two elements, but you can use a pseudo-element to make things a little cleaner. FIDDLE.
#yourelement {
position: relative;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
}
#yourelement:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background: url('../img/bg.png') !important;
}
I just tried it and with luck this worked in my safari browser.
background: url('img.png'), -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%,transparent 50%,rgba(0, 0, 0, 1) 100%);
so in your case you would use
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0, 0, 0, 1)), color-stop(50%,transparent), color-stop(100%,rgba(0, 0, 0, 1))), url('../img/bg.png');
Here is a fiddle
I've asked the question before one day. And someone give me a link too. But, I can't write the proper code. I need a CSS for this background image:
In this online generator, I've tried, but I can't generate the almost left pure/solid portion of white background color:
Can you please, help me for it.
HTML Codes:
<div id="banner" class="outer">
<div class="inner"></div>
</div>
CSS code:
.outer {
width: 100%;
float: left;
}
.inner {
width: 978px;
margin: 0 auto;
text-align: left;
position: relative;
}
#banner {
display: block;
float: left;
margin: 2px 0 0 0;
padding: 12px 0 0 0;
height: 290px;
background: rgb(208,208,208); /* Old browsers */
background: -moz-linear-gradient(left, rgba(208,208,208,1) 0%, rgba(202,202,202,1) 1%, rgba(202,202,202,1) 2%, rgba(223,223,223,1) 9%, rgba(225,225,225,1) 12%, rgba(228,228,228,1) 13%, rgba(228,228,228,1) 53%, rgba(207,207,207,1) 65%, rgba(207,207,207,1) 68%, rgba(198,198,198,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(208,208,208,1)), color-stop(1%,rgba(202,202,202,1)), color-stop(2%,rgba(202,202,202,1)), color-stop(9%,rgba(223,223,223,1)), color-stop(12%,rgba(225,225,225,1)), color-stop(13%,rgba(228,228,228,1)), color-stop(53%,rgba(228,228,228,1)), color-stop(65%,rgba(207,207,207,1)), color-stop(68%,rgba(207,207,207,1)), color-stop(100%,rgba(198,198,198,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#c6c6c6',GradientType=1 ); /* IE6-9 */
}
That generator isn't working because that's not a single gradient; it's two. There's a horizontal gradient on the bottom and a vertical gradient atop that. You can use multiple backgrounds for that. This is what I came up with:
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 20%, transparent 97%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #e2e2e2, #fff 40%, #cbcbcb);
As you can see, there's a comma between the linear gradients, which means to composite the first one atop the second one. You can also see I'm using rgba and transparent on the top one so parts show through to the bottom gradient.
Take a look.
This is pretty close to your image. It uses a radial gradient and an inset shadow.
http://jsfiddle.net/daCrosby/eZN6Y/
/* Inner Shadow */
-webkit-box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);
/* Gradient */
background: #ffffff;
background: -moz-radial-gradient(40% 20%, ellipse cover, #ffffff 25%, #cccccc 60%);
background: -webkit-gradient(radial, 40% 20%, 0px, 40% 20%, 100%, color-stop(25%,#ffffff), color-stop(600%,#cccccc));
background: -webkit-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: -o-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: -ms-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: radial-gradient(ellipse at 40% 20%, #ffffff 25%,#cccccc 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=1 );