I am using an gradient with opacity as an brightness effect for JUST my background. Now it works in Chrome and Firefox but doesn't seem to work in IE10, but I did put the -ms- version there.
Here is my JSFiddle: >>>JSFiddle<<<
Here is the code:
<div id="lol">
</div>
-
#lol {
background-image:url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
width:700px;
height:465px;
}
#lol:hover {
background: -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 100%), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(100%,rgba(255,255,255,.1))), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
background: -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) 100%), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
background: -o-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) 100%), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
background: -ms-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) 100%), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
background: linear-gradient(to bottom, rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) 100%), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
}
Does anyone know what is wrong with this code? Why doesn't it work in Internet Explorer 10?
Thanks in advance.
Related
If I have the following CSS property for my body:
body {
background-color: red;
background-image: linear-gradient(red, orange);
}
Then the gradient appears on my web page but it does not take up the full screen size (I have a big monitor). It appears as below: Is this a issue with the footer? I do not have a footer currently.
Got the same problem but only this one is working, please add this style to your css
background-attachment: fixed;
The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. There are three values: scroll, fixed, and local. Works best with gradient background.
Check out the doc here
Try this DEMO
body, html {
height: 100%;
width: 100%;
}
body {
background: rgba(231,56,39,1);
background: -moz-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(231,56,39,1)), color-stop(27%, rgba(231,56,39,1)), color-stop(100%, rgba(255,166,0,1)));
background: -webkit-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: -o-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: -ms-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: linear-gradient(to bottom, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
}
The answer was actually the margin property.
body, html {
height: 100%;
width: 100%;
margin: 0;
}
First, this is for the boxed part of a of a wordpress theme.
what i want to do is to make the top of the background transparent of 300px and the rest a #f2f2f2.
check this example:
background: linear-gradient(to top, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
i want it in pixels and not percentage
After some research and editing I was able to get that sharp change in color.
Here is the answer :
background: -webkit-linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
background: -o-linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
background: -moz-linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
background: linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
So here's my issue, I'm trying to get this effect
So I'd use this CSS
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #5FC7F4),
color-stop(1, #069ADA)
);
background-image: -o-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: -moz-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: -webkit-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: -ms-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: linear-gradient(to bottom, #5FC7F4 0%, #069ADA 100%);
Now what happens is when I use that, I get
As you can see there are "layers", and its not exactly a "smooth" gradient. Here's a demo http://jsfiddle.net/U4FU3/
And ideas?
Nothing's wrong with your gradient - you just need to set the height like so:
html, body {
height: 100%;
}
#gradient {
height: 200px;
background: -webkit-linear-gradient(#5FC7F4, #069ADA ); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#5FC7F4, #069ADA ); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#5FC7F4, #069ADA ); /* For Firefox 3.6 to 15 */
background: linear-gradient(#5FC7F4, #069ADA); /* Standard syntax (must be last) */
}
This seems to work fine
Check out this example:
http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear
I don't want to use an image for this. I want to create a line which from transparent towards solid with css. Can I? with css3 or html5 as like this;
Like this: http://codepen.io/richbradshaw/pen/uexaG
.blurred-line {
height:30px;
width:600px;
margin:0 auto;
-moz-background-image: linear-gradient(to right, transparent 0%, black 100%);
background-image: linear-gradient(to right, transparent 0%, black 100%);
border-radius:15px;
-webkit-filter:blur(1px);
}
Which renders like:
Despite what most people seem to think, that gradient syntax is the real syntax, and works in Firefox 10+, Chrome 26+, IE10+ and Safari 6 (or 7?)+.
Including all the ancient gradient stuff is a waste of time, unless you are planning to support browsers that don't exist (e.g. Chrome 10, Firefox 3.6).
I suggest you to use a horizontal linear gradient with border radius, something like:
border-radius:50px;
background:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
See this jsfiddle or the snippet below for more details.
.rounded {
height:50px;
width:80%;
border-radius:50px;
background: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -moz-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}
<div class="rounded"></div>
There is a gradient generator that i like a lot since it gives crossBrowser solution called "Ultimate CSS Gradient Generator".
Use rgba format
/* webkit example */
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
)
An example: http://nicolahibbert.com/css3-alpha-transparent-gradients/
Duplicate: CSS3 Transparency + Gradient
This tool might be helpful too: http://www.colorzilla.com/gradient-editor/
As you said "from transparent towards solid", this should be what you want:
HTML
<div class="container">
<div class="gradient">
</div>
</div>
CSS
div.container {
width: 500px;
height: 30px;
/*background-color: #791;*/ /*uncomment this property to see the transparency effect*/
padding: 10px;
}
div.gradient {
width: 100%;
height: 100%;
background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1)); /* use vendor specific property if the standard one does not work */
border-radius: 25px;
}
You can do this with CSS3, and if you want it to look just like the image you provided, you can use some transparency and border-radius. I always found this link helpful:
html
<div></div>
css
div{
width: 500px;
height: 500px;
background: linear-gradient(to top, #00f, #fff);
}
Does anyone know how to make ie work for gradient effect?
I have also applied filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f', endColorstr='#fff');
but it works differently in ie. You can see this in your test page, copy and paste then see the different between them. IE has deep color.
This is what you should have for cross-browser solution:
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(0,0,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(0,0,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0000ff',GradientType=0 );
Here is a working example. Also I recommend using some gradient generator for this. Makes your life a lot easier. For example try colorzilla
try this one
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#0000ff', GradientType='0');