This question already has answers here:
CSS3 Gradient for multiple browsers
(3 answers)
Closed 8 years ago.
I am new to CSS and not sure how to create different version of the css snippet below for all browsers:
background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.1) 0px, rgba(0, 0, 0, 0.1) 100%) repeat scroll 0 0 #66BAC0;
I got it from somewhere on the web but it doesn't have other vendor prefixes or browser types. How can I do this using an online tool or by doing it manually?
Here's your code:
background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0px, rgba(0,0,0,0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgba(255,255,255,0.1)), color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a000000',GradientType=0 );
I really recommend this site: http://www.colorzilla.com/gradient-editor/ - it allows you to easily create cross browser CSS gradients.
Related
I am trying to make some LESS Mixin for graditent that will wotk in IE8, i know i can use gradient in IE8 like this
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
This is juwt example, but what i need to make some custom mixin that will create that for IE8, this is CSS what i have
background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
What i need is to modified my LESS mixins that i created
.gradient (#startColor: #eee, #endColor: white) {
background-color: #startColor;
background: -webkit-gradient(linear, left top, left bottom, from(#startColor), to(#endColor));
background: -webkit-linear-gradient(top, #startColor, #endColor);
background: -moz-linear-gradient(top, #startColor, #endColor);
background: -ms-linear-gradient(top, #startColor, #endColor);
background: -o-linear-gradient(top, #startColor, #endColor);
}
For support for IE8 :)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#startColor', endColorstr='#endColor',GradientType=0 ); /* IE6-9 */
But the problem is here
'#startColor'
In brackets, it does not recognize the variable
The traditional LESS compiler will not accept the filter property and will throw you an error. You simply use LESS Escaping for this problem as well. all you need to do is add the following line in your gradient and it should work just fine.
filter: ~”progid:DXImageTransform.Microsoft.gradient(startColorstr='#{startColor},
endColorstr='#{endColor})”;
This line will appear as it is in the code.
Question, if I wanted to create gradient lines that fade out on the top and bottom, similar to the lines seen on AT&T's drop down menu that separate the menu items, how would I go about that? I want to create a similar effect on a menu that I am coding, and I would prefer not to use images. Is there a way to achieve this in CSS? Help much appreciated! Thanks.
Microsoft CSS Gradient is a GUI you can use. just copy the CSS into your code:
Example:
#div {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #FFFFFF 0%, #00A3EF 100%);
}
You can create a div with 1px width then assign a gradient on it. Like that :
.line{
width:1px;
height : 25px;
margin : 0 5px;
background: rgb(125,185,232);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(125,185,232,1) 0%, rgba(30,87,153,1) 50%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(50%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -o-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -ms-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 );
}
Fiddle : http://jsfiddle.net/jPnXz/
Here a CSS gradient generator (i used it for the CSS) : http://www.colorzilla.com/gradient-editor/
Great documentation on CSS3 Gradients
http://www.css3files.com/gradient/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients
Gradient Generators
http://www.colorzilla.com/gradient-editor/
http://gradients.glrzad.com
http://www.cssmatic.com/gradient-generator
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/
You have repeating-gradient as well for this :
http://codepen.io/anon/pen/zbLkl
background:repeating-linear-gradient(
top ,
white 0,
white 1em,
turquoise 1em,
turquoise 1.2em) 0 2.4em;
line-height:1.2em;
Set equal line-height to gradient , so gradient will follow font-size.
the time to dig it, an old example with squares. and background-size.http://dabblet.com/gist/4750827
background:
linear-gradient(0deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent),
linear-gradient(90deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent);
background-size:1.4em 1.4em,1.4em 1.4em;
line-height:1.4em;
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: linear-gradient(to top left ,#FFA500, #DDA0DD,#FFFAF0,#bfff00,#00ffff,#A9A9A9);
}
</style>
</head>
<body>
<h1>Linear Gradient</h1>
<div id="grad1"></div>
<br/>
<div>Internet Explorer 9 and earlier versions do not support gradients</div>
</body>
</html>
I am HTML5 beginner and I just have created my portfolio page using Twitter Bootstrap. I generated my gradient by using colorzilla gradient generator.
Unfortunately sometimes my gradient loads incorrectly in Chrome and it looks like this:
What's wrong with my page?
This is what the Bootstap gradient mixin gives, you could see if the results are any different:
.iamcoming {
background-color: #525252;
background-image: -moz-linear-gradient(top, #444444, #666666);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#666666));
background-image: -webkit-linear-gradient(top, #444444, #666666);
background-image: -o-linear-gradient(top, #444444, #666666);
background-image: linear-gradient(to bottom, #444444, #666666);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff666666', GradientType=0);
}
Good luck!
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is it possible to graduate the opacity of an HTML element?
I am trying to get a div (and its border and contents) to fade into transparency (ie solid at the top and transparent at the bottom) using css.
Is there a way to do this?
Ive been able to fade the background out with the following:
.fade-to-nothing
{
background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
background-image: linear-gradient(to bottom, rgba(255,255,255,1),rgba(255,255,255,0));
background-repeat: repeat-x;
}
but haven't been able to find a way to do it to the content/border of the div as well. perhaps with some kind of nesting or an overlay?
EDIT
heres what I was trying to do:
Quoting from my answer here:
Check this working demo, and try to add/remove contents from #contents
HTML
<div id="container">
<div id="contents">
Some contents goes here
</div>
<div id="gradient">
</div>
</div>
CSS
#container {
position:relative;
}
#contents {
background:red;
}
#gradient {
position:absolute;
z-index:2;
right:0; bottom:0; left:0;
height:200px; /* adjust it to your needs */
background: url(data:image/svg+xml;base64,alotofcodehere);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}
This will work almost in any browser which supports opacity (including IE9), and here's the IE8 "rgba" fallback (untested):
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
To generate your own gradient, visit Colorzilla.
The first stop (0%) must have opacity 0 ( rgba(255,255,255,0); ), then around 70% - do some tests to find what's good for you - add another stop with opacity 1 ( rgba(255,255,255,1); ).
If you know the height you can use that knowledge to your advantage, you can always update it from js though, but this seems a bit simpler to me than defining countless gradients http://jsfiddle.net/6cXRZ/4/ you can adjust your parameters to hide however much you like
Please see the images below. Notice how the inner gradient in Chrome permeates only for only 10px from the top to bottom whereas in Firefox, the gradient permeates throughout the whole div.
I want to make the Firefox gradient to behave like Chrome gradient.
Is there some way in Firefox to do this?
The following are my css code for Chrome and Firefox.
background: -webkit-gradient(linear, 0 0, 0 10, from(#F5F6F7), to(white));
background: -moz-linear-gradient(top, #F5F6F7, white);
Chrome
Firefox
I think you may be looking for something like this:
background: -moz-linear-gradient(top, #CCC 0%, #FFFFFF 10%);
You were just missing the color stop arguments.
Live Demo: http://jsfiddle.net/kd8Vf/3/
I changed the colour to #CCC and the background to black so you can see it better. Change back the colours accordingly.
Also see: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient
Something like this: gradient example
background: #034769;
background: -moz-linear-gradient(top, #034769 0%, #63add0 10%, #ffffff 27%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#034769), color-stop(10%,#63add0), color-stop(27%,#ffffff));
background: -webkit-linear-gradient(top, #034769 0%,#63add0 10%,#ffffff 27%);
background: -o-linear-gradient(top, #034769 0%,#63add0 10%,#ffffff 27%);
background: -ms-linear-gradient(top, #034769 0%,#63add0 10%,#ffffff 27%);
background: linear-gradient(to bottom, #034769 0%,#63add0 10%,#ffffff 27%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#034769', endColorstr='#ffffff',GradientType=0 );